How to programatically open the Multiselect (VUE Dropdown component)

💻 Development app dev
1

Hi There,

our Nextcloud-App has a series of Multiselect-Dropdowns that the user has to sequentially select, so there is always one element activated.

Is there a way to programatically open the dropdown, so the user does not have to click the element nor push the Tab-key?

This is what I tried so far with no success:

userSelectedOption(option) { // callback when user selects a dropdown option
	const nextLevelRefId = `${metaData.name}_level${level + 1}`

	if (this.$refs[nextLevelRefId] !== undefined) {
		//did not work
		this.$refs[nextLevelRefId][0].$children[0].toggle()
		// did not work
		this.$refs[nextLevelRefId][0].$children[0].activate()
		// did also not work
		this.$refs[nextLevelRefId][0].$el.focus()
	}
}

Thanks in advance for any advice.

~Finis

2

just for clarification, are you talking about the original vue multiselect2 lib or the one modified through @nextcloud/vue?

3

The modified version, thus the .$children[0]-part to access the vue multiselect2 component.

4

Could vuejs2 - How to focus and activate a vue multiselect? - Stack Overflow help?

You could console.info(this.$refs[nextLevelRefId][0], this.$refs[nextLevelRefId][0].$children[0]) to find out what element you’re referencing there.

5

this.$refs[nextLevelRefId][0].$el.focus() actually worked it was a timing problem.

The callback gets called before the actually model gets updated and the element gets enabled. So it sets focus to a disabled dropdown, and then the model gets updated and the dropdown gets enabled.

Solution was to encase this.$refs[nextLevelRefId][0].$children[0].$el.focus() in this.$nextTick(() => {[...]})
sequetially_walk_dropdowns