From e861f7fa71840a1f5fe6005bb6ca96bcb7f185fb Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 16 Oct 2024 15:13:37 -0400 Subject: [PATCH 1/2] fix(Select/Dropdown): updated autofocus to false by default in v6 --- packages/react-core/src/components/Dropdown/Dropdown.tsx | 2 +- packages/react-core/src/components/Select/Select.tsx | 2 +- .../cypress/integration/dropdown.spec.ts | 8 ++++---- .../src/components/demos/DropdownDemo/DropdownDemo.tsx | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/react-core/src/components/Dropdown/Dropdown.tsx b/packages/react-core/src/components/Dropdown/Dropdown.tsx index 84835a0f0ea..0fd713e66cc 100644 --- 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 = ({ onOpenChangeKeys = ['Escape', 'Tab'], menuHeight, maxMenuHeight, - shouldFocusFirstItemOnOpen = true, + shouldFocusFirstItemOnOpen = false, ...props }: DropdownProps) => { const localMenuRef = React.useRef(); diff --git a/packages/react-core/src/components/Select/Select.tsx b/packages/react-core/src/components/Select/Select.tsx index 50e022cd858..2edf7638af7 100644 --- 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 = ({ 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 index 63cc940b955..0cc138eb7c1 100644 --- a/packages/react-integration/cypress/integration/dropdown.spec.ts +++ b/packages/react-integration/cypress/integration/dropdown.spec.ts @@ -43,13 +43,13 @@ 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(); + it('Autofocuses first item on click when shouldFocusFirstItemOnOpen is true', () => { + cy.get('[data-cy="autofocus-toggle"]').click(); cy.get('#first-item').should('not.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 index a9f701b108d..9d3fb458b62 100644 --- 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 = () => { setIsNoAutofocusOpen(isOpen)} onSelect={onNoAutofocusSelect} toggle={(toggleRef) => ( Date: Thu, 17 Oct 2024 12:59:09 -0400 Subject: [PATCH 2/2] Updated expectation in cypress test --- packages/react-integration/cypress/integration/dropdown.spec.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-integration/cypress/integration/dropdown.spec.ts b/packages/react-integration/cypress/integration/dropdown.spec.ts index 0cc138eb7c1..b445d253269 100644 --- a/packages/react-integration/cypress/integration/dropdown.spec.ts +++ b/packages/react-integration/cypress/integration/dropdown.spec.ts @@ -50,7 +50,7 @@ describe('Dropdown demo test', () => { }); it('Autofocuses first item on click when shouldFocusFirstItemOnOpen is true', () => { cy.get('[data-cy="autofocus-toggle"]').click(); - cy.get('#first-item').should('not.be.focused'); + cy.get('#first-item').should('be.focused'); cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' }); }); });