8000 Browser Freezes When Using presetColors · Issue #168 · uiwjs/react-color · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content

Browser Freezes When Using presetColors #168

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
banx9x opened this issue Mar 10, 2025 · 1 comment
Open

Browser Freezes When Using presetColors #168

banx9x opened this issue Mar 10, 2025 · 1 comment

Comments

@banx9x
Copy link
banx9x commented Mar 10, 2025

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 added a commit that referenced this issue Mar 10, 2025
@jaywcjlove
doc(Sketch): add example. #168
73a420f
@jaywcjlove
Copy link
Member

@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.

github-actions bot pushed a commit that referenced this issue Mar 10, 2025
@jaywcjlove
v2.4.1 doc(Sketch): add example. #168 73a420f
8621d1f
Sign up for free to join this conversation on GitHub. Already have an account? 40E6 Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@jaywcjlove @banx9x
0