diff --git a/src/components/Combobox/Combobox.jsx b/src/components/Combobox/Combobox.jsx index 7f7c61a6c4..feb6a25591 100644 --- a/src/components/Combobox/Combobox.jsx +++ b/src/components/Combobox/Combobox.jsx @@ -96,9 +96,15 @@ const Combobox = forwardRef( let index = 0; return Object.keys(optionsByCategories).map((categoryId, categoryIndex) => { - return ( -
- {withCategoriesDivider && categoryIndex !== 0 && } + const withDivider = withCategoriesDivider && categoryIndex !== 0; + return [ + withDivider ? : null, +
{optionsByCategories[categoryId].map(option => { const renderedOption = ( @@ -120,7 +126,7 @@ const Combobox = forwardRef( return renderedOption; })}
- ); + ]; }); } return filterdOptions.map((option, index) => { @@ -141,17 +147,18 @@ const Combobox = forwardRef( ); }); }, [ - shouldScrollToSelectedItem, - optionLineHeight, - filterValue, - filterdOptions, categories, + filterdOptions, + filterValue, + withCategoriesDivider, + optionRenderer, activeItemIndex, isActiveByKeyboard, onOptionClick, onOptionEnter, onOptionLeave, - optionRenderer + optionLineHeight, + shouldScrollToSelectedItem ]); const onChangeCallback = useCallback( diff --git a/src/components/Combobox/Combobox.scss b/src/components/Combobox/Combobox.scss index 1ff2c64e57..c9f65e8d4c 100644 --- a/src/components/Combobox/Combobox.scss +++ b/src/components/Combobox/Combobox.scss @@ -7,6 +7,19 @@ display: flex; flex-direction: column; @include font-general-text(); + position: relative; + + .combobox_category { + &--with-divider { + margin-top: var(--spacing-medium); + } + + &-divider { + position: absolute; + width: calc(100% + 16px); + margin-left: -12px; + } + } &.sticky-category { .combobox-category { diff --git a/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap b/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap index 97273f553d..fff49fd5a8 100644 --- a/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap +++ b/src/components/Combobox/__tests__/__snapshots__/combobox-snapshot-tests.jest.js.snap @@ -513,6 +513,7 @@ exports[`Combobox renders correctly with divider 1`] = `
+
-