I have a file input, with a label. I wish to be able to open the file browser in four different ways:
However, only options 1-3 work out of the box? Is this a bug, or an intended feature? I'm currently working on FireFox v106.0.5
Are there any solutions out there that rely solely on HTML/CSS, or is JS required to fix the issue?
<label for="file_input" tabindex="0">
<input type="file" id="file_input">
input opens a dialog when it receives click or enter.
label itself does not open a dialog, but when clicked (or tapped), it can passes the focus to its associated input, and a dialog is opened as a result.
It does not do the same when it receives enter, thus the situation 4 in your question does not work.
This is because the purpose of this design is to increase the hit size for the associated
input, especially for user on a touch-screen device.
So to answer the question, it is an intended feature.