Is there a way to customize the id prop from ColorSwatchPicker?

[hgodinho]

I see that the Id is defined here

...
return (
    <ListBoxItem
      {...props}
      ref={ref}
      id={color.toString('hexa')} // defined here
      textValue={color.getColorName(locale)}
      className={wrap(props.className || 'react-aria-ColorSwatchPickerItem')}
      style={wrap(props.style)}>
      {composeRenderProps(wrap(props.children), children => (
        <ColorSwatchContext.Provider value={{color}}>
          {children}
        </ColorSwatchContext.Provider>
      ))}
    </ListBoxItem>
  );

Isn't there a way to pass a id as prop and use it instead the color? I ask this because in my use case the value of the color can change, so react is throwing the error: Uncaught Error: Cannot change the id of an item.

One possible way to this is to use the logical or operator || to check if an id is defined at the props:

id={id || color.toString('hexa')}

The fixed id at this component would also be a problem in scenarios where this component appears twice or more at document with the same color.

[snowystinger]

interesting, I think it shouldn't be reusing the element in the case that the color changes

could you provide a reproduction? codesandbox or stackblitz

otherwise, seems reasonable

[devongovett]

The id must be set based on the value because of this:

react-spectrum/packages/react-aria-components/src/ColorSwatchPicker.tsx

Line 44 in a9d4fef

selectedKeys={[state.color.toString('hexa')]}

If your intent is to change the color to a different one, you could provide a different React key to the ColorSwatchPickerItem so it unmounts and remounts a new instance of the component.

[hgodinho]

nice, I used another key and it worked.
but this wouldn't be a problem if we render two ColorSwatchPicker at the same document?