diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx index fd01086b3268..6d1fa6d1c864 100644 --- a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx +++ b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx @@ -772,6 +772,7 @@ const FilterableMultiSelect = React.forwardRef(function FilterableMultiSelect< disabled={disabled} light={light} ref={ref} + id={id} invalid={invalid} invalidText={invalidText} warn={warn} diff --git a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js index a9f02f2329a0..111f2c5eb123 100644 --- a/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js +++ b/packages/react/src/components/MultiSelect/__tests__/FilterableMultiSelect-test.js @@ -194,4 +194,11 @@ describe('FilterableMultiSelect', () => { `${prefix}--list-box__wrapper--slug` ); }); + + it('should place the given id on the listbox wrapper', async () => { + render(); + await waitForPosition(); + + expect(document.querySelector(`.${prefix}--list-box`).id).toBe('custom-id'); + }); });