[Solved] How to set focus on input element dynamically when leaving from the value help dialog

Stanley

Dear,

I did a demo to illustrate this issue. Could you please have a look?
https://codepen.io/Stanley-549393092/pen/ZEQaNwa?editors=1010

For example, there are a lot of fields on the screen and they have the value help dialog.
My question is how to set focus on input element dynamically when leaving from the value help dialog?

I did some research, it can use ‘ref’. But what I concern is if there are a lot of fields, do I have to specify the ref one by one?
And the 2nd question is, if there are a lot of ref under vm.$refs, will it impact the performance?

Thanks a lot for your support!

turigeza

@Stanley You have a built in function on q-input called focus. Yes you will have to reference them (one by one unique). I am not aware of any performance issues.
https://codepen.io/turigeza/pen/VweyLrV?editors=1010

Stanley

@turigeza Thanks for your help! This is a good proposal.
By the way, I think the code block “setTimeout” can be replaced by below line. How do you think?

this.$nextTick(() => this.$refs[this.activeField].focus())

turigeza

@Stanley Sure much better.

Stanley

@turigeza I suddenly remember that I implemented it without specify ‘ref’ previously. Please see the demo.
https://codepen.io/Stanley-549393092/pen/abdENWV?editors=1010

But it only works for q-btn not the q-icon.
And there is the disadvantage with q-btn, when clicking tab key on the UI, the cursor order is q-input -> q-btn -> q-input -> q-btn.
However, if it is q-icon, the order is q-input -> q-input, that’s what I would like to prefer.

Do you have any idea?

metalsadman

Try playing around with tabindex.

turigeza

@Stanley as per @metalsadman suggestion put a tabindex="-1" on the q-btn if you don’t want it to be user focusable by the tab key. But that way you can not access the dialog by keyboard (not good). The natural flow is q-input -> q-btn -> q-input -> q-btn.

Keep in mind you will still end up passing in some variable to valueHelp(helpId) because the help is not the same for every single input (I presume).

Stanley

@turigeza It’s cool that it works with tabindex.
Yes, you are right, I have to pass different variable to valueHelp and specify the ‘ref’ is a good choice. But if the q-input is inside the table, it becomes complex because I have to append the index to ‘ref’ as well, I just would like to keep my code simple.

Appreciate for your help, now there are several workaround to meet different requirement.