@@ -701,46 +721,47 @@ const MultiSelect = React.forwardRef(
{isOpen &&
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
- sortItems!(items, sortOptions as SortItemsOptions).map(
- (item, index) => {
- const isChecked =
- selectedItems.filter((selected) => isEqual(selected, item))
- .length > 0;
-
- const itemProps = getItemProps({
- item,
- // we don't want Downshift to set aria-selected for us
- // we also don't want to set 'false' for reader verbosity's sake
- ['aria-selected']: isChecked,
- });
- const itemText = itemToString(item);
-
- return (
-
-
-
- {itemToElement ? (
-
- ) : (
- itemText
- )}
-
-
-
- );
- }
- )}
+ sortItems!(
+ filteredItems,
+ sortOptions as SortItemsOptions
+ ).map((item, index) => {
+ const isChecked =
+ selectedItems.filter((selected) => isEqual(selected, item))
+ .length > 0;
+
+ const itemProps = getItemProps({
+ item,
+ // we don't want Downshift to set aria-selected for us
+ // we also don't want to set 'false' for reader verbosity's sake
+ ['aria-selected']: isChecked,
+ });
+ const itemText = itemToString(item);
+
+ return (
+
+
+
+ {itemToElement ? (
+
+ ) : (
+ itemText
+ )}
+
+
+
+ );
+ })}
{itemsCleared && (
diff --git a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
index 721cc7ffb47f..d90f77d8ee68 100644
--- a/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
+++ b/packages/react/src/components/MultiSelect/__tests__/MultiSelect-test.js
@@ -37,6 +37,27 @@ describe('MultiSelect', () => {
await expect(container).toHaveNoACViolations('MultiSelect');
});
});
+ it('does not render items with undefined values', async () => {
+ const items = [{ text: 'joey' }, { text: 'johnny' }, { text: undefined }];
+ const label = 'test-label';
+ render(
+
(item ? item.text : '')}
+ />
+ );
+
+ const labelNode = screen.getByRole('combobox');
+ await userEvent.click(labelNode);
+
+ expect(screen.getByRole('option', { name: 'joey' })).toBeInTheDocument();
+ expect(screen.getByRole('option', { name: 'johnny' })).toBeInTheDocument();
+ expect(
+ screen.queryByRole('option', { name: 'undefined' })
+ ).not.toBeInTheDocument();
+ });
it('should initially render with a given label', () => {
const items = generateItems(4, generateGenericItem);
diff --git a/packages/react/src/components/NumberInput/NumberInput.stories.js b/packages/react/src/components/NumberInput/NumberInput.stories.js
index c0f6466a30fc..05101e414a57 100644
--- a/packages/react/src/components/NumberInput/NumberInput.stories.js
+++ b/packages/react/src/components/NumberInput/NumberInput.stories.js
@@ -23,7 +23,7 @@ export const Default = () => {
return (
{
return (
(
if (defaultValue !== undefined) {
return defaultValue;
}
+ if (allowEmpty) {
+ return '';
+ }
return 0;
});
const [prevControlledValue, setPrevControlledValue] =
@@ -306,7 +309,10 @@ const NumberInput = React.forwardRef(
}
const state = {
- value: Number(event.target.value),
+ value:
+ allowEmpty && event.target.value === ''
+ ? ''
+ : Number(event.target.value),
direction: value < event.target.value ? 'up' : 'down',
};
setValue(state.value);
@@ -344,7 +350,10 @@ const NumberInput = React.forwardRef(
: inputRef.current.stepDown();
const state = {
- value: Number(inputRef.current.value),
+ value:
+ allowEmpty && inputRef.current.value === ''
+ ? ''
+ : Number(inputRef.current.value),
direction: direction,
};
setValue(state.value);
diff --git a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
index cf78fff9c691..531627b5faee 100644
--- a/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
+++ b/packages/react/src/components/NumberInput/__tests__/NumberInput-test.js
@@ -373,4 +373,36 @@ describe('NumberInput', () => {
expect(onChange).toHaveBeenCalledTimes(0);
});
+
+ it('should update value to empty when allowEmpty is true & input value becomes empty', async () => {
+ const onChange = jest.fn();
+ render(
+
+ );
+
+ const input = screen.getByLabelText('NumberInput label');
+
+ await userEvent.clear(input);
+
+ userEvent.type(input, '{backspace}');
+ expect(input.value).toBe('');
+ expect(onChange).toHaveBeenCalledWith(
+ expect.objectContaining({
+ target: expect.any(Object),
+ }),
+ expect.objectContaining({
+ value: '',
+ })
+ );
+ });
});
diff --git a/packages/react/src/components/RadioTile/RadioTile-test.js b/packages/react/src/components/RadioTile/RadioTile-test.js
index 82077918c321..7b91f4e66a47 100644
--- a/packages/react/src/components/RadioTile/RadioTile-test.js
+++ b/packages/react/src/components/RadioTile/RadioTile-test.js
@@ -123,5 +123,13 @@ describe('RadioTile', () => {
expect(ref.current.type).toEqual('radio');
expect(ref.current.value).toEqual('some test value');
});
+ it('should pass "required" prop to the input element', () => {
+ render(
+
+ Option 1
+
+ );
+ expect(screen.getByRole('radio')).toHaveAttribute('required');
+ });
});
});
diff --git a/packages/react/src/components/RadioTile/RadioTile.tsx b/packages/react/src/components/RadioTile/RadioTile.tsx
index 36dbd92f6bd6..44749a5f5912 100644
--- a/packages/react/src/components/RadioTile/RadioTile.tsx
+++ b/packages/react/src/components/RadioTile/RadioTile.tsx
@@ -81,6 +81,11 @@ export interface RadioTileProps {
* Specify the value of the underlying ``.
*/
value: string | number;
+
+ /**
+ * `true` to specify if the input is required.
+ */
+ required?: boolean;
}
const RadioTile = React.forwardRef(function RadioTile(
@@ -95,6 +100,7 @@ const RadioTile = React.forwardRef(function RadioTile(
id,
onChange = noopFn,
tabIndex = 0,
+ required,
...rest
}: RadioTileProps,
ref: React.Ref
@@ -153,6 +159,7 @@ const RadioTile = React.forwardRef(function RadioTile(
type="radio"
value={value}
ref={ref}
+ required={required}
/>
