-
Notifications
You must be signed in to change notification settings - Fork 215
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
fix(picker): move tooltip outside of action menu's button #5077
base: main
Are you sure you want to change the base?
Conversation
|
Branch previewReview the following VRT differencesWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
If the changes are expected, update the |
Tachometer resultsCurrently, no packages are changed by this PR... |
Lighthouse scores
What is this?Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on Transfer Size
Request Count
|
Pull Request Test Coverage Report for Build 13901636140Details
💛 - Coveralls |
Can we add a storybook and a test to validate this case? |
There isn’t a “new test case" per se. The tooltip’s behavior and look and feel are unchanged - except that it no longer affects the button trigger. The existing tooltip stories already cover this: 1 - Visit the “before” (current behavior): 2 - Visit the “after” (fixed behavior): Hover over the tooltip in both the versions. Let me know if you have something else in mind! |
Description
When a self-managed tooltip is added to an sp-picker (or sp-action-menu), clicking on the tooltip triggers the menu/dropdown to open but then immediately close. This happens because the tooltip was placed inside the button content, causing event propagation issues and CSS hover/active states on the button when interacting with the tooltip itself.
I moved the tooltip slot outside of the trigger button content which prevents event propagation issues and fixes CSS hover state problems by properly separating the tooltip from the button's content (it no longer is a direct child in the DOM).
Because of this change, I needed to override the
selfManaged
functionality by reassigning the triggerElement to be the button. This was necessary because theselfManaged
logic traverses the DOM tree upward, meaning it would not find the correct focusable element to attach the trigger to with the new structure.Related issue(s)
Motivation and context
Even though the reported bug aligns with our documentation, it is confirmed to create a poor user experience and unexpected results. Users don’t expect interacting with the tooltip to have the same effect as interacting with the button.
Additionally, if customers used the
overlay-trigger
alternative (without using the slot), the behavior would be different (but correct). With these changes, both approaches will now produce the same expected results.How has this been tested?
1 - Visit the “before” (current behavior):
Before - Picker
Before - Action menu
2 - Visit the “after” (fixed behavior):
After - Picker
After - Action menu
Hover over the tooltip in both the versions.
In the fixed version, hovering over the tooltip should not trigger the button’s hover or active state.
Click on the tooltip in both versions:
Clicking the tooltip should not open the dropdown or trigger the button’s click behavior.
Sanity check:
Clicking directly on the action button (outside the tooltip area) still opens the dropdown as expected.
Did it pass in Desktop?
Did it pass in Mobile?
Did it pass in iPad?
Screenshot test regression seems expected to me - the tooltip content is no longer centered-aligned (before on the left, after on the right):
Types of changes
Checklist
Best practices
This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against
main
.