question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Feature request: Add more option for keyCode value in the event input-throttled

See original GitHub issue

Hi, currently I’m working on search suggestion component. Im finding a solution for when the suggestion box is expanded the user enable use keyboard arrows( up, down) for selecting. I think we can not done it without having event.keyCode value in keydown event for element input. I check the file https://github.com/ampproject/amphtml/blob/master/src/service/action-impl.js
My idea is change the event listener from input to keydown.


const throttledInput = throttle(this.ampdoc.win, event => {
        const target = dev().assertElement(event.target);
        this.trigger(target, name, /** @type {!ActionEventDef} */ (event),
            ActionTrust.HIGH);
}, DEFAULT_THROTTLE_INTERVAL); 
this.root_.addEventListener('keydown', event => {
        const deferredEvent = new DeferredEvent(event);
        this.addTargetPropertiesAsDetail_(deferredEvent);
        throttledInput(deferredEvent);
      });

and in function addTargetPropertiesAsDetail_ add the keyCode value

  if (event.keyCode !== undefined) {
        detail['keyCode'] = event.keyCode;
    }

I still not built the development environment yet so I havent tested yet. But it’s good if we can add more value like this.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:8 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
cathyxzcommented, Dec 19, 2017

Yes, and that does work in the AMPStart example. Maybe my copied code block isn’t sufficiently precise. I’ll churn up a codepen.

Edit: to be precise, the the ampstart travel example, the autosuggest for “Where do you want to go?” allows keyboard navigation of the results list via up and down keys, meaning that there is a workaround for this particular use case. Input-throttle doesn’t allow you to bind arbitrary keys, which could still be an interesting FR. Codepen incoming.

1reaction
cathyxzcommented, Dec 20, 2017

Here’s a minimal codepen. Unfortunately yes it does rely on datalist for the keyboard navigation. Oh well. Deferring to @cvializ.

Read more comments on GitHub >

github_iconTop Results From Across the Web

KeyboardEvent.keyCode - Web APIs - MDN Web Docs
Use a keyCode value for an ASCII character produced by a key which is mapped to the same virtual keycode of Windows when...
Read more >
JavaScript Keycode List – Keypress Event Key Codes for ...
JavaScript keyboard events help you capture user interactions with the ... Keypress Event Key Codes for Enter, Space, Backspace, and More.
Read more >
KeyboardEvent.keyCode deprecated. What does this mean in ...
TLDR: I'd suggest that you should use the new event.key and event.code ... Notice that the key value is different from keyCode or...
Read more >
Keyboard: keydown and keyup - The Modern JavaScript Tutorial
There's another event named input to track changes of an <input> field, by any means. And it may be a better choice for...
Read more >
Checking for Keyboard Events in JavaScript with Cross ...
keyCode is implemented in all browsers, including the new ones, ... This code initializes key from event.key if that property has a value...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found