fix(FilterableMultiSelect): extend input outline to trigger button ar…

…ea (#7722) * refactor(multi-select): avoid duplicate selector * fix(FilterableMultiSelect): extend input outline to trigger button area * chore: update snapshots
carbon-design-system · Feb 5, 2021 · c111af1 · c111af1
1 parent 79db553
commit c111af1
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 3 deletions.
diff --git a/packages/components/src/components/multi-select/_multi-select.scss b/packages/components/src/components/multi-select/_multi-select.scss
@@ -65,15 +65,29 @@
     color: $text-01;
   }
 
+  .#{$prefix}--multi-select--filterable {
+    transition: outline-color $duration--fast-01 motion(standard, productive);
+  }
+
+  .#{$prefix}--multi-select--filterable.#{$prefix}--combo-box
+    .#{$prefix}--text-input {
+    background-clip: padding-box;
+    border: rem(2px) solid transparent;
+    outline: none;
+  }
+
+  .#{$prefix}--multi-select--filterable--input-focused {
+    @include focus-outline('outline');
+  }
+
   .#{$prefix}--multi-select--filterable.#{$prefix}--list-box--disabled:hover
     .#{$prefix}--text-input {
     background-color: $field-01;
   }
 
-  .#{$prefix}--multi-select--filterable {
+  .#{$prefix}--multi-select--filterable
     .#{$prefix}--list-box__selection--multi {
-      margin: 0 0 0 $spacing-05;
-    }
+    margin: 0 0 0 $spacing-05;
   }
 
   .#{$prefix}--multi-select--filterable.#{$prefix}--multi-select--inline,

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -181,6 +181,7 @@ export default class FilterableMultiSelect extends React.Component {
       isOpen: props.open,
       inputValue: '',
       topItems: [],
+      inputFocused: false,
     };
   }
 
@@ -273,6 +274,14 @@ export default class FilterableMultiSelect extends React.Component {
     this.inputNode && this.inputNode.focus && this.inputNode.focus();
   };
 
+  handleInputFocus = (_) => {
+    this.setState({ inputFocused: true });
+  };
+
+  handleInputBlur = (_) => {
+    this.setState({ inputFocused: false });
+  };
+
   render() {
     const { highlightedIndex, isOpen, inputValue } = this.state;
     const {
@@ -385,6 +394,8 @@ export default class FilterableMultiSelect extends React.Component {
                   [`${prefix}--multi-select--inline`]: inline,
                   [`${prefix}--multi-select--selected`]:
                     selectedItem.length > 0,
+                  [`${prefix}--multi-select--filterable--input-focused`]: this
+                    .state.inputFocused,
                 }
               );
               const buttonProps = {
@@ -426,6 +437,8 @@ export default class FilterableMultiSelect extends React.Component {
                       {...getInputProps({
                         disabled,
                         placeholder,
+                        onFocus: this.handleInputFocus,
+                        onBlur: this.handleInputBlur,
                         onKeyDown: this.handleOnInputKeyDown,
                       })}
                     />

diff --git a/...act/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap b/...act/src/components/MultiSelect/__tests__/__snapshots__/FilterableMultiSelect-test.js.snap
@@ -137,6 +137,7 @@ exports[`MultiSelect.Filterable should render 1`] = `
                   id="test-filterable-multiselect-input"
                   onBlur={[Function]}
                   onChange={[Function]}
+                  onFocus={[Function]}
                   onKeyDown={[Function]}
                   placeholder="Placeholder..."
                   value=""