fix(dropdown): Delay setting focus on first item to prevent inadvertent scroll (#11018)

jeff-phillips-18 · web-flow · commit eb245e8801d2 · 2024-09-18T14:02:17.000-04:00
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -127,7 +127,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
             'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'
           );
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu
diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -132,7 +132,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
         setTimeout(() => {
           const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');
           firstElement && (firstElement as HTMLElement).focus();
-        }, 0);
+        }, 10);
       }
 
       // If the event is not on the toggle and onOpenChange callback is provided, close the menu

Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({`
`127`	`127`	`'li button:not(:disabled),li input:not(:disabled),li a:not([aria-disabled="true"])'`
`128`	`128`	`);`
`129`	`129`	`firstElement && (firstElement as HTMLElement).focus();`
`130`		`- }, 0);`
	`130`	`+ }, 10);`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`// If the event is not on the toggle and onOpenChange callback is provided, close the menu`
Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({`
`132`	`132`	`setTimeout(() => {`
`133`	`133`	`const firstElement = menuRef?.current?.querySelector('li button:not(:disabled),li input:not(:disabled)');`
`134`	`134`	`firstElement && (firstElement as HTMLElement).focus();`
`135`		`- }, 0);`
	`135`	`+ }, 10);`
`136`	`136`	`}`
`137`	`137`
`138`	`138`	`// If the event is not on the toggle and onOpenChange callback is provided, close the menu`