feat(FilterableMultiSelect): assign given id to the listbox

Pass the existing `id` prop to the rendered `ListBox` for parity with `MultiSelect`.
carbon-design-system · Jul 5, 2024 · abb0188 · abb0188
1 parent 77aa024
commit abb0188
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 0 deletions.
diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx b/packages/react/src/components/MultiSelect/FilterableMultiSelect.tsx
@@ -760,6 +760,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
@@ -194,4 +194,11 @@ describe('FilterableMultiSelect', () => {
       `${prefix}--list-box__wrapper--slug`
     );
   });
+
+  it('should place the given id on the listbox wrapper', async () => {
+    render(<FilterableMultiSelect {...mockProps} id="custom-id" />);
+    await waitForPosition();
+
+    expect(document.querySelector(`.${prefix}--list-box`).id).toBe('custom-id');
+  });
 });