From 3ac10c88a21d572001b8bfaea9b02f4b6deb4f2f Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Wed, 24 Apr 2024 12:29:15 -0400
Subject: [PATCH 1/2] fix(Multiselect): remove focus when MultiSelect is open

---
 .../FluidMultiSelect/FluidMultiSelect.stories.js  | 15 +++++++++++++++
 .../scss/components/multiselect/_multiselect.scss |  4 +++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
index f75cc72f5fa4..7dc9f2dba8e8 100644
--- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
+++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
@@ -82,6 +82,21 @@ export const Default = () => (
   </div>
 );
 
+export const Filterable = () => (
+  <div style={{ width: '400px' }}>
+    <FluidMultiSelect
+      isFilterable
+      onChange={() => {}}
+      initialSelectedItem={items[2]}
+      id="default"
+      titleText="Label"
+      label="Choose an option"
+      items={items}
+      itemToString={(item) => (item ? item.text : '')}
+    />
+  </div>
+);
+
 export const Condensed = () => (
   <div style={{ width: '400px' }}>
     <FluidMultiSelect
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index bc89f28a9054..7fbf0a732090 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -89,7 +89,9 @@
 
   .#{$prefix}--multi-select--filterable--input-focused,
   .#{$prefix}--multi-select
-    .#{$prefix}--list-box__field--wrapper--input-focused {
+    .#{$prefix}--list-box__field--wrapper--input-focused:has(
+      button[aria-expanded='false']
+    ) {
     @include focus-outline('outline');
   }
 

From 58a15cd5582dc82f1e91da13ff62efd0862cd92b Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 25 Apr 2024 11:05:05 -0400
Subject: [PATCH 2/2] fix(Multiselect): add focus when item is selected, add
 with layer story

---
 .../FluidMultiSelect.stories.js               | 19 +++++++++++++++++++
 .../components/multiselect/_multiselect.scss  |  4 ++++
 2 files changed, 23 insertions(+)

diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
index 7dc9f2dba8e8..6211af47fd60 100644
--- a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
+++ b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
@@ -6,6 +6,8 @@
  */
 
 import React from 'react';
+
+import { WithLayer } from '../../../.storybook/templates/WithLayer';
 import {
   FluidMultiSelect,
   FluidMultiSelectSkeleton,
@@ -97,6 +99,23 @@ export const Filterable = () => (
   </div>
 );
 
+export const _FilterableWithLayer = () => (
+  <WithLayer>
+    {(layer) => (
+      <div style={{ width: 300 }}>
+        <FluidMultiSelect
+          isFilterable
+          id={`carbon-multiselect-example-${layer}`}
+          titleText="Multiselect title"
+          items={items}
+          itemToString={(item) => (item ? item.text : '')}
+          selectionFeedback="top-after-reopen"
+        />
+      </div>
+    )}
+  </WithLayer>
+);
+
 export const Condensed = () => (
   <div style={{ width: '400px' }}>
     <FluidMultiSelect
diff --git a/packages/styles/scss/components/multiselect/_multiselect.scss b/packages/styles/scss/components/multiselect/_multiselect.scss
index 7fbf0a732090..04c59bc3f5f7 100644
--- a/packages/styles/scss/components/multiselect/_multiselect.scss
+++ b/packages/styles/scss/components/multiselect/_multiselect.scss
@@ -91,6 +91,10 @@
   .#{$prefix}--multi-select
     .#{$prefix}--list-box__field--wrapper--input-focused:has(
       button[aria-expanded='false']
+    ),
+  .#{$prefix}--multi-select.#{$prefix}--multi-select--selected
+    .#{$prefix}--list-box__field--wrapper--input-focused:has(
+      button[aria-expanded='true']
     ) {
     @include focus-outline('outline');
   }