From d755f2c943a98e7dd5a20158255c2439f83d1540 Mon Sep 17 00:00:00 2001
From: Joseph Schultz <cuppajoey@users.noreply.github.com>
Date: Fri, 26 Jul 2024 08:37:11 -0500
Subject: [PATCH] feat(FilterableMultiSelect): assign given `id` to the listbox
 (#16917)

Pass the existing `id` prop to the rendered `ListBox` for parity
with `MultiSelect`.

Co-authored-by: Riddhi Bansal <41935566+riddhybansal@users.noreply.github.com>
---
 .../src/components/MultiSelect/FilterableMultiSelect.tsx   | 1 +
 .../MultiSelect/__tests__/FilterableMultiSelect-test.js    | 7 +++++++
 2 files changed, 8 insertions(+)

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(<FilterableMultiSelect {...mockProps} id="custom-id" />);
+    await waitForPosition();
+
+    expect(document.querySelector(`.${prefix}--list-box`).id).toBe('custom-id');
+  });
 });