fix(Select): fix overflow in select field

mittwald · Oct 14, 2024 · c571018 · c571018
1 parent 3dda8b0
commit c571018
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 1 deletion.
diff --git a/packages/components/src/components/Select/Select.module.scss b/packages/components/src/components/Select/Select.module.scss
@@ -18,4 +18,10 @@
       background-color: var(--form-control--background-color--invalid);
     }
   }
+
+  :global(.react-aria-SelectValue) {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
 }
diff --git a/packages/components/src/components/Select/stories/EdgeCases.stories.tsx b/packages/components/src/components/Select/stories/EdgeCases.stories.tsx
@@ -3,6 +3,7 @@ import Select, { Option } from "../index";
 import React from "react";
 import { Label } from "@/components/Label";
 import defaultMeta from "./Default.stories";
+import { dummyText } from "@/lib/dev/dummyText";
 
 const meta: Meta<typeof Select> = {
   ...defaultMeta,
@@ -12,7 +13,7 @@ export default meta;
 
 type Story = StoryObj<typeof Select>;
 
-export const Default: Story = {
+export const ManyOptions: Story = {
   render: (props) => (
     <Select {...props}>
       <Label>Label</Label>
@@ -24,3 +25,18 @@ export const Default: Story = {
     </Select>
   ),
 };
+
+export const LongTexts: Story = {
+  render: (props) => (
+    <Select {...props}>
+      <Label>Label</Label>
+      {Array(4)
+        .fill("")
+        .map((value, index) => (
+          <Option key={index}>
+            Option {index + 1} {dummyText.medium}
+          </Option>
+        ))}
+    </Select>
+  ),
+};