diff --git a/packages/components/src/components/list-box/_list-box.scss b/packages/components/src/components/list-box/_list-box.scss index 56ae3cd629fe..f6eaf542f46b 100644 --- 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 index 7293f64b8dad..86e283bfce29 100644 --- 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 ( (this.inputNode = el)} id={`${id}-input`} + style={{ paddingLeft: inputPadding }} {...getInputProps({ disabled, placeholder,