Skip to content

Fix search not working on mobile because of undefined ref#6706

Merged
FreeTubeBot merged 3 commits intoFreeTubeApp:developmentfrom
MarmadileManteater:fix-search-not-working-on-mobile
Mar 4, 2025
Merged

Fix search not working on mobile because of undefined ref#6706
FreeTubeBot merged 3 commits intoFreeTubeApp:developmentfrom
MarmadileManteater:fix-search-not-working-on-mobile

Conversation

@MarmadileManteater
Copy link
Contributor

@MarmadileManteater MarmadileManteater commented Feb 1, 2025 •
edited by ChunkyProgrammer
Loading

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.

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

@github-actions github-actions bot added the PR: waiting for review For PRs that are complete, tested, and ready for review label Feb 1, 2025
@FreeTubeBot FreeTubeBot enabled auto-merge (squash) February 1, 2025 02:09
PikachuEXE
PikachuEXE previously approved these changes Feb 1, 2025
View reviewed changes
@absidue
Copy link
Member

absidue commented Feb 1, 2025

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
Copy link
Member

efb4f5ff-1298-471a-8973-3d47447115dc commented Feb 8, 2025

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
Copy link
Contributor Author

MarmadileManteater commented Feb 8, 2025

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

@github-actions
Copy link
Contributor

github-actions bot commented Mar 4, 2025

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

This comment has been minimized.

Sign in to view
@FreeTubeBot FreeTubeBot merged commit 36d533a into FreeTubeApp:development Mar 4, 2025
5 checks passed
@github-actions github-actions bot removed the PR: waiting for review For PRs that are complete, tested, and ready for review label Mar 4, 2025
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Mar 5, 2025
@PikachuEXE
Merge branch 'fix-legacy-alone' into custom-builds/current
f9e998b 
* fix-legacy-alone:
  Allow legacy formats to be used even when dash and audio-only are unavailable
  Fix search not working on mobile because of undefined ref (FreeTubeApp#6706)
  Bump bgutils-js from 3.1.3 to 3.2.0 (FreeTubeApp#6960)
  Bump copy-webpack-plugin from 12.0.2 to 13.0.0 (FreeTubeApp#6964)
  Bump babel-loader from 9.2.1 to 10.0.0 in the babel group (FreeTubeApp#6957)
  Bump yaml-eslint-parser from 1.2.3 to 1.3.0 in the eslint group (FreeTubeApp#6958)
  Bump lefthook from 1.11.0 to 1.11.2 (FreeTubeApp#6961)
  Bump sass from 1.85.0 to 1.85.1 (FreeTubeApp#6965)
  Bump stylelint from 16.14.1 to 16.15.0 in the stylelint group (FreeTubeApp#6959)
  Bump electron from 34.2.0 to 34.3.0 (FreeTubeApp#6962)
  Bump shaka-player from 4.13.4 to 4.13.6 (FreeTubeApp#6963)
  Translated using Weblate (Welsh)
  Fix search suggestions error for long search queries (FreeTubeApp#6955)
  Fix ctrl+click to reset playback rate not working (FreeTubeApp#6943)
  Translated using Weblate (Romanian)
  IV RSS Subscriptions: properly detect `error channels` (FreeTubeApp#4407)
  Translated using Weblate (Romanian)
  Move screenshot fallback path handling to the main process (FreeTubeApp#6945)
  Translated using Weblate (Romanian)
PikachuEXE added a commit to PikachuEXE/FreeTube that referenced this pull request Mar 11, 2025
@PikachuEXE
Merge branch 'development' into feature/manual-progress-saving
170610c 
* development: (97 commits)
  Translated using Weblate (German)
  Translated using Weblate (Czech)
  Translated using Weblate (Basque)
  Translated using Weblate (Hungarian)
  Translated using Weblate (Chinese (Simplified Han script))
  Translated using Weblate (Japanese)
  Translated using Weblate (Estonian)
  Translated using Weblate (Portuguese (Brazil))
  Bump the eslint group with 4 updates (FreeTubeApp#6985)
  Add support for channel's `Courses` tab (FreeTubeApp#6641)
  Bump electron from 34.3.0 to 35.0.1 (FreeTubeApp#6986)
  Bump shaka-player from 4.13.6 to 4.13.8 (FreeTubeApp#6990)
  Bump css-minimizer-webpack-plugin from 7.0.0 to 7.0.2 (FreeTubeApp#6988)
  Bump swiper from 11.2.4 to 11.2.5 (FreeTubeApp#6989)
  Bump lefthook from 1.11.2 to 1.11.3 (FreeTubeApp#6987)
  Update Invidious DASH xtags handling for YouTube.js changes (FreeTubeApp#6944)
  Translated using Weblate (French)
  Allow legacy formats to be used even when dash and audio-only are unavailable (FreeTubeApp#6977)
  Translated using Weblate (Hungarian)
  Fix search not working on mobile because of undefined ref (FreeTubeApp#6706)
  ...
doublecrow pushed a commit to doublecrow/FreeTube that referenced this pull request Mar 28, 2025
@MarmadileManteater @ChunkyProgrammer @doublecrow
Fix search not working on mobile because of undefined ref (FreeTubeAp…
5e3be8f 
…p#6706)

* Fix search not working because of undefined ref

* Add back missing ref

* move ref to correct spot

---------

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
efb4f5ff-1298-471a-8973-3d47447115dc pushed a commit to efb4f5ff-1298-471a-8973-3d47447115dc/FreeTube that referenced this pull request Jul 12, 2025
@MarmadileManteater @ChunkyProgrammer @efb4f5ff-1298-471a-8973-3d47447115dc
Fix search not working on mobile because of undefined ref (FreeTubeAp…
bfa38f5 
…p#6706)

* Fix search not working because of undefined ref

* Add back missing ref

* move ref to correct spot

---------

Co-authored-by: ChunkyProgrammer <78101139+ChunkyProgrammer@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@absidue absidue absidue approved these changes

@efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc efb4f5ff-1298-471a-8973-3d47447115dc approved these changes

@kommunarr kommunarr kommunarr approved these changes

@ChunkyProgrammer ChunkyProgrammer Awaiting requested review from ChunkyProgrammer

@PikachuEXE PikachuEXE Awaiting requested review from PikachuEXE

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Bug]: FreeTube won't search when side bar is at the bottom

8 participants

@MarmadileManteater @absidue @efb4f5ff-1298-471a-8973-3d47447115dc @CocolinoFan @PikachuEXE @kommunarr @ChunkyProgrammer @FreeTubeBot