support compatibility with React 18

[theunexpected1]

Currently with React 18, the picker selects the color as soon as you click the EyeDropper (also the case with the hook).

I checked the local example with both React17 & 18, 17 works as expected and 18 has the above mentioned issue.

Could you please support this soon? If not, I can look for alternatives.

Thanks for the nice library @jodhman 🎉

[theunexpected1]

I've used a hack for it to work right now - I ignore the first selection and consider only the subsequent click as a valid color selection

[jodhman]

Hey @theunexpected1! I'll investigate this issue and push a new version as soon as I find the time these coming days. I'm pleased you were able to work around it thus far.

[jodhman]

Heya! Hope everything is well. Thought I should give you an update.

I've started looking into it, but I've very recently started studying full time alongside my full time occupation. Time is fleeting. 😅 As soon as I find time available, I'll sort it.

Appreciate your patience 🙏

[paulm17]

An oldie but a goodie. Adding a timeout could resolve the issue. Let me know and I'll make an additional PR. 😄

const setPickingMode = useCallback(
    ({ isPicking, disableButton, showActiveCursor }: PickingMode) => {
      if (document.body) {
        document.body.style.cursor = showActiveCursor
          ? cursorActive
          : cursorInactive
      }

      setButtonDisabled(disableButton)
      window.setTimeout(() => {
        setPickingColorFromDocument(isPicking)
      }, 250)
    },
    [cursorActive, cursorInactive],
  )

[jodhman]

An oldie but a goodie. Adding a timeout could resolve the issue. Let me know and I'll make an additional PR. 😄

const setPickingMode = useCallback(
    ({ isPicking, disableButton, showActiveCursor }: PickingMode) => {
      if (document.body) {
        document.body.style.cursor = showActiveCursor
          ? cursorActive
          : cursorInactive
      }

      setButtonDisabled(disableButton)
      window.setTimeout(() => {
        setPickingColorFromDocument(isPicking)
      }, 250)
    },
    [cursorActive, cursorInactive],
  )

Ooo... If we can confirm this works, we should totally make that PR! 😎🔥

[jodhman]

This is fixed in version 5.4.2 🥳