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`] = `