CODEWITHSUNDEEP
javascriptvue.js
Fairy
Fairy

Reputation: 531

How to focus on component

I am using 'keen-ui' library in my project. Here is special component for select item. I want to handle event from another component and set focus on this, but I don't know how to.

Another components, that have inside <input/> tag can be focused like this.$refs[component name].$el.children[0].children[1].focus, where children[0].children[1] is <input/> element. This is ugly, but if the component doesn't contain input tag, we can not do even this.

Upvotes: 1

Views: 707

Answers (1)

Roy J
Roy J

Reputation: 43899

Examining the widgets, I see that they contain a div with tabindex="0", which means they can receive focus.

If you have a ref on the component, you should be able to do something like

const focusableEl = this.$refs.uiselect.querySelector('[tabindex="0"]');
focusableEl.dispatchEvent(new Event('focus'));

and the widget will light up. I actually did that from the console to test it out. Interestingly, blur did not work for me.

Upvotes: 1

Related Questions