Skip to content
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.

Sign up for GitHub

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

Jump to bottom

When multiple tooltips are open controlled, the first tooltip would not close after the cursor hovers on the second tooltip. #6233

Closed
GuoXiaoyang opened this issue Apr 19, 2024 · 3 comments · Fixed by #6418
Closed

When multiple tooltips are open controlled, the first tooltip would not close after the cursor hovers on the second tooltip. #6233

GuoXiaoyang opened this issue Apr 19, 2024 · 3 comments · Fixed by #6418
Labels
bug Something isn't working strict mode

Comments

@GuoXiaoyang
Copy link

GuoXiaoyang commented Apr 19, 2024 •
edited

Provide a general summary of the issue here

When multiple tooltips are open controlled, the first tooltip would not close after the cursor hovers on the second tooltip.

🤔 Expected Behavior?

The first tooltip would close after the cursor hovers on the second tooltip.

😯 Current Behavior

http://localhost:9003/?path=/story/tooltiptrigger--controlled-multiple-tooltips&providerSwitcher-express=false&strict=true

Screen.Recording.2024-04-19.at.11.00.10.AM.mov

💁 Possible Solution

  1. It seems the closeOpenTooltips function in packages/@react-stately/tooltip/src/useTooltipTriggerState.ts is not working properly when the isOpen prop is controlled, when the close handler is called, the currentValue(open) in useControlledState is still false thus not trigger the onOpenChange handler in the Tooltip.
  let closeOpenTooltips = () => {
    for (let hideTooltipId in tooltips) {
      if (hideTooltipId !== id) {
        tooltips[hideTooltipId](true);
        delete tooltips[hideTooltipId];
      }
    }
  };

🔦 Context

No response

🖥️ Steps to Reproduce

  1. The story in the react-spectrum repo can reproduce this issue: http://localhost:9003/?path=/story/tooltiptrigger--controlled-multiple-tooltips&providerSwitcher-express=false&strict=true

Version

3.32.1

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response
@snowystinger
Copy link
Member

Thanks for the issue, looks like a regression was introduced at some point. This story used to work.

Found the PR where it broke #4564

@snowystinger snowystinger added bug Something isn't working strict mode labels Apr 19, 2024
@igorman007
Copy link
Contributor

igorman007 commented May 17, 2024 •
edited

We also found this bug.

Seems, that the problem takes place in this line of code
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/tooltip/src/useTooltipTriggerState.ts#L84

When the function closeOpenTooltips is called, it calls the open variable (function) I linked to. But the function instance inside open variable is the wrong instance, because it has been created when props.isOpened was false (the function memoize false value in it's closure).

So this line of check
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/utils/src/useControlledState.ts#L34
returns false.

currenValue (props.isOpened inside closure) is false (while the actual value inside props.isOpened is true)
value is false
That's why we missing the call of onChange and the actual value inside props.isOpened remains true.

Fastfix: set the closeDelay prop to 0

Simple fix:
I think we can use the same idea, that is used in this line of code
https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/tooltip/src/useTooltipTriggerState.ts#L48

We can make one more useRef and saves the correct instance of close function inside it. And call it instead of calling the wrong close function on line 84

@snowystinger
Copy link
Member

Thanks for the analysis, would you like to open a PR for it?

@igorman007 igorman007 mentioned this issue May 20, 2024
Merged
5 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Something isn't working strict mode
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix: controlled tooltips are not close properly igorman007/react-spectrum
3 participants
@snowystinger @GuoXiaoyang @igorman007