everweij / react-laag

Hooks to build things like tooltips, dropdown menu's and popovers in React
https://www.react-laag.com
MIT License
906 stars 44 forks source link

[FEATURE] Ability to close child layers when parent scrolls #64

Open mtmacdonald opened 3 years ago

mtmacdonald commented 3 years ago

Is your feature request related to a problem? Please describe.

When I scroll the parent, react-laag tries to reposition open layers. Mostly this works quite nicely, but sometimes I get very strange positioning (e.g. off the page, so it becomes invisible). An extreme example is when I have nested menus with scrolling parents layers (needed sometimes for long lists). Here is an example (also see screenshots).

Screenshot 2021-03-09 at 14 24 46 Screenshot 2021-03-09 at 14 24 57

Describe the solution you'd like I would like react-laag to propose a solution to the repositioning problem when a parent layer scrolls. If that's not possible I'd like some advice on what to do in this scenario.

Taking inspiration from native browser elements (e.g. the native select input), they seem to handle it by closing the child layer when the parent scrolls. Is that an approach react-laag can do for me automatically? If not, any implementation tips?

Describe alternatives you've considered

(Optional) Do you want to work on this feature?

Additional context