From c571018830230b2441b97af39eb0d5e42508cd13 Mon Sep 17 00:00:00 2001
From: lmeyer <l.meyer@mittwald.de>
Date: Mon, 14 Oct 2024 11:09:42 +0200
Subject: [PATCH] fix(Select): fix overflow in select field

---
 .../src/components/Select/Select.module.scss   |  6 ++++++
 .../Select/stories/EdgeCases.stories.tsx       | 18 +++++++++++++++++-
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/components/src/components/Select/Select.module.scss b/packages/components/src/components/Select/Select.module.scss
index c99dbd83a..1463fdd3b 100644
--- 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
index 566b96a57..ab432cb12 100644
--- 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>
+  ),
+};