From 3913dbb394df09cc6a7f7305cbca1d4e170332ed Mon Sep 17 00:00:00 2001
From: Fernanda Castillo <fersitacastillo123@gmail.com>
Date: Mon, 29 Jul 2024 15:38:52 +0100
Subject: [PATCH] fix only item scroll in combobox (#3679)

---
 .changeset/mean-kids-marry.md                 |  5 ++++
 packages/core/src/option/Option.css           | 26 ++----------------
 .../combo-box/combo-box.qa.stories.tsx        | 27 +++++++++++++++++++
 .../stories/dropdown/dropdown.qa.stories.tsx  | 27 +++++++++++++++++++
 4 files changed, 61 insertions(+), 24 deletions(-)
 create mode 100644 .changeset/mean-kids-marry.md

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
+> = () => (
+  <QAContainer cols={2} itemPadding={12} width={800} vertical>
+    <StackLayout gap={10}>
+      <ComboBox placeholder="State" open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </ComboBox>
+      <ComboBox multiselect open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </ComboBox>
+    </StackLayout>
+    <ComboBox open defaultSelected={["Alaska"]} style={{ marginBottom: 280 }}>
+      <OptionGroup label={"A"}>
+        <Option value={"Alaska"} />
+      </OptionGroup>
+      {/* empty group to ensure borders are not overlapping */}
+      <OptionGroup label={"C"} />
+    </ComboBox>
+  </QAContainer>
+);
+
+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
+> = () => (
+  <QAContainer cols={2} itemPadding={12} width={800} vertical>
+    <StackLayout gap={8.5}>
+      <Dropdown placeholder="State" open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </Dropdown>
+      <Dropdown multiselect open defaultSelected={["Alaska"]}>
+        <Option value={"Alaska"} />
+      </Dropdown>
+    </StackLayout>
+    <Dropdown open defaultSelected={["Alaska"]} style={{ marginBottom: 280 }}>
+      <OptionGroup label={"A"}>
+        <Option value={"Alaska"} />
+      </OptionGroup>
+      {/* empty group to ensure borders are not overlapping */}
+      <OptionGroup label={"C"} />
+    </Dropdown>
+  </QAContainer>
+);
+
+OpenWithSingleSelectionExamples.parameters = {
+  chromatic: { disableSnapshot: false },
+};