search

hxf31891 / react-gradient-color-picker

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

Issue with default styling and focus loss #17

Closed vercamach closed 1 year ago

vercamach commented 2 years ago

Hello,

I'm not sure if I'm missing something but I have some issues to get the color picker look like in the demo. From what I can see I have to add line-height: 1.5 to the wrapper, and *, :after, :before {box-sizing: border-box;}. Adding the line height is simple, adding the box-sizing however is breaking styling in the application on multiple places.

Are there some plans to include the default styling in the package itself or is there some other way how to achieve the styling to look as expected :) ?

Screenshot 2022-09-05 at 15 47 41

Another issue I encountered is that when I'm dragging the color selector the moment the cursor is not within the window it looses focus.

https://user-images.githubusercontent.com/26543699/188558732-d375584c-a033-45d7-829c-0ce9b19da120.mov

hxf31891 commented 2 years ago

@vercamach could you tell me what version you are using?

It is meant to ship with the default sizing, but we recently updated the way the picker is styled to make compiling on Next and other non ES6 frameworks easier. I am guessing that some of the styling was lost in the process.

Thanks for bringing this to my attention.

sytolk commented 2 years ago

I have the same issue this PR: https://github.com/hxf31891/react-gradient-color-picker/pull/25 fix the opacity width but there is scroll in ColorPicker

hxf31891 commented 2 years ago

@sytolk & @vercamach I believe the styling issues should be fixed in v2.0.21. I tested it with a few different setups but please give the newest version a try when you get a second and let me know if there are any persisting issues.

The loss of focus is an interesting issue. Because the mouseUp event doesn't fire after the cursor has the element, retaining focus would cause the picker to continue moving in scenarios where the users cursor left the element but released. Little bit of a trade off there but I will see if I can come up with a solution.

pawelkontek commented 1 year ago

@hxf31891 I have the same issue with losing focus on v2.1.13. Do you think you will find a solution?

hxf31891 commented 1 year ago

Hi @pawelkontek, I believe I had a fix for this issue at one point a while ago but it seems like a slipped through the cracks. I will take a peak at getting this fixed up as soon as time allows.

hxf31891 commented 1 year ago

@pawelkontek @sytolk @vercamach focus issue is resolved in v2.1.18.

I believe that the styling issues are also resolved so I am going to close this issue, but please feel free to open a new one if any issues remain or new bugs arise.