Fix search not working on mobile because of undefined ref

[MarmadileManteater]

Fix search not working on mobile because of undefined ref

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Description

I noticed that there was an error happening on mobile when trying to search.
vue.runtime.esm.js:3106 TypeError: Cannot read properties of undefined (reading 'blur')
The line that traces back to is here:

FreeTube/src/renderer/components/top-nav/top-nav.js

Line 220 in bfa22f4

this.$refs.searchContainer.blur()

Looking into the component's template, I couldn't find a ref that matched it. Looking at the history, it looks like at one point the ref was on this element with the searchContainer class.

8e72e7f#diff-07257d469f27c18e3d2c97c8c867fe787ee304ee7fbb6a3daffb80600a8183f9R71

This PR adds back this ref="searchContainer" to prevent that error and fix the search on mobile.

Testing

1. Shrink the window down to small enough that the search bar is hidden (width<=680px)
2. Attempt to search

Desktop

• OS: LMDE
• OS Version: 6
• FreeTube version: bfa22f4

Additional context

i definitely have fixed this in my fork by just adding a null check, but looking into it, this seems like the true fix.

[absidue]

Looking at the commit where it was removed, which you linked the ref was actually on another element back then, specifically the div around the search bar that has the searchContainer class. What was the reason for chosing a different element to add it back to?