opened
RFrix
username_0
Is there any way to automatically focus and open a UISelect element upon it being rendered?

I am trying to create a component that gets either a single number or an array of numbers as a prop and displays the first array-element or the single number in a label.
Upon clicking the label it will be hidden and either the UITextbox (if a single number has been passed) or the UISelect (if an array has been passed) will be rendered.

The UITextbox can be autofocused with the autofocus="true" prop, but I am unable to make this work with the UISelect component.
The component is created and filled and can be used as required, but a second click is necessary to open the dropdown which is, unfortunately, not acceptable for this project.

I would really appreciate some help since I am kind of new to Vue and a bit out of my depths here.

Thank you.
Autofocus UISelect
issue
created
RFrix
username_0
I have found a solution which is not beautiful but it does work.
The issue was a combination of not propagating click events and a tiny delay issue causing the UISelect to not be loaded.
I fixed it by accessing it thorugh a ref, casting the ref since I am using typecast and calling click on the label containing the arrow icon of the select box.
The Timeout is necessary due to the mentioned delay issue.
This function is called directly after the boolean variable bound to v-show for the selectfield is set to true.

`          setTimeout(function () {
              (this.$refs.selectfield as any).$refs.label.children[0].children[1].click();
            }.bind(this),0);`
comment
closed
RFrix
username_0
issue
created
JosephusPaye
username_1
Hi @username_0,

I'll see how I can add methods for `focus`/`open`/`close`/`toggle` to UiSelect.

The solution you used works, but as you said, isn't ideal. You shouldn't need to use anything not part of the documented public API of the component.
comment