Browser Freezes When Using presetColors

[banx9x]

I’m not sure about the exact cause, but when using presetColors, my browser freezes (tested on Chrome/Firefox). Interestingly, Safari is the only browser where it works fine.

Code Example:

<Popover
  trigger={['click']}
  title={null}
  overlayClassName='color-picker-popover'
  content={
    <Sketch
      style={{ marginLeft: 20 }}
      disableAlpha
      color={value.hex}
      onChange={onChange}
      // presetColors={[
      //   {
      //     color: '#B8E986',
      //     title: '#B8E986',
      //   },
      //   {
      //     color: '#9FD36F',
      //     title: '#9FD36F',
      //   },
      //   {
      //     color: '#8CC952',
      //     title: '#8CC952',
      //   },
      //   {
      //     color: '#FF7979',
      //     title: '#FF7979'
      //   }
      // ]}
    />
  }>
  <input
    type='color'
    value={value.hex}
    style={{ 
      height: 32, 
      border: '1px solid rgb(217, 217, 217)', 
      borderRadius: 2, 
      backgroundColor: '#ffffff', 
      cursor: "pointer" 
    }}
  />
</Popover>

Steps to Reproduce: 1. Use the code snippet above. 2. Uncomment the presetColors prop. 3. Click on the color picker to open the Sketch component. 4. Observe that the browser freezes in Chrome/Firefox but works fine in Safari.

Versions: • @uiw/react-color-sketch: ^2.4.1 • react: ^17.0.2 • ant: ^4.16.13 • node: v16.20.1 • Chrome: 134.0.6998.44 • OS: macOS 15.3.1

Could you please look into this issue? Thanks!

[jaywcjlove]

@banx9x I tested this locally but couldn’t reproduce the issue. The browser didn’t freeze when using presetColors. The problem might be related to the Popover component or the React version being too low.