Me gustaría poder concentrarme en el campo de entrada cuando se ingresan ciertas claves. La entrada en la que me gustaría centrarme existe dentro de autocompletar-vue. Aquí es donde lo llamo:
<autocomplete v-shortkey="['alt', 's']" @shortkey.native="theAction()" ref="autocompleteInput" ></autocomplete> el método de acción que me gustaría permitirme centrarme en la entrada, se ve así:
theAction () { this.$refs.autocompleteInput.$el.focus() } este enfoque en toda la sección que no es lo que quiero. la entrada existe 2 divs dentro de lo que se enfoca theAction. Para una mejor perspectiva, esto es lo que this.$refs.autocompleteInput.$el :
<div> <div data-position="below" class="autocomplete"> <input role="combobox" class="autocomplete-input"> </div> </div>¿Alguna idea sobre cómo puedo concentrarme en la entrada con la entrada de autocompletar de clase? cualquier sugerencia es útil!
Agregue una referencia en el componente de autocomplete para <input> y agregue un método para enfocarlo
<input role="combobox" class="autocomplete-input" ref="input"> methods: { focus() { this.$refs.input.focus() } }Luego puede llamarlo desde el componente principal como este
this.$refs.autocompleteInput.focus()