style(FluidMultiselect): adjust focus styles when invalid

carbon-design-system · Feb 24, 2023 · 01dc998 · 01dc998
1 parent 9eaac3e
commit 01dc998
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 3 deletions.
diff --git a/packages/react/src/components/MultiSelect/MultiSelect.stories.js b/packages/react/src/components/MultiSelect/MultiSelect.stories.js
@@ -302,7 +302,6 @@ export const _FilterableWithLayer = () => {
   return (
     <div style={{ width: 300 }}>
       <FilterableMultiSelect
-        invalid
         id="carbon-multiselect-example-3"
         titleText="First Layer"
         helperText="This is helper text"

diff --git a/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss b/packages/styles/scss/components/fluid-multiselect/_fluid-multiselect.scss
@@ -19,8 +19,9 @@
 @use '../fluid-combo-box';
 
 @mixin fluid-multiselect {
-  .#{$prefix}--multi-select__wrapper.#{$prefix}--list-box__wrapper--fluid--focus:not(.#{$prefix}--multi-select--filterable__wrapper) {
-    outline-offset: -2px;
+  .#{$prefix}--multi-select__wrapper.#{$prefix}--list-box__wrapper--fluid--focus:not(.#{$prefix}--multi-select--filterable__wrapper)
+    .#{$prefix}--list-box__field--wrapper--input-focused {
+    outline: none;
   }
 
   .#{$prefix}--list-box__wrapper--fluid