Color Picker closes when keypressed

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)

Start by reproducing the issue in the color picker created from background('#000'), focusing on the editable RGBA fields and the behavior after pressing backspace. Locate the color picker implementation from that entry point, then verify that keypresses no longer close it or produce NaN and malformed color strings.