1428992 - keydown .preventDefault() does no prevent default select dropdown

Status: RESOLVED DUPLICATE of bug 1019630

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

Description

[Julian]

User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:57.0) Gecko/20100101 Firefox/57.0
Build ID: 20180103231032

Steps to reproduce:

NOTE: You can view the behavior mentioned below on this page:
https://form-components.io/components/detail/select-material-like--default-light.html
This is the source code: https://github.com/julmot/form-components/blob/master/src/components/select/select-material-like/select-material-like.js. The complete component repository can be found on GitHub: https://github.com/julmot/form-components

1. Firefox 57 on Windows 10 / Firefox 57 on Mac OS X 10:

  => event.preventDefault() doesn't prevent the native select from opening on space (keydown event)
  Usually I would also open the custom dropdown in this case, but since the native dropdown appears I had to decide to not do anything in this case

2. Firefox 57 on Mac OS X 10:

  => event.preventDefault() doesn't prevent the native select from opening on arrow down/up (keydown events)
  While you can open a custom dropdown using enter, you can't unfortunately navigate inside it using the arrow keys. Firefox will open the native dropdown in this case. And to complete the strangeness navigating inside the custom dropdown works when using arrow left/right instead of up/down. Also, the arrow actions (up/down ans also left/right) work in all other recent browsers on macOS. Tested with Safar 11, Chrome 63, even Opera 49

This bug is possibly related to:

#1019630 which is about mousedown
#801753 which is about keypress
#392863 which is about mouseover


Actual results:

1. event.preventDefault() doesn't prevent the native select from opening on space (keydown event)
2. event.preventDefault() doesn't prevent the native select from opening on arrow down/up (keydown events)


Expected results:

It should prevent the default behavior in all scenarios.

Comment 1

[Hani Yacoub, Desktop QA]

Attachment: Press enter.png

These are the results after I tested on Windows 10 x 64, Mac OS X 10.12 and Ubuntu 16.04 x64:

1. Pressing space: 
- The drop down is displayed but it looks different comparing to the drop down when you press enter (see screenshot attached). 
- The up/down arrows are functioning correctly but the right/left arrows are not.
- Pressing "Space" key the second time is not closing the drop down.
- Pressing "Esc" key closes the drop down menu. 

2. Pressing enter:
- The drop down is displayed but it looks different comparing to the drop down when you press "space" key (see screenshot attached). 
- The up/down and right/left arrows are functioning correctly.
- Pressing "Enter" key the second time is closing the drop down.
- Pressing "Esc" key closes the drop down menu.

Comment 2

[Hani Yacoub, Desktop QA]

Attachment: Press space.png

Comment 3

[Ming-Chou Shih [:stone]]

We got several bugs which all about preventDefault on key/mouse events don't stop the default action of a select element. The behavior was the same as other browsers at that time. Now looks like all browsers stop default behavior except Firefox. We probably should collect the behavior of all browsers and align the behavior for compatibility with other browsers. Let's keep Bug 1019630 open (to cover the cases of mouse and keyboard events) and close the others.

Comment 4

[MartinParenteau1963]

On my Windows 7 computer, Firefox (version 59) is the only browser in which the dropdown of a select element opens after pressing the Space key and calling event.preventDefault() in code. In Chrome, Opera and IE11, calling preventDefault prevents the dropdown from opening.