Unplanned
Last Updated: 30 Aug 2023 12:02 by ADMIN
Wojciech
Created on: 29 Aug 2023 10:48
Category: FlatColorPicker
Type: Feature Request
2
The "onChange" event value should be in the same format as the one set in the format property

In one of the latest versions of Flat Color Picker "format" property has been added to enable customizing the default input field that is presented to users, before it was always RGB. However, I found that the value that appears as an argument in "onChange" method is still RGB, no matter which format has been chosen.

For example:

const [color, setColor] = useState("000000");

const setColorFromPicker = useCallback(
  (event: FlatColorPickerChangeEvent) => console.log(event.value),
  [],
);

return (<FlatColorPicker
  value={color}
  format="hex"
  onChange={onChange}
/>

The value presented in the log will be "rgb(0, 0, 0, 0)" despite the format being set to "hex".

It would be very useful to have this configurable as well. I can see three possible solutions:

  • make "format" property affect both the input and the output; that would make the scenario above produce "#000000" log;.
  • create two separate properties, e.g. "inputFormat" and "outputFormat";
  • include both values in the passed structure, so that e.g. I could use "event.value.hex" to get "#000000" and "event.value.rgb" to get "rgb(0, 0, 0, 0)"

Best regards

Wojciech Wąs

2 comments
ADMIN
Wissam
Posted on: 30 Aug 2023 12:02

The same enhancement can be added to the ColorGradient which also has a `format` property.

ADMIN
Wissam
Posted on: 30 Aug 2023 08:06

Hi, Wojciech,

Thank you so much for proposing this improvement for the FlatColorPicker component.

I am converting this thread to a public feature request in our feedback portal where new ideas are constantly being evaluated and the most popular ones are implemented in future releases. I added a vote on your behalf in order to increase its priority, you can track it here:

As a current workaround, this will require manually converting the rgba value (in the onChange event) to the one supplied one to the `format` property. For example, the following StackOverFlow thread shows how to convert from rgba to hex:

In addition, I updated your Telerik Points accordingly as a token of gratitude for proposing this enhancement.

Regards,
Wissam
Progress Telerik

Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Kendo family, check out our getting started resources!