Fix search not working on mobile because of undefined ref

[MarmadileManteater]

Fix search not working on mobile because of undefined ref

Pull Request Type

• [x] 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: https://github.com/FreeTubeApp/FreeTube/blob/bfa22f49b664ea45acb6601a7060fa208e235548/src/renderer/components/top-nav/top-nav.js#L220

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.

https://github.com/FreeTubeApp/FreeTube/commit/8e72e7fe5f58502a3692887b00a1d3e200c88ac0#diff-07257d469f27c18e3d2c97c8c867fe787ee304ee7fbb6a3daffb80600a8183f9R71

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

closes #6765

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: bfa22f49b664ea45acb6601a7060fa208e235548

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?

[efb4f5ff-1298-471a-8973-3d47447115dc]

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?

@MarmadileManteater

[MarmadileManteater]

i am aware, but i haven't gotten around to applying the changes.

[github-actions[bot]]

This PR is stale because it has been open 14 days with no activity. Remove stale label or comment or this will be closed in 14 days.

[CocolinoFan]

Nooo don't do this Mr github-actions bot, the problem is not fixed. If FreeTube window is too narrow the search functionality does not work. On mobile, this is crippling.