Hide tooltips on `touchend` event by iansan5653 · Pull Request #5830 · primer/react

iansan5653 · 2025-03-27T14:34:52Z

Closes https://github.com/github/primer/issues/4431 (see issue for context)

Adds an event handler to TooltipV2 to hide the tooltip on touch end, so that tooltips automatically hide when the target element is tapped. This prevents tooltips from remaining visible after a button is interacted with, while still allowing touch device users to see tooltips via tapping and holding.

This required converting the onMouseEnter handler to an onMouseOverCapture handler so that it would run first so that the onTouchEnd handler could cancel the pending 50ms timeout. Alternatively I could have wrapped the onTouchEnd handler in its own timeout, but that felt hacky and like a race condition waiting to happen.

I confirmed that this fixes the problem on mobile devices (note I also confirmed that you can view the tooltips with an intentional long tap, but that was hard to capture on video):

screen-20250328-124320.mp4

And does not regress showing the tooltip on hover/focus:

Screen.Recording.2025-03-28.at.1.12.34.PM.mov

Changelog

New

Changed

Hide TooltipV2 tooltips on touch-end

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

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 · 2025-03-27T14:34:56Z

🦋 Changeset detected

Latest commit: 5d4987d

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 · 2025-03-27T14:36:07Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-03-27T14:38:25Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	104.93 KB (-0.05% 🔽)
packages/react/dist/browser.umd.js	105.37 KB (+0.03% 🔺)

…into hide-tooltips-on-tap

iansan5653 · 2025-03-31T16:55:37Z

I really tried hard to write tests for this, but I can't find a way to assert that the tooltip is open/closed in Jest in CI. I tried testing for toBeVisible, matches(":popover-open"), and toHaveClass(":popover-open") but none of them worked (the last did work locally but not in CI). I guess this is why there are no existing tests for popover visibility.

primer-integration · 2025-03-31T18:03:21Z

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

primer-integration · 2025-03-31T18:18:23Z

🟢 golden-jobs completed with status success.

jonrohan · 2025-04-01T23:33:45Z

      onBlur={[Function]}
      onClick={[MockFunction]}
      onFocus={[Function]}
-      onMouseEnter={[Function]}


Not sure if this will be problematic in integrations in dotcom?

francinelucca

LGTM!

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

github-actions · 2025-04-03T18:49:38Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

Hide tooltips on touchend event

2ba474a

iansan5653 requested a review from a team as a code owner March 27, 2025 14:34

iansan5653 requested a review from siddharthkp March 27, 2025 14:34

iansan5653 marked this pull request as draft March 27, 2025 14:34

Create chilly-jars-jog.md

6cfcb9a

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Mar 27, 2025

github-actions Bot requested a deployment to storybook-preview-5830 March 27, 2025 14:39 Abandoned

iansan5653 added 2 commits March 27, 2025 14:40

Update snapshots

2df9231

Merge branch 'hide-tooltips-on-tap' of https://github.com/primer/react …

f2d809e

…into hide-tooltips-on-tap

github-actions Bot requested a deployment to storybook-preview-5830 March 27, 2025 14:44 Abandoned

iansan5653 deployed to github-pages March 27, 2025 14:58 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 March 27, 2025 14:59 Inactive

Use a timeout so we don't conflict with the focus event

072db09

iansan5653 force-pushed the hide-tooltips-on-tap branch from 4b9f5a3 to 072db09 Compare March 27, 2025 15:16

github-actions Bot requested a deployment to storybook-preview-5830 March 27, 2025 15:20 Abandoned

iansan5653 deployed to github-pages March 27, 2025 15:33 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 March 27, 2025 15:34 Inactive

Add tests

8ee6f3e

iansan5653 deployed to github-pages March 28, 2025 17:21 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 March 28, 2025 17:21 Inactive

Let's try one more thing before I give up on the test

57b5e8e

iansan5653 deployed to github-pages March 31, 2025 14:36 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 March 31, 2025 14:37 Inactive

Remove test :(

71dcc3b

Update snapshots

707c8b2

github-actions Bot requested a deployment to storybook-preview-5830 March 31, 2025 17:15 Abandoned

Remove useFakeTimers call

7f7064d

github-actions Bot requested a deployment to storybook-preview-5830 March 31, 2025 17:20 Abandoned

iansan5653 deployed to github-pages March 31, 2025 17:36 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 March 31, 2025 17:36 Inactive

iansan5653 marked this pull request as ready for review March 31, 2025 17:53

github-actions Bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Mar 31, 2025

jonrohan approved these changes Apr 1, 2025

View reviewed changes

francinelucca approved these changes Apr 1, 2025

View reviewed changes

Update .changeset/chilly-jars-jog.md

5d4987d

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

iansan5653 enabled auto-merge April 3, 2025 18:48

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Apr 3, 2025

iansan5653 added this pull request to the merge queue Apr 3, 2025

iansan5653 deployed to github-pages April 3, 2025 19:02 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-5830 April 3, 2025 19:02 Inactive

Merged via the queue into main with commit f8760fe Apr 3, 2025

iansan5653 deleted the hide-tooltips-on-tap branch April 3, 2025 19:12

primer Bot mentioned this pull request Apr 3, 2025

Release tracking (37.19.0) #5863

Merged

jonrohan added a commit that referenced this pull request Apr 10, 2025

Hide tooltips on touchend event (#5830)

88536a3

Co-authored-by: Jon Rohan <yes@jonrohan.codes>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Hide tooltips on `touchend` event#5830

Hide tooltips on `touchend` event#5830
iansan5653 merged 11 commits into
mainfrom
hide-tooltips-on-tap

iansan5653 commented Mar 27, 2025 •

edited by francinelucca

Loading

Uh oh!

changeset-bot Bot commented Mar 27, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Mar 27, 2025

Uh oh!

github-actions Bot commented Mar 27, 2025 •

edited

Loading

Uh oh!

iansan5653 commented Mar 31, 2025

Uh oh!

primer-integration Bot commented Mar 31, 2025

Uh oh!

primer-integration Bot commented Mar 31, 2025

Uh oh!

Uh oh!

jonrohan Apr 1, 2025

Uh oh!

francinelucca left a comment

Uh oh!

github-actions Bot commented Apr 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

iansan5653 commented Mar 27, 2025 • edited by francinelucca Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Mar 27, 2025

Uh oh!

github-actions Bot commented Mar 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

iansan5653 commented Mar 31, 2025

Uh oh!

primer-integration Bot commented Mar 31, 2025

Uh oh!

primer-integration Bot commented Mar 31, 2025

Uh oh!

Uh oh!

jonrohan Apr 1, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Apr 3, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

iansan5653 commented Mar 27, 2025 •

edited by francinelucca

Loading

changeset-bot Bot commented Mar 27, 2025 •

edited

Loading

github-actions Bot commented Mar 27, 2025 •

edited

Loading