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

[buihoanghai]

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.

[choumx]

/to @cvializ /cc @aghassemi

[cathyxz]

@buihoanghai I think what you want (navigate on keypress) is already doable with the existing amp-list + amp-bind. There's an example on the travel template on ampstart here: https://ampstart.com/templates/travel/travel.amp.

In particular, this section:

<input list="locations" type="text" name="query" on="
  change:AMP.setState({
  fields_query: event.value,
  fields_query_live: event.value,
  fields_query_edited: query_query != event.value
  });
  input-debounced:AMP.setState({
  fields_query_live: event.value
  });
  " value="" [value]="fields_query">

<amp-list layout="flex-item" src="/api/places?types=(regions)&types=(cities)&input=" [src]="'/api/places?types=(regions)&types=(cities)&input=' + fields_query_live">
    <template type="amp-mustache">
      <datalist id="locations">
        {{#predictions}}
        <option value="{{description}}">
       {{/predictions}}
       </option></datalist>
    </template>
</amp-list>

[choumx]

If I understand correctly, I think OP wants to use keyboard (up/down arrows) to navigate the autosuggest list.

[cathyxz]

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.

[buihoanghai]

Hi @cathyxz it's a good example. Unfortunately I can not use datalist tag. Due to I need using template for the suggestions. You can see here https://iprice.sg/compare/apple-iphone-8/ in the top banner. Beside that datalist still not be supported on browser safari

[cathyxz]

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

[cvializ]

This could be a good generalization and a complement to #10947

[caroqliu]

Hi there,

The new amp-autocomplete component supports arrow key navigation through items so reasonably resolves your search suggestion usage here: https://amp.dev/documentation/examples/components/amp-autocomplete/?format=websites

I'm going to go ahead and close this issue with the recommendation that you switch to the new component, but please feel free to let us know if you are still experiencing any problems implementing the feature you had in mind. Thanks!