[Vuejs]-Vue md-autocomplete keyup.enter not working

by

0👍

✅

Why your solution isn’t working

In order to listen on an event on a component (md-autocomplete), that component must emit the event. From a glimpse at the source it doesn’t appear to do so. If any child component (for instance, an <input>) emits the event, but the outer component doesn’t pass it through, you will never see it.

A Vue solution that might not work here

You can, however, still attach event listeners to the slots you pass into the component. It would look like this:

<template slot="md-autocomplete-item" @keyup.enter="click_select()" …>

I haven’t looked thoroughly through the docs, but I cannot find a suitable location for that, either.

Vanilla JS will work

As a last resort, you can attach an event listener to a DOM node that is a parent of the component you actually want to listen to. Suppose md-autocomplete was mounted in a <div id="parentDiv">, you could do

function listenerFunction(event) {
  if (event.keyCode === 13) {
  // keycode 13 is the return key
    click_select()
  }
}

document.getElementById('parentDiv').addEventListener('keyup', listenerFunction)

Caveats

It might also be appropriate to check whether the event originated where you think it should (that is, in the component’s search bar) by means of event.target or event.composedPath

In any case you should remember to detach the event listener when the component is destroyed, or else you might have the function called multiple times when the component is later re-mounted:

beforeDestroy() {
  document.getElementById('parentDiv').removeEventListener('keyup', listenerFunction)
}

This is also why listenerFunction must be given a name. You cannot remove an event listener that was attached using an anonymous function.

Leave a comment