search

hxf31891 / react-gradient-color-picker

An easy to use color/gradient picker for React.js
MIT License
144 stars 45 forks source link

Conflicting overflow styles causing incorrect scrolling behavior #82

Closed JoniRinta-Kahila closed 7 months ago

JoniRinta-Kahila commented 8 months ago

Description: Firstly, I would like to express my gratitude for the excellent library. However, I am currently facing an issue with the react-gradient-color-picker@3.0.5 library in conjunction with the @headlessui/react@1.7.17 dialog. The problem arises when the ColorPicker sets document.body.style.overflow to 'auto', and subsequently, the @headlessui/react dialog component adds overflow: hidden to the HTML tag when the dialog opens. This conflicting behavior is causing the site to scroll to the top erroneously.

Reproduction:

  1. Add the react-gradient-color-picker@3.0.5 library into the project.
  2. Use the library's functionalities on the site.
  3. Observe that the body's overflow is set to 'auto'.
  4. Open a @headlessui/react@1.7.17 dialog, which adds "overflow: hidden" to the HTML tag when the dialog opens.
  5. Notice that the site scrolls to the top unexpectedly.

Is changing the body style completely necessary for this library?

hxf31891 commented 8 months ago

No it's not necessary at all, in fact I am not even sure how it made it in there. Will push a fix asap.

JoniRinta-Kahila commented 7 months ago

Hi @hxf31891,

I went ahead and implemented the fix in PR #86.

If you have any feedback or if there's anything specific you would like me to adjust in the pull request, please let me know. Otherwise, feel free to review it at your convenience.

hxf31891 commented 7 months ago

@JoniRinta-Kahila can you please confirm that this is fixed after your recent PR?

JoniRinta-Kahila commented 7 months ago

Thank you. Problem fixed.