Color Picker closes when keypressed

[ksen0]

p5.js version

1.11.1

What is your operating system?

None

Web browser and version

135.0.7049.41 (Official Build) (arm64)

Actual Behavior

Using the color picker, any keypress in the color picker editable input fields results in the colorpicker closing, making it very easy to create NaN values in the string color representation.

Then, switching between color modes by clicking on the bar results in badly malformed strings:

Expected Behavior

I expect that if a text field looks editable, it is editable. I expect that the color picker can only generate valid colors.

It is still totally possible to recover from error and use all the other features of the color picker, though! In this case, I used it instinctively because it looked possible, but I actually don't think the color picker needs to have editable text fields. This bug feels easy to recover from.

Steps to reproduce

Steps:

1. Start with background('#000') to create color picker button
2. In color picker, put cursor into any of the RGBA values and press backspace (in my case, color picker dialog disappeared, and then there was a NaN in the resulting new color value
3. Open color picker again and use it to change color mode. Can result in things like hsla(0,0%,0%,NaN)(0,0%,0%,NaN)(0,0,0,NaN)

[ksen0]

It seems that pressing and dragging to change values also creates some strange states, where the string representation is update, the button color is not, and the text behind the dialog gets selected: https://drive.google.com/file/d/1lhv-tksQNBs-JqS6rTxiXhOwvE8UJKYs/view?usp=drivesdk (sorry for the phone recording, I was having an issue with screen recordings on my computer)

This is also relatively easy to recover from, just adding here if it's helpful for investigation! Not even sure how related these are!

[Jatin24062005]

@ksen0 I noticed something interesting that might help narrow this issue down. When a user opens the color picker via Cmd/Ctrl + K, editing the RGBA input fields (including using backspace or typing) does not cause the picker to close — it behaves as expected.

However, when the user opens the color picker by clicking on the color icon, pressing backspace or typing inside the input fields does cause the picker to immediately close. This makes the behavior feel inconsistent and a bit unexpected. Maybe there's a focus or event propagation issue specific to the click-triggered opening method?