0
Good evening, you guys. I’m trying to give FOCUS a tooltip when the result of a query made by the user returns empty.
When the user types something in the text field, I perform a validation upon the result.
if (!result.length) { this.$store.commit('page/noSearchResult', true); }
In case the transfer comes empty, I’m true in a variable in the store. Inside the component that has the tooltip, I have an Observer (watch) for this variable that is in the store.
'$store.state.page.noSearchResult': 'switchAdvancedSearchFocus',
And when her value is true, i try to give focus to my toolptip that way.
switchAdvancedSearchFocus() {
if (this.$store.state.page.noSearchResult) {
this.advancedTextSearch = true;
this.$refs.tooltipAdvanced.focus();
}
},
But all I have is this mistake:
Error in callback for watcher "$store.state.page.noSearchResult": "TypeError: this.$refs.tooltipAdvanced.focus is not a function"
How can I solve this effectively ?
What gives
console.log(Array.isArray(this.$refs), typeof this.$refs);within thatswitchAdvancedSearchFocus?– Sergio
Good evening Sergio, Thanks for helping me. I put a console exactly as in your comment inside the func: the result was : false "Object"
– Rodrigo Nantes
Okay, and you’ve tested
this.$refs.tooltipAdvanced.$el.focus()?– Sergio
Already. In this case, I have no error message, however the tooltip does not open.
– Rodrigo Nantes
this.$refs.tooltipAdvancedcan be a component or a DOM element, your code does not show this... Your code also does not show how the tooltip is activated. You have to show more code.... Testthis.$nextTick(() => this.$refs.tooltipAdvanced.focus(););in the hope that when you callfocusthe tooltip is already in the DOM and thatthis.$refs.tooltipAdvancedbe an element of the DOM– Sergio