Skip to content

Changing format does not update color display until color is picked #60

@johnrteg

Description

@johnrteg

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:

  1. Create a component with a format state
    const [format, setFormat] = React.useState< MuiColorInputFormat >( "rgb" );
  2. control setFormat from some other control
  3. 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.
  4. 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

Image Image Image Image Image

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions