SelectPanel's "Clear selection" tooltip pops automatically

[robaish]

Description

The new SelectPanel's (imported from experimental) "clear selection" tooltip pops open when opening the panel. I haven't found a way to prevent it.

Steps to reproduce

1. Use SelectPanel
2. Open it

The same behavior is visible in the storybook example.

Version

v36.4.0

Browser

Chrome

[github-actions]

Uh oh! @robaish, the image you shared is missing helpful alt text. Check your issue body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[lesliecdubs]

Thanks for the report! @siddharthkp could you take a look at this as part of your active work on the new SelectPanel?

[siddharthkp]

Yep, I'm tracking it here: (github staff only) https://github.com/github/primer/issues/2926

Here's the gist for @robaish:

When an icon button gets focus, we show a tooltip.

When the select panel dialog opens, an icon button like close button or clear selection button might be auto-focused. Because the icon button gets focus, we show a tooltip.

This looks perfect when the user interacts with the page with a keyboard, you see focus ring around the button and a tooltip. However, when using a mouse pointer, the icon button still gets focus (and hence, a tooltip), but has no focus ring on it, which makes it feel like the tooltip randomly opened

The proposal is to show tooltip only on focus-visible, not focus (mouse pointer interactions).

[robaish]

Makes sense to me, thanks @siddharthkp !

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[github-actions]

Hi! This issue has been marked as stale because it has been open with no activity for 180 days. You can comment on the issue or remove the stale label to keep it open. If you do nothing, this issue will be closed in 7 days.

[siddharthkp]

• Update: This was fixed in IconButton: introduce tooltips on icon buttons behind the unsafeDisableTooltip prop for an incremental rollout #4224, released in primer/react@36.14.0