fix(Select/Dropdown): updated autofocus to false by default in v6 (#1…

…1115) * fix(Select/Dropdown): updated autofocus to false by default in v6 * Updated expectation in cypress test
patternfly · Oct 23, 2024 · 2b2bc35 · 2b2bc35
1 parent 09a8f38
commit 2b2bc35
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 9 deletions.
diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx
@@ -91,7 +91,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
   onOpenChangeKeys = ['Escape', 'Tab'],
   menuHeight,
   maxMenuHeight,
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
   ...props
 }: DropdownProps) => {
   const localMenuRef = React.useRef<HTMLDivElement>();

diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx
@@ -88,7 +88,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
   selected,
   toggle,
   shouldFocusToggleOnSelect = false,
-  shouldFocusFirstItemOnOpen = true,
+  shouldFocusFirstItemOnOpen = false,
   onOpenChange,
   onOpenChangeKeys = ['Escape', 'Tab'],
   isPlain,

diff --git a/packages/react-integration/cypress/integration/dropdown.spec.ts b/packages/react-integration/cypress/integration/dropdown.spec.ts
@@ -43,14 +43,14 @@ describe('Dropdown demo test', () => {
     so testing for a button click should be sufficient
   */
 
-  it('Autofocuses first item on click by default', () => {
+  it('Does not autofocus first item on click by default', () => {
     cy.get('[data-cy="toggle"]').click();
-    cy.get('#first-item').should('be.focused');
+    cy.get('#first-item').should('not.be.focused');
     cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
   });
-  it('Does not autofocus first item on click when shouldFocusFirstItemOnOpen is false', () => {
-    cy.get('[data-cy="no-autofocus-toggle"]').click();
-    cy.get('#first-item').should('not.be.focused');
+  it('Autofocuses first item on click when shouldFocusFirstItemOnOpen is true', () => {
+    cy.get('[data-cy="autofocus-toggle"]').click();
+    cy.get('#first-item').should('be.focused');
     cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
   });
 });
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx
@@ -68,12 +68,12 @@ export const DropdownDemo: React.FunctionComponent = () => {
       </Dropdown>
       <Dropdown
         isOpen={isNoAutofocusOpen}
-        shouldFocusFirstItemOnOpen={false}
+        shouldFocusFirstItemOnOpen={true}
         onOpenChange={(isOpen) => setIsNoAutofocusOpen(isOpen)}
         onSelect={onNoAutofocusSelect}
         toggle={(toggleRef) => (
           <MenuToggle
-            data-cy="no-autofocus-toggle"
+            data-cy="autofocus-toggle"
             onClick={onNoAutofocusToggleClick}
             isExpanded={isNoAutofocusOpen}
             ref={toggleRef}