Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

The onKeyDown stream occasionally returns non-KeyboardEvents #37899

Open
Hexer10 opened this issue Aug 17, 2019 · 7 comments
Open

The onKeyDown stream occasionally returns non-KeyboardEvents #37899

Hexer10 opened this issue Aug 17, 2019 · 7 comments
Labels
area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. P3 A lower priority bug or feature request web-libraries Issues impacting dart:html, etc., libraries

Comments

@Hexer10
Copy link

Hexer10 commented Aug 17, 2019 •
edited
Loading

When an option of a datalist is selected, the console throws this error ( full console ouput )

client.js:1016 Uncaught TypeError: Instance of 'Event': type 'Event' is not a subtype of type 'KeyboardEvent'
    at Object.wrapException (client.js:1016)
    at Object.propertyTypeError (client.js:1537)
    at Object.interceptedTypeCheck (client.js:1547)
    at main_closure4.call$1 (client.js:24853)
    at _EventStreamSubscription_closure.call$1 (client.js:18524)
    at invokeClosure (client.js:1206)
    at client.js:1225
wrapException @ client.js:1016
propertyTypeError @ client.js:1537
interceptedTypeCheck @ client.js:1547
call$1 @ client.js:24853
call$1 @ client.js:18524
invokeClosure @ client.js:1206
(anonymous) @ client.js:1225

These are the elements:

                <label for="fooInput">Which?</label>
                <input name="type" type="text" id="fooInput" list="suggestions" class="form-control"
                       placeholder="Select anything" required>
                <datalist id="suggestions">
                    <option data-value="16">Foo</option>
                    <option data-value="17">Bar</option>
                    <option data-value="18">FooBar</option>
                </datalist>

The error is thrown only when the main.dart.js is imported, even if it contains only the main function without anything else.

Dart VM version: 2.4.1 (Wed Aug 7 13:15:56 2019 +0200) on "windows_x64"
I'm running the dartdevc compiler (webdev serve) on Chrome. When using webdev build the error is not thrown.

pubspec.yaml :

environment:
  sdk: '>=2.4.0 <3.0.0'

dependencies:
  http: ^0.12.0+2
  stream_transform: ^0.0.19

dev_dependencies:
  build_runner: ^1.6.6
  build_web_compilers: ^2.2.2
@lrhn lrhn added the area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. label Aug 18, 2019
@srawlins
Copy link
Member

Can you post the Dart code that listens to the datalist selection? You mention that the error occurs even if the code just contains the main function; can we see that main function, or the relevant listeners?

@srawlins srawlins added the needs-info We need additional information from the issue author (auto-closed after 14 days if no response) label Aug 19, 2019
@Hexer10
Copy link
Author

Hexer10 commented Aug 19, 2019 •
edited
Loading

Its content is literally the main function without any function inside it, I have no listeners on the datalist element

import 'dart:html';

void main() {
}

To test it I've created a new project with the stagehand's Bare-bones web-app template and pasted the content in there:

index.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="scaffolded-by" content="https://github.com/google/stagehand">
    <title>web_test</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="icon" href="favicon.ico">
    <script defer src="main.dart.js"></script>
</head>

<body>

<label for="fooInput">Which?</label>
<input name="type" type="text" id="fooInput" list="suggestions" class="form-control"
       placeholder="Select anything" required>
<datalist id="suggestions">
    <option data-value="16">Foo</option>
    <option data-value="17">Bar</option>
    <option data-value="18">FooBar</option>
</datalist>

</body>
</html>

@no-response no-response bot removed the needs-info We need additional information from the issue author (auto-closed after 14 days if no response) label Aug 19, 2019
@vsmenon vsmenon mentioned this issue Aug 19, 2019
Merged
@vsmenon vsmenon changed the title Selecting datalist option throws TypeError The onKeyDown stream occasionally returns non-KeyboardEvents Aug 19, 2019
@vsmenon
Copy link
Member

vsmenon commented Aug 19, 2019

The root cause here is that this API:

https://api.dartlang.org/dev/2.5.0-dev.2.1/dart-html/Element/onKeyDown.html

is - under some circumstances - returning an Event, not a KeyboardEvent.

For this specific example, the dwds workaround above in the webdev repo will fix.

@vsmenon vsmenon added web-libraries Issues impacting dart:html, etc., libraries P3 A lower priority bug or feature request labels Aug 19, 2019
@miyoyo
Copy link

miyoyo commented Apr 25, 2020

There is a bug (?) in chrome where selecting an element in a dropdown suggestion list fires an event into onKeyDown ( #36488 seems to be that same issue ), this behavior does not exist in EdgeHTML or Firefox

Using this dummy example:

<!DOCTYPE html>

<html>
<body>
    <input id="a" list="suggestions">
    <datalist id="suggestions">
      <option value="Black">
    </datalist>

    <script>
        document.getElementById("a").onkeydown = console.log
    </script>
</body>
</html>

When typing "b" into a box, then selecting "Black":

On chrome:
Issue on chrome, Two events are visible, one is a KeyboardEvent type, the other is an Event type, containing a type value which is "keydown"

On edge:
Issue on edge, one event is vibisle, which says object KeyboardEvent

On Firefox:
Issue on Firefox, only one event, keydown, is visible

@natebosch
Copy link
Member

@vsmenon @sigmundch - should we try to work around this behavior in dart:html?

@sigmundch
Copy link
Member

I generally lean towards not trying to hide what the underlying browser is doing, but I'm not opposed to doing something temporary if others feel strongly about it.

Seems like we should follow up with a bug report for chrome as well?

@natebosch
Copy link
Member

It looks like this behavior has been around for a while, December 2018 we got our first report.

angulardart/angular#1694

I don't know how long before that Chrome started doing this. This only happens when using <datalist> and choosing an option. I do think it would be worth filing a bug against chrome to make sure this is intentional.

@srujzs srujzs mentioned this issue Jul 6, 2020
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
area-web Use area-web for Dart web related issues, including the DDC and dart2js compilers and JS interop. P3 A lower priority bug or feature request web-libraries Issues impacting dart:html, etc., libraries
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
7 participants
@srawlins @sigmundch @vsmenon @miyoyo @lrhn @natebosch @Hexer10