Merge pull request #5835 from ilzamcmed/LPD-28522

fix(@clayui/picker): LPD-28522 Fix language selector not displaying correctly on web content
liferay · Jun 26, 2024 · cd0ee86 · cd0ee86
2 parents 6a16971 + b69aae3
commit cd0ee86
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 17 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -58,8 +58,8 @@ module.exports = {
 		'./packages/clay-core/src/picker/': {
 			branches: 59,
 			functions: 66,
-			lines: 77,
-			statements: 77,
+			lines: 76,
+			statements: 76,
 		},
 		'./packages/clay-core/src/tree-view/': {
 			branches: 56,

diff --git a/packages/clay-core/src/picker/Picker.tsx b/packages/clay-core/src/picker/Picker.tsx
@@ -127,7 +127,7 @@ export type Props<T> = {
 	selectedKey?: React.Key;
 
 	/**
-	 * Sets the fixed width of the panel.
+	 * Sets the width of the panel.
 	 */
 	width?: number;
 
@@ -382,6 +382,8 @@ export function Picker<T extends Record<string, any> | string | number>({
 		);
 	}
 
+	const clientWidth = triggerRef.current?.clientWidth || 0;
+
 	return (
 		<>
 			<LiveAnnouncer ref={announcerAPI} />
@@ -537,14 +539,13 @@ export function Picker<T extends Record<string, any> | string | number>({
 						role="presentation"
 						style={{
 							maxWidth: 'none',
-							width: `${
+							minWidth: !width
+								? `${Math.max(160, clientWidth)}px`
+								: undefined,
+							width:
 								typeof width === 'number'
-									? width
-									: (triggerRef.current?.clientWidth || 0) >
-									  160
-									? triggerRef.current?.clientWidth
-									: 160
-							}px`,
+									? `${Math.max(width, clientWidth)}px`
+									: undefined,
 						}}
 					>
 						{UNSAFE_behavior === 'secondary' &&

diff --git a/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap b/packages/clay-core/src/picker/__tests__/__snapshots__/BasicRendering.tsx.snap
@@ -134,7 +134,7 @@ exports[`Picker basic rendering renders open component by default 1`] = `
     <div
       class="dropdown-menu dropdown-menu-indicator-start dropdown-menu-select dropdown-menu-width-shrink show"
       role="presentation"
-      style="max-width: none; width: 160px; left: -999px; top: -995px;"
+      style="max-width: none; min-width: 160px; left: -999px; top: -995px;"
     >
       <ul
         class="inline-scroller list-unstyled"

diff --git a/packages/clay-core/stories/Picker.stories.tsx b/packages/clay-core/stories/Picker.stories.tsx
@@ -231,13 +231,17 @@ export const Width = () => {
 	const labelId = useId();
 
 	return (
-		<>
-			<div style={{width: '250px'}}>
+		<div style={{display: 'flex'}}>
+			<div style={{marginRight: '50px', width: '250px'}}>
 				<Form.Group>
 					<label htmlFor={pickerId} id={labelId}>
 						Choose a fruit
 					</label>
-					<Picker aria-labelledby={labelId} id={pickerId}>
+					<Picker
+						aria-labelledby={labelId}
+						defaultActive
+						id={pickerId}
+					>
 						<Option key="apple">Apple</Option>
 						<Option disabled key="banana">
 							Banana
@@ -256,13 +260,14 @@ export const Width = () => {
 				</Form.Group>
 			</div>
 
-			<div style={{width: '100px'}}>
+			<div style={{marginRight: '80px', width: '100px'}}>
 				<Form.Group>
 					<label htmlFor={pickerId} id={labelId}>
 						Choose a fruit
 					</label>
 					<Picker
 						aria-labelledby={labelId}
+						defaultActive
 						id={pickerId}
 						placeholder="Fruit"
 					>
@@ -284,13 +289,14 @@ export const Width = () => {
 				</Form.Group>
 			</div>
 
-			<div style={{width: '100px'}}>
+			<div style={{marginRight: '50px', width: '100px'}}>
 				<Form.Group>
 					<label htmlFor={pickerId} id={labelId}>
 						Year
 					</label>
 					<Picker
 						aria-labelledby={labelId}
+						defaultActive
 						id={pickerId}
 						placeholder="Year"
 						width={85}
@@ -303,6 +309,28 @@ export const Width = () => {
 					</Picker>
 				</Form.Group>
 			</div>
-		</>
+
+			<div style={{marginRight: '50px', width: '100px'}}>
+				<Form.Group>
+					<label htmlFor={pickerId} id={labelId}>
+						Long Option Year
+					</label>
+					<Picker
+						aria-labelledby={labelId}
+						defaultActive
+						id={pickerId}
+						placeholder="Year"
+					>
+						<Option key="2020">
+							2020 was really a looooooooong year
+						</Option>
+						<Option key="2021">2021</Option>
+						<Option key="2022">2022</Option>
+						<Option key="2023">2023</Option>
+						<Option key="2024">2024</Option>
+					</Picker>
+				</Form.Group>
+			</div>
+		</div>
 	);
 };