feat(ChipInput): add props to set width of options dropdown

The new props are dropdownWidth and dropdownMaxWidth. Refs: CDS-119 (#317)
zextras · May 20, 2024 · 5cbadb8 · 5cbadb8
1 parent 5b71261
commit 5cbadb8
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/components/inputs/ChipInput.md b/src/components/inputs/ChipInput.md
@@ -585,7 +585,7 @@ const options = [
 </Container>
 ```
 
-To simulate a suggestion mode, value the option prop dinamically, leaving the disableOptions prop set to false
+To simulate a suggestion mode, value the option prop dynamically, leaving the disableOptions prop set to true
 
 ```jsx
 import { useCallback, useState, useRef } from 'react';
@@ -685,6 +685,22 @@ const initOptions = useCallback(() => {
 </Container>
 ```
 
+#### Options dropdown width
+
+The width of the options dropdown can be changed with the props _dropdownWidth_ and _dropdownMaxWidth_.
+
+```jsx
+<ChipInput
+      placeholder="Custom options dropdown width"
+      options={[
+        { id: 'o1', label: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque ut ante quis eros sagittis placerat. Praesent porttitor erat nec metus blandit lacinia. Quisque ac laoreet lacus. Integer dolor odio, sollicitudin vitae finibus ut, dictum eget nibh. Aenean turpis ipsum, dapibus sed egestas ac, vulputate sit amet tortor.'}
+      ]}
+      dropdownWidth={'auto'}
+      dropdownMaxWidth={'100%'}
+      disableOptions={false}
+    />
+```
+
 ### Development status:
 
 ```jsx noEditor

diff --git a/src/components/inputs/ChipInput.tsx b/src/components/inputs/ChipInput.tsx
@@ -360,6 +360,10 @@ interface ChipInputProps<TValue = unknown>
 	bottomBorderColor?: DividerProps['color'];
 	/** Dropdown max height */
 	dropdownMaxHeight?: string;
+	/** Dropdown width */
+	dropdownWidth?: string;
+	/** Dropdown max width */
+	dropdownMaxWidth?: string;
 	/** Description for the input */
 	description?: string;
 	/** Custom Chip component */
@@ -418,6 +422,8 @@ const ChipInputComponent = React.forwardRef(function ChipInputFn<TValue = unknow
 		singleSelection = false,
 		bottomBorderColor = INPUT_DIVIDER_COLOR,
 		dropdownMaxHeight,
+		dropdownWidth = '100%',
+		dropdownMaxWidth,
 		description,
 		ChipComponent,
 		wrap = 'wrap',
@@ -718,13 +724,14 @@ const ChipInputComponent = React.forwardRef(function ChipInputFn<TValue = unknow
 			<Dropdown
 				items={dropdownItems}
 				display="block"
-				width="100%"
+				width={dropdownWidth}
 				disableAutoFocus
 				disableRestoreFocus
 				forceOpen={forceShowDropdown}
 				onClose={onClose}
 				disabled={dropdownDisabled}
 				maxHeight={dropdownMaxHeight}
+				maxWidth={dropdownMaxWidth}
 			>
 				<ContainerEl
 					ref={ref}