Unintentional color picker is appearing if one of the property value is "field"

[pranavkumar389]

Unintentional color picker is appearing if one of the property value is "field"

Here is a code sample to replicate the issue.https://codesandbox.io/p/sandbox/jolly-gwen-9twh8v?file=%2Fsrc%2FApp.js%3A9%2C1-9%2C48

[josdejong]

Thanks for reporting. That is odd indeed!

I'm not sure why "field" is considered a valid color name in CSS, I've asked on StackOverflow:

https://stackoverflow.com/questions/78035304/why-is-field-a-valid-color-name-in-css

[josdejong]

This may explain the cause: https://stackoverflow.com/questions/8318911/why-does-html-think-chucknorris-is-a-color

[pranavkumar389]

Understood the issue, but even if the value is red instead of field it renders the color picker. I am expecting red should be rendered as red but not with an input to pick color.

Is there a way to disable the color picker? @josdejong

[josdejong]

It's a bug, we need to to fix this. Step one is to figure out what's going wrong, that's clear now. Step two is to solve it.

You can indeed disable the color picker by adding some CSS with display: none on the class name of the color picker element. There is only one downside: the text is not colored like other string texts because it is (still) detected as a color.

[pranavkumar389]

Of course we can remove the color picker with display: none. But as you mentioned text color will not be of string one.
I was looking for any option to disable this behavior.