search

gilbarbara / react-floater

Advanced tooltips for React
https://codesandbox.io/s/github/gilbarbara/react-floater/tree/main/demo
MIT License
220 stars 37 forks source link

Broken functioning of conditionally rendered tooltips #94

Closed stud-mai closed 1 year ago

stud-mai commented 2 years ago

🐛 Bug Report

It might be some edge case but having multiple tooltips on a page that react on hover event with at least one of them with conditional render breaks proper functioning of all tooltips. The problem is believed to be in useUnmount hook in Portal component on line 66 where the number of rendered tooltips on one page isn't taken into account.

Expected behavior

When there are several tooltips on a page, unmounting of one of them don't break functioning of others

Link to repl or repo

https://codesandbox.io/s/fervent-kapitsa-0lp53r?file=/src/index.tsx At first everything work OK but after clicking on "Unmet Condition" button tooltips are not shown at all. While second click on that button returns functioning of unmounted tooltip but not others

Run npx envinfo --system --binaries --npmPackages react-floater

Paste the results here:

 System:
    OS: macOS 12.5.1
    CPU: (12) x64 Intel(R) Core(TM) i7-8750H CPU @ 2.20GHz
    Memory: 208.62 MB / 16.00 GB
    Shell: 3.2.57 - /bin/bash
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  npmPackages:
    react-floater: 0.8.1 => 0.8.1
romanlex commented 2 years ago

@gilbarbara I can confirm this issues I think your need register all tooltips and check it on length before unmount portal

gilbarbara commented 1 year ago

Fixed in 0.9.0