Bug 218507 - Up and down arrow keys in <input> have a different behavior when inside a shadow root
Summary: Up and down arrow keys in <input> have a different behavior when inside a sha...
Status: NEW
Alias: None
Product: WebKit
Classification: Unclassified
Component: Forms (show other bugs)
Version: Safari 14
Hardware: Mac macOS 10.15
: P2 Normal
Assignee: Nobody
URL:
Keywords: InRadar
Depends on:
Blocks: 148695
  Show dependency treegraph
 
Reported: 2020-11-03 04:31 PST by Cory LaViska
Modified: 2020-11-07 20:41 PST (History)
7 users (show)

See Also:


Attachments

Note You need to log in before you can comment on or make changes to this bug.
Description Cory LaViska 2020-11-03 04:31:02 PST
When an <input> is present inside a shadow root, pressing the up/down arrows no longer moves the cursor to the start/end of the field. The following fiddle demonstrates a standard input with the correct behavior and an input within a shadow root with differing behavior.

Fiddle: https://jsfiddle.net/me9yatxz/1/
Comment 1 Darin Adler 2020-11-03 12:58:38 PST
Does anyone know if this is a recent change or a long-standing issue?
Comment 2 Smoley 2020-11-04 10:39:56 PST
This also reproduces on Safari 13.1.2.
Comment 3 Radar WebKit Bug Importer 2020-11-04 10:40:17 PST
<rdar://problem/71042487>
Comment 4 Darin Adler 2020-11-04 18:21:54 PST
Seems like this bug is in Safari, not WebKit.
Comment 5 Darin Adler 2020-11-04 18:42:11 PST
Safari uses JavaScript to get metadata about the text field, and when it can’t because the field is in a shadow tree, its code misfires and blocks the up and down arrows. The misbehaving code is in Safari for handling autocompletion lists. The smaller fix is to make it just not screw up and confuse itself when the text field is in a shadow tree. The bigger fix would be to make autocompletion work with those fields too.
Comment 6 Darin Adler 2020-11-05 09:28:59 PST
The test case works as expected in MiniBrowser, and likely in other WebKit-based browsers.

There is a slim chance that some kind of change in WebKit could solve the problem, since it’s indirectly due to difficulty getting data about the text field from the Safari code.