Autocomplete: Only open menu on click #4771

TylerJDev · 2024-07-24T12:52:25Z

Closes https://github.com/github/primer/issues/3387

Sets openOnFocus to false by default.

On focus or click, we no longer show the menu by default. You may still activate the menu by entering Autocomplete.Input and pressing the up/down arrow keys. Showing the menu instantly upon focus means that a screen reader user is notified of the menu instantly with no indication given that the user is on the input itself.

Changelog

Changed

Sets openOnFocus to false

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

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

changeset-bot · 2024-07-24T12:52:29Z

🦋 Changeset detected

Latest commit: 36b8074

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

This PR includes changesets to release 1 package

Name	Type
@primer/react	Minor

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 · 2024-07-24T17:44:55Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	95.58 KB (-0.01% 🔽)
packages/react/dist/browser.umd.js	95.88 KB (-0.09% 🔽)

primer-integration · 2024-07-24T19:45:43Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/334338

joshblack

Would it be possible to use openOnFocus for this migration? This might be able to smooth things out and eventually remove this in v38 (let me know if you want me to add it to that list btw!) One approach could be to change the default to false and see how things go and eventually remove the prop altogether.

Curious what you think 👀

joshblack · 2024-07-25T15:09:09Z

packages/react/src/Autocomplete/AutocompleteInput.tsx

@@ -52,14 +52,14 @@ const AutocompleteInput = React.forwardRef(
    const [highlightRemainingText, setHighlightRemainingText] = useState<boolean>(true)
    const {safeSetTimeout} = useSafeTimeout()

-    const handleInputFocus: FocusEventHandler<HTMLInputElement> = useCallback(
+    const handleInputClick: MouseEventHandler<HTMLInputElement> = useCallback(


Feel free to ignore this since it's not really related to the changes proposed 👀

I wanted to ask if this useCallback is doing much for us or if it would be something we could refactor to a default event handler / function.

Yeah we definitely can adjust this!

Edit: Would we want to do this for all the event handlers using useCallback?

TylerJDev · 2024-07-25T18:45:38Z

Would it be possible to use openOnFocus for this migration?

So turning the prop to false by default so that both click and focus don't show the menu? We definitely could! I wasn't sure if there were instances where it was ideal for AutocompleteMenu to be visible upon click, but honestly I don't think it's the biggest risk.

TylerJDev · 2024-07-29T18:48:46Z

@joshblack, I adjusted it so that we instead change openOnFocus to false by default! This means neither click/focus will trigger the menu. The user will have to manually go into the input and trigger it themselves. Let me know if any adjustments are needed!

joshblack

LGTM! 🤞 it passed downstream 👀

Would it be helpful to add a @deprecated tag with this to the props and docs.json file, too?

TylerJDev · 2024-07-29T19:10:47Z

Would it be helpful to add a @deprecated tag with this to the props and docs.json file, too?

Definitely! I added it to the prop & docs. I'll add it to the v38 release issue too!

* Only open menu on click instead of just focus * Update tests * Add changeset * Fix typo * Set `openOnFocus` to `true` * Add test, move `onFocus` function * Update docs * Adjust changeset * Remove `useCallback` * Add deprecated notice

This reverts commit 92e05f7.

* Focus close button on second step * Remove `autofocus` prop * Add dependencies to focus trap * Add changeset * lint fix * Remove `body` from dependency * add state to Dialog example * chore(changeset): enter prerelease mode for v37 (#4789) * chore(changeset): enter pre-release mode for v37 * ci: remove snapshots when in pre mode * chore: add version info to all packages * Revert "chore: add version info to all packages" This reverts commit 4665bb3. * chore: update canary to remove pre.json when running --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Autocomplete: Only open menu on click (#4771) * Only open menu on click instead of just focus * Update tests * Add changeset * Fix typo * Set `openOnFocus` to `true` * Add test, move `onFocus` function * Update docs * Adjust changeset * Remove `useCallback` * Add deprecated notice * Prep for high contrast theme border-color changes (#4774) * borders * fallback * test(vrt): update snapshots * test color changes * alright * bump * test(vrt): update snapshots * more fixes * test(vrt): update snapshots * copy from main * test(vrt): update snapshots * Create fluffy-ravens-thank.md * snippy snaps * update seg control border * test(vrt): update snapshots * remove fallbacks * copy from main * test(vrt): update snapshots --------- Co-authored-by: langermank <langermank@users.noreply.github.com> * chore: add package version numbers (#4796) Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * feat: add postcss-preset-primer (#4751) * feat: add postcss-preset-primer * docs: update usage snippet * chore: fix eslint rules and remove postcss-mixins --------- Co-authored-by: Josh Black <joshblack@users.noreply.github.com> * Utilize `aria-describedby` on all `ActionList` descriptions (#4666) * Add `aria-describedby` to inline description; add `aria-labelledby` to `TrailingVisual` * Update snapshots * Add changeset * Update snapshot * Update packages/react/src/ActionList/Item.tsx Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * changes from PR feedback * Update .changeset/lovely-days-march.md * Update snapshots * Update lovely-days-march.md --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> * Wrap `header` and `footer` with `<Box>` * Move `<Box>` * Add back focus to story * Update behaviors package * Move back `useFocusTrap` --------- Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com> Co-authored-by: Josh Black <joshblack@github.com> Co-authored-by: Josh Black <joshblack@users.noreply.github.com> Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com> Co-authored-by: langermank <langermank@users.noreply.github.com>

Only open menu on click instead of just focus

64cce80

TylerJDev temporarily deployed to github-pages July 24, 2024 12:56 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 24, 2024 12:57 Inactive

Update tests

a909a64

TylerJDev temporarily deployed to github-pages July 24, 2024 17:44 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 24, 2024 17:45 Inactive

Add changeset

08fddb9

TylerJDev temporarily deployed to github-pages July 24, 2024 17:55 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 24, 2024 17:55 Inactive

Fix typo

3a01d11

TylerJDev temporarily deployed to github-pages July 24, 2024 19:39 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 24, 2024 19:39 Inactive

TylerJDev marked this pull request as ready for review July 24, 2024 20:25

TylerJDev requested a review from a team as a code owner July 24, 2024 20:25

TylerJDev requested a review from langermank July 24, 2024 20:25

joshblack reviewed Jul 25, 2024

View reviewed changes

TylerJDev added 3 commits July 26, 2024 08:43

Set openOnFocus to true

07f13d5

Add test, move onFocus function

a177078

Update docs

7e2fdf6

TylerJDev temporarily deployed to github-pages July 29, 2024 18:40 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 29, 2024 18:41 Inactive

Adjust changeset

08e6647

TylerJDev temporarily deployed to github-pages July 29, 2024 18:46 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 29, 2024 18:47 Inactive

Remove useCallback

3544fe5

joshblack approved these changes Jul 29, 2024

View reviewed changes

TylerJDev temporarily deployed to github-pages July 29, 2024 18:52 — with GitHub Actions Inactive

github-actions bot temporarily deployed to storybook-preview-4771 July 29, 2024 18:52 Inactive

Add deprecated notice

36b8074

TylerJDev deployed to github-pages July 29, 2024 19:13 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-4771 July 29, 2024 19:13 View deployment

TylerJDev added this pull request to the merge queue Jul 29, 2024

Merged via the queue into main with commit 92e05f7 Jul 29, 2024
30 checks passed

TylerJDev deleted the tylerjdev/autocomplete-on-click branch July 29, 2024 20:17

primer bot mentioned this pull request Jul 30, 2024

Release tracking (37.0.0-rc.0) #4797

Merged

jonrohan added a commit that referenced this pull request Aug 8, 2024

Revert "Autocomplete: Only open menu on click (#4771)"

3473c11

This reverts commit 92e05f7.

jonrohan mentioned this pull request Aug 8, 2024

Revert "Autocomplete: Only open menu on click" #4830

Closed

primer bot mentioned this pull request Oct 18, 2024

Release tracking (37.0.0) #5143

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Autocomplete: Only open menu on click #4771

Autocomplete: Only open menu on click #4771

TylerJDev commented Jul 24, 2024 •

edited

Loading

changeset-bot bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

primer-integration bot commented Jul 24, 2024

joshblack left a comment

joshblack Jul 25, 2024

TylerJDev Jul 25, 2024 •

edited

Loading

TylerJDev commented Jul 25, 2024

TylerJDev commented Jul 29, 2024

joshblack left a comment

TylerJDev commented Jul 29, 2024 •

edited

Loading

Autocomplete: Only open menu on click #4771

Autocomplete: Only open menu on click #4771

Conversation

TylerJDev commented Jul 24, 2024 • edited Loading

Changelog

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

changeset-bot bot commented Jul 24, 2024 • edited Loading

🦋 Changeset detected

github-actions bot commented Jul 24, 2024 • edited Loading

size-limit report 📦

primer-integration bot commented Jul 24, 2024

joshblack left a comment

Choose a reason for hiding this comment

joshblack Jul 25, 2024

Choose a reason for hiding this comment

TylerJDev Jul 25, 2024 • edited Loading

Choose a reason for hiding this comment

TylerJDev commented Jul 25, 2024

TylerJDev commented Jul 29, 2024

joshblack left a comment

Choose a reason for hiding this comment

TylerJDev commented Jul 29, 2024 • edited Loading

TylerJDev commented Jul 24, 2024 •

edited

Loading

changeset-bot bot commented Jul 24, 2024 •

edited

Loading

github-actions bot commented Jul 24, 2024 •

edited

Loading

TylerJDev Jul 25, 2024 •

edited

Loading

TylerJDev commented Jul 29, 2024 •

edited

Loading