Skip to content

Add openOnFocus prop to AutocompleteInput - #4555

Merged
JoyceZhu merged 11 commits into
mainfrom
joycezhu/autocomplete_input_open_on_focus
May 21, 2024
Merged

Add openOnFocus prop to AutocompleteInput#4555
JoyceZhu merged 11 commits into
mainfrom
joycezhu/autocomplete_input_open_on_focus

Conversation

@JoyceZhu

@JoyceZhuJoyceZhu commented May 2, 2024

Copy link
Copy Markdown
Contributor

Unblocks github/accessibility-audits#7437

The audit issue notes that when an AutocompleteInput is the first field in a form with errors (and thus when it needs to be auto-focused after submission to help the user discover and address errors), the autocomplete menu popping up automatically on focus 1) causes NVDA+Firefox to miss reading out an associated error message/FormControl.Validation even when linked via aria-describedby and 2) visually obscures the error message, which makes discovering what went wrong harder.

Offering a prop to optionally disable the menu appearing on focus improves these two users experiences; the menu will still render when the user types in the autocomplete's input field.

Changelog

New

  • Adds an openOnFocus prop which defaults to true (current behavior) to AutocompleteInput

Changed

Removed

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

@JoyceZhu
JoyceZhu requested a review from TylerJDevMay 2, 2024 23:53
@JoyceZhu
JoyceZhu requested a review from a team as a code ownerMay 2, 2024 23:53
@changeset-bot

changeset-botBot commented May 2, 2024•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 0c1557c

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
NameType
@primer/reactPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 3, 2024 00:01 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 9, 2024 12:49 Inactive
@TylerJDev

TylerJDev commented May 9, 2024

Copy link
Copy Markdown
Member

I wonder if we'd want up/down arrow keys to open the menu if this prop is used. For example, if you set openOnFocus to false and clear the input field, pressing up/down arrow keys will select items from the menu but doesn't show the menu itself. I'm wondering if we'd want it to show the menu by default depending on when either up/down key is used?

@github-actions

github-actionsBot commented May 10, 2024•
edited
Loading

Copy link
Copy Markdown
Contributor

size-limit report 📦

PathSize
packages/react/dist/browser.esm.js88.59 KB (+0.08% 🔺)
packages/react/dist/browser.umd.js88.96 KB (+0.15% 🔺)

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 10, 2024 03:31 Inactive
@JoyceZhu

JoyceZhu commented May 10, 2024

Copy link
Copy Markdown
ContributorAuthor

I wonder if we'd want up/down arrow keys to open the menu if this prop is used

I think this makes sense as behavior! Let me implement that tomorrow!

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 10, 2024 03:47 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 11, 2024 06:39 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 11, 2024 06:53 Inactive
kendallgassner
kendallgassner reviewed May 13, 2024
View reviewed changes
Comment threadpackages/react/src/Autocomplete/AutocompleteInput.tsx Outdated
@JoyceZhu@kendallgassner
Update packages/react/src/Autocomplete/AutocompleteInput.tsx
dd7cf29
Co-authored-by: Kendall Gassner <kendallgassner@github.com>
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 13, 2024 18:01 Inactive
@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 13, 2024 18:06 Inactive
@JoyceZhu
JoyceZhu requested review from TylerJDev and kendallgassner and removed request for TylerJDevMay 13, 2024 20:05
TylerJDev
TylerJDev approved these changes May 13, 2024
View reviewed changes

@TylerJDevTylerJDev left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@github-actions
github-actionsBottemporarily deployed to storybook-preview-4555 May 20, 2024 21:55 Inactive
@JoyceZhu
JoyceZhu added this pull request to the merge queueMay 21, 2024
Merged via the queue into main with commit 9b63299May 21, 2024
@JoyceZhu
JoyceZhu deleted the joycezhu/autocomplete_input_open_on_focus branch May 21, 2024 20:28
@primerprimerBot mentioned this pull request May 21, 2024
Merged
khiga8 pushed a commit that referenced this pull request May 31, 2024
@JoyceZhu@kendallgassner@khiga8
AddopenOnFocusprop toAutocompleteInput(#4555)
c02184c
* Add `openOnFocus` prop to `AutocompleteInput`
Towards github/accessibility-audits#7437
* Add changeset
* Fix JSON formatting
* Allow up and down to open menu if not already open
* update hook
* Update packages/react/src/Autocomplete/AutocompleteInput.tsx
Co-authored-by: Kendall Gassner <kendallgassner@github.com>
---------
Co-authored-by: Kendall Gassner <kendallgassner@github.com>
@JonathanXDRJonathanXDR mentioned this pull request Jun 18, 2024
Closed
@OATEF4313OATEF4313 mentioned this pull request Jun 20, 2024
Open
This was referenced Jun 20, 2024
Closed
Closed
@StemmlerSistersStemmlerSisters mentioned this pull request Jul 16, 2024
Open
@snyk-iosnyk-ioBot mentioned this pull request Jul 17, 2024
Open
@julitabarelkowskajulitabarelkowska mentioned this pull request Jul 17, 2024
Open
@CanadatechmanufacturingCanadatechmanufacturing mentioned this pull request Jul 17, 2024
Open
@snyk-iosnyk-ioBot mentioned this pull request Aug 13, 2024
Open
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@kendallgassnerkendallgassnerkendallgassner approved these changes
@TylerJDevTylerJDevTylerJDev approved these changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@JoyceZhu@TylerJDev@kendallgassner