-
Notifications
You must be signed in to change notification settings - Fork 27
Description
Describe the bug
Setting the format to "hex" or "rgb" works fine on intialization, but if you provide an option to select the format (in external dropdown) in a React.useState state variable, the format in MuiColorInput does not update until the user select the color picker and then the format display updates. Even when the format is set to "rgb", it seems to default to "hex" until the color picker is selected.
To Reproduce
Steps to reproduce the behavior:
- Create a component with a format state
const [format, setFormat] = React.useState< MuiColorInputFormat >( "rgb" ); - control setFormat from some other control
- add <MuiColorInput value={ color }
format={ format }
fallbackValue="#ffffffff"
disablePopover={ false }
isAlphaHidden={ alpha }
onChange={ setColor } />
( you can do the same with alpha (true/false boolean), because that really gets messed up in the display, so I have taken that out because the UI of MuiColorInput alpha slider gets messy. - change format from the control. see that MuiColorInput color format string does not change.
Expected behavior
If the property state of format changes after the component has been mounted, I would expect the format of the color display to change. So if the format is "hex", the display would be "#FF00FF". If then the format is changed to "rgb", then the display should read "rgb(156, 39, 176)".
Screenshots
See attached. Embedding into custom control with optional pallette and controls.
img1: set to "hex" by default
img2: change format via dropdown. change from hsv
img3: format remains hex
img4: pick color picker, format remains as hex
img5: pick another color, then the format updates to hsv





Desktop (please complete the following information):
- OS: MacOS
- Browser Chrome
- Version: Version 138.0.7204.102 (Official Build) (arm64)
Smartphone (please complete the following information):
N/A
Additional context
None