1888546 - <input type="color"> elements become unresponsive if you try to close a color picker for one <input> by clicking on a different <input>

Status: NEW

(Core :: Widget: Cocoa, defect, P3)

Description

[Irene Ni]

I'm running into an issue when working with multiple <input type="color"> elements where they become unresponsive if you try to close a color picker for one <input> by clicking on a different <input>. Although the initial color picker dialogue disappears, no change event is fired so when you click on the same input again the color picker popup does not appear. The only way to actually close the picker is by clicking the “X” button, so clicking away from the picker so it loses focus doesn’t close it either. You can replicate the behaviour in the “Try it” example on MDN by switching between the two inputs without clicking the “X” button:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color

Comment 1

[Irene Ni]

Possible solutions could be to fire a change event when the <input> element loses focus, or have it behave like a modal as with the file picker dialogue.

Comment 2

[Henri Sivonen (:hsivonen)]

I don't see the problem on Linux (Wayland). Reporter, what operating system do you see the problem on?

Comment 3

[Irene Ni]

I'm on macOS (Sonoma).

Comment 4

[Irene Ni]

Attachment: color input element behavior on Windows

Comment 5

[Irene Ni]

Attachment: color input element behavior on Mac

Comment 6

[Irene Ni]

After testing on Windows, it seems like this may be a Mac specific issue. On Windows you must close the first color picker before selecting another, like a modal. I've attached videos of the behavior on Windows vs Mac.

Comment 7

[Henri Sivonen (:hsivonen)]

tschuster, who should look at this and where does this belong? Looks like a bad interaction of DOM and Mac widget code.

Comment 8

[Tom Schuster]

We don't really have code that prevents pickers from different <input> elements from being opened, only per-element. I think this is something that would fall under the widget's responsibility.