Skip to content

Commit 2b2bc35

Browse files
fix(Select/Dropdown): updated autofocus to false by default in v6 (#11115)
* fix(Select/Dropdown): updated autofocus to false by default in v6 * Updated expectation in cypress test
1 parent 09a8f38 commit 2b2bc35

File tree

4 files changed

+9
-9
lines changed

4 files changed

+9
-9
lines changed

packages/react-core/src/components/Dropdown/Dropdown.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const DropdownBase: React.FunctionComponent<DropdownProps> = ({
9191
onOpenChangeKeys = ['Escape', 'Tab'],
9292
menuHeight,
9393
maxMenuHeight,
94-
shouldFocusFirstItemOnOpen = true,
94+
shouldFocusFirstItemOnOpen = false,
9595
...props
9696
}: DropdownProps) => {
9797
const localMenuRef = React.useRef<HTMLDivElement>();

packages/react-core/src/components/Select/Select.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,7 @@ const SelectBase: React.FunctionComponent<SelectProps & OUIAProps> = ({
8888
selected,
8989
toggle,
9090
shouldFocusToggleOnSelect = false,
91-
shouldFocusFirstItemOnOpen = true,
91+
shouldFocusFirstItemOnOpen = false,
9292
onOpenChange,
9393
onOpenChangeKeys = ['Escape', 'Tab'],
9494
isPlain,

packages/react-integration/cypress/integration/dropdown.spec.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -43,14 +43,14 @@ describe('Dropdown demo test', () => {
4343
so testing for a button click should be sufficient
4444
*/
4545

46-
it('Autofocuses first item on click by default', () => {
46+
it('Does not autofocus first item on click by default', () => {
4747
cy.get('[data-cy="toggle"]').click();
48-
cy.get('#first-item').should('be.focused');
48+
cy.get('#first-item').should('not.be.focused');
4949
cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
5050
});
51-
it('Does not autofocus first item on click when shouldFocusFirstItemOnOpen is false', () => {
52-
cy.get('[data-cy="no-autofocus-toggle"]').click();
53-
cy.get('#first-item').should('not.be.focused');
51+
it('Autofocuses first item on click when shouldFocusFirstItemOnOpen is true', () => {
52+
cy.get('[data-cy="autofocus-toggle"]').click();
53+
cy.get('#first-item').should('be.focused');
5454
cy.get('[data-cy="toggle"]').trigger('keydown', { key: 'Escape' });
5555
});
5656
});

packages/react-integration/demo-app-ts/src/components/demos/DropdownDemo/DropdownDemo.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -68,12 +68,12 @@ export const DropdownDemo: React.FunctionComponent = () => {
6868
</Dropdown>
6969
<Dropdown
7070
isOpen={isNoAutofocusOpen}
71-
shouldFocusFirstItemOnOpen={false}
71+
shouldFocusFirstItemOnOpen={true}
7272
onOpenChange={(isOpen) => setIsNoAutofocusOpen(isOpen)}
7373
onSelect={onNoAutofocusSelect}
7474
toggle={(toggleRef) => (
7575
<MenuToggle
76-
data-cy="no-autofocus-toggle"
76+
data-cy="autofocus-toggle"
7777
onClick={onNoAutofocusToggleClick}
7878
isExpanded={isNoAutofocusOpen}
7979
ref={toggleRef}

0 commit comments

Comments
 (0)