fix(FilterableMultiselect): extend focus around entire input

carbon-design-system · Jan 20, 2021 · 3a0e0f7 · 3a0e0f7
1 parent 09a3729
commit 3a0e0f7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss
@@ -458,8 +458,10 @@ $list-box-menu-width: rem(300px);
   .#{$prefix}--list-box__selection--multi {
     @include type-style('label-01');
 
-    position: static;
+    position: absolute;
     top: auto;
+    right: auto;
+    left: 0;
     display: flex;
     align-items: center;
     justify-content: space-between;

diff --git a/packages/react/src/components/MultiSelect/FilterableMultiSelect.js b/packages/react/src/components/MultiSelect/FilterableMultiSelect.js
@@ -391,6 +391,15 @@ export default class FilterableMultiSelect extends React.Component {
                 ...getToggleButtonProps({ disabled }),
                 'aria-label': undefined,
               };
+
+              // Calculate input padding based on number of selected items
+              let inputPadding;
+              let itemCount = selectedItems.length;
+              if (itemCount > 0 && itemCount <= 9) {
+                inputPadding = '64px';
+              } else if (itemCount >= 10 && itemCount <= 99) {
+                inputPadding = '68px';
+              }
               return (
                 <ListBox
                   className={className}
@@ -423,6 +432,7 @@ export default class FilterableMultiSelect extends React.Component {
                       aria-autocomplete="list"
                       ref={(el) => (this.inputNode = el)}
                       id={`${id}-input`}
+                      style={{ paddingLeft: inputPadding }}
                       {...getInputProps({
                         disabled,
                         placeholder,