fix: dropdown item too long

BeeInventor · Nov 15, 2023 · c509da7 · c509da7
1 parent cbd7b23
commit c509da7
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@beeinventor/dasiot-react-component-lib",
-  "version": "1.8.3",
+  "version": "1.8.4",
   "module": "lib/index.js",
   "types": "lib/index.d.ts",
   "files": [

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -27,6 +27,11 @@ const list: DropDownItem[] = [
     value: 'A004',
     name: 'Distributor C',
   },
+  {
+    id: 'A004',
+    value: 'A004',
+    name: 'Very long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long long',
+  },
 ];
 
 const meta: Meta<typeof Dropdown> = {
@@ -64,6 +69,30 @@ export const Default: Story = {
   render: () => <Dropdown list={list} onSelect={() => {}} />,
 };
 
+export const FixItemTooLong: Story = {
+  render: () => (
+    <Dropdown
+      list={list}
+      onSelect={() => {}}
+      popperProps={{
+        sx: {
+          '& .Dropdown-icon': {
+            flexShrink: 0,
+          },
+          '& .Dropdown-item': {
+            '> span': {
+              minWidth: 0,
+              textOverflow: 'ellipsis',
+              overflow: 'hidden',
+              whiteSpace: 'nowrap',
+            },
+          },
+        },
+      }}
+    />
+  ),
+};
+
 export const Exceptance: Story = {
   render: () => (
     <Dropdown

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -36,6 +36,13 @@ const Root = styled(Box)(({ theme }) => ({
     opacity: 0.3,
     pointerEvents: 'none',
   },
+
+  '& .selected-name': {
+    minWidth: 0,
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    whiteSpace: 'nowrap',
+  },
 }));
 
 const List = styled(Box)(({ theme }) => ({
@@ -148,7 +155,7 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         <Icon className="Dropdown-icon">
           {selectedItem?.id === item.id && <img src={CheckSvg} />}
         </Icon>
-        {item.name}
+        <span title={item.name}>{item.name}</span>
       </Item>
     ));
 
@@ -172,7 +179,12 @@ const Dropdown: React.FC<DropDownProps> = (props) => {
         onClick={handleOnClickSelect}
         {...otherProps}
       >
-        {selectedItem?.name ?? placeholder}
+        <span
+          className="selected-name"
+          title={selectedItem?.name ?? placeholder}
+        >
+          {selectedItem?.name ?? placeholder}
+        </span>
         <Icon className="Dropdown-icon">
           {isOpen ? <KeyboardArrowUp /> : <KeyboardArrowDown />}
         </Icon>