Input date/time picker prevents DOM events from triggering-CodePudding

So I'm working with an input type='time', and I don't understand why when the picker is opened, DOM events stop triggering.

My first assumption was shadow DOM, but it doesn't appear in the chrome devtool with the shadow tree setting enabled (I see correctly other shadow trees).

Furthermore, the picker even keeps focus outside the web page, for instance, if I wanted to close my broswer or click an icon on my OS's taskbar, the first click would make the picker close and only the second would do the action, although this behaviour occurs on Ubuntu 20.04 but not on Windows 10.

Here's a snippet that logs key presses, but whenever the picker is opened, events don't get triggered anymore.

window.addEventListener("keydown", () => console.log("key pressed !"));

<input type="time" id="input">

Is there a way to keep listening to events while the picker is opened ?

If there isn't, why so ?
Do the events get sent but the listeners can't catch them ?
Do the events not get sent at all ?
What is that interface made out of, is it even HTML ?

CodePudding user response：

I interpret the question this way: when you refer to the "picker" UI, you mean the user interface elements which are not initially present within the bounding rectangle at first render. Here's an example from a similar question which shows a style used by Chromium browsers (around the time of Chrome version 83):

time input expanded - chromium

In the example above, I think you are referring to the "picker" UI as the lower rectangle containing the two vertical columns of two-digit numbers.

What is that interface made out of, is it even HTML ?

If you examine the shadow DOM in a Chromium browser, you can see that there is no HTML corresponding to the "picker" in this case. This is rendered like other native UI components provided by the browser, for example, the Window.prompt() dialog below:

window.addEventListener('keydown', ({key}) => console.log(`${key} was pressed`));

window.prompt('Try typing here first, then focus the demo window and type there afterward');

The code snippet above will result in a natively rendered prompt dialog UI like the one pictured in the screenshot below:

a screenshot of a natively rendered prompt dialog UI created by the code above

The user agent (browser) is fully responsible for the implementation, style, behavior, etc. for this UI: you cannot influence, control, modify, or respond to it like you can using DOM APIs.

Is there a way to keep listening to events while the picker is opened ?

No.

If there isn't, why so ?

Explained above.

Do the events get sent but the listeners can't catch them ?

No.

Do the events not get sent at all ?

There are no keydown events dispatched when the native browser UI is focused.