diff --git a/.changeset/mean-kids-marry.md b/.changeset/mean-kids-marry.md
new file mode 100644
index 00000000000..6e1e2f05847
--- /dev/null
+++ b/.changeset/mean-kids-marry.md
@@ -0,0 +1,5 @@
+---
+"@salt-ds/core": patch
+---
+
+Fixed list scroll when there is only one item in `ComboBox` and `Dropdown`.
diff --git a/packages/core/src/option/Option.css b/packages/core/src/option/Option.css
index 81feb76cce0..445a45016eb 100644
--- a/packages/core/src/option/Option.css
+++ b/packages/core/src/option/Option.css
@@ -32,30 +32,8 @@
.saltOption[aria-selected="true"] {
z-index: var(--salt-zIndex-default);
background: var(--salt-selectable-background-selected);
-}
-
-.saltOption[aria-selected="true"]::after {
- content: "";
- display: block;
- position: absolute;
- top: -1px;
- bottom: -1px;
- left: 0;
- width: 100%;
-}
-
-.saltOption[aria-selected="true"]::after {
- border-top: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
- border-bottom: var(--salt-size-border) var(--salt-selectable-borderStyle-selected) var(--salt-selectable-borderColor-selected);
-}
-
-.saltOption[aria-selected="true"]:first-of-type::before {
- border-top: unset;
- top: 0;
-}
-.saltOption[aria-selected="true"]:last-of-type::before {
- border-bottom: unset;
- bottom: 0;
+ box-shadow: calc(var(--salt-size-border) * -2) 0 0 0 var(--salt-selectable-background-hover), calc(var(--salt-size-border) * -1) 0 0 var(--salt-size-border)
+ var(--salt-selectable-borderColor-selected), 0 calc(var(--salt-size-border) * -1) 0 var(--salt-selectable-borderColor-selected);
}
.saltOption[aria-disabled="true"] {
diff --git a/packages/core/stories/combo-box/combo-box.qa.stories.tsx b/packages/core/stories/combo-box/combo-box.qa.stories.tsx
index 1f097ec0024..1458448f822 100644
--- a/packages/core/stories/combo-box/combo-box.qa.stories.tsx
+++ b/packages/core/stories/combo-box/combo-box.qa.stories.tsx
@@ -5,6 +5,7 @@ import {
FormFieldLabel,
Option,
OptionGroup,
+ StackLayout,
} from "@salt-ds/core";
import type { Meta, StoryFn } from "@storybook/react";
import { QAContainer, type QAContainerProps } from "docs/components";
@@ -242,3 +243,29 @@ ClosedExamples.parameters = {
},
},
};
+
+export const OpenWithSingleSelectionExamples: StoryFn<
+ QAContainerProps
+> = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* empty group to ensure borders are not overlapping */}
+
+
+
+);
+
+OpenWithSingleSelectionExamples.parameters = {
+ chromatic: { disableSnapshot: false },
+};
diff --git a/packages/core/stories/dropdown/dropdown.qa.stories.tsx b/packages/core/stories/dropdown/dropdown.qa.stories.tsx
index b662153a381..d8368966523 100644
--- a/packages/core/stories/dropdown/dropdown.qa.stories.tsx
+++ b/packages/core/stories/dropdown/dropdown.qa.stories.tsx
@@ -5,6 +5,7 @@ import {
FormFieldLabel,
Option,
OptionGroup,
+ StackLayout,
} from "@salt-ds/core";
import type { Meta, StoryFn } from "@storybook/react";
import { QAContainer, type QAContainerProps } from "docs/components";
@@ -152,3 +153,29 @@ ClosedExamples.parameters = {
},
},
};
+
+export const OpenWithSingleSelectionExamples: StoryFn<
+ QAContainerProps
+> = () => (
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* empty group to ensure borders are not overlapping */}
+
+
+
+);
+
+OpenWithSingleSelectionExamples.parameters = {
+ chromatic: { disableSnapshot: false },
+};