1583097 - event.preventDefault does not work on select

Status: RESOLVED DUPLICATE of bug 1019630

(Core :: DOM: UI Events & Focus Handling, defect)

Description

[Johannes.Giske]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:70.0) Gecko/20100101 Firefox/70.0

Steps to reproduce:

Use the following HTML and Javascript. Then tab to focus the select and press the space key.

CodePen with the same code: https://codepen.io/johgis/pen/oNvJmoJ

<script>
const onKeyDown = event => {
if (event.key === ' ') {
console.log('Prevent default');
event.preventDefault();
}
}
</script>

<label for="test">Test</label>
<select id="test" onkeydown="javascript:onKeyDown(event)">
<option value="1">Test 1</option>
<option value="2">Test 2</option>
<option value="3">Test 3</option>
<option value="4">Test 4</option>
</select>

Actual results:

The select opens and renders a list of options. The console logs 'Prevent default' proving that event.preventDefault() was triggered.

Expected results:

The select should not open. The console should still log 'Prevent default'.
I have tested this code in Chrome, Edge and Vivaldi and all these have the expected behavior.

Comment 1

[Virginia (please send need info request to Brindusa Tot)]

Hi Johannes,

Thank you for your report.

Could you give us further steps for reproduction? I open the test page https://codepen.io/johgis/pen/oNvJmoJ but I'm not sure in which element of the page I need to focus the Tab key to then press the space key. Are you referring to the html element </select>?

If you can add screenshots or a screen recording to this ticket it'll help a lot.

Also, please let us know if you can reproduce the issue using the latest Firefox Nightly, you can download it here: https://nightly.mozilla.org

Regards,

Comment 2

[Johannes.Giske]

Hi Virginia, you should focus the <select>. I've updated the code here (https://codepen.io/johgis/pen/oNvJmoJ) to add an red border around the select when it's focused.

I don't have a way to make a screen recording at the moment, but I'll add a few screenshots.

Comment 3

[Johannes.Giske]

Attachment: firefox: select, not focused

Comment 4

[Johannes.Giske]

Attachment: firefox: select, focused

Comment 5

[Johannes.Giske]

Attachment: firefox: select, focused and space clicked

Comment 6

[Johannes.Giske]

Attachment: edge: select

Comment 7

[Johannes.Giske]

Attachment: edge: select, focused

Comment 8

[Johannes.Giske]

Attachment: edge: select, focused and space clicked

Comment 9

[Virginia (please send need info request to Brindusa Tot)]

Hey Johannes,

Thanks so much for providing further information. I was able to reproduce the behavior reported on Windows 10 and Mac OSX 10.14 using:

• Firefox Nightly 71.0a1 (2019-09-30) (64-bit),
• Firefox Beta 70.0b10 (64-bit)
• Firefox Release 69.0.1 (64-bit)

I'll add a product and component so the dev team can take a look at this. Feel free to change it for a more appropriate one.

Regards,