Page MenuHomePhabricator

Fix background scrolling on new mobile search experience
Closed, ResolvedPublic

Description

Background

  • The users is able to scroll in the background when the dialog is opened in the new mobile search experience

https://phabricator.wikimedia.org/F62404866

User story

  • Add user story in the format: “As a [persona], I want to [X], so that [Y]”

Requirement

Prevent background scrolling when the mobile search overlay is active, ensuring a single scrollable context for the user.

BDD

Feature: Background scrolling behavior in mobile search overlay

Scenario: Search overlay restricts background scroll
  Given I am using the mobile site with the new search experience
  When I tap the search icon and the search overlay opens
  Then only the search results area should be scrollable
  And the page content behind the overlay should not scroll
  And there should only be one search bar visible

Test Steps

Test Case 1: Background is non-scrollable when overlay is active

  1. Visit testwiki or any beta cluster wiki with the new mobile search experience enabled
  2. Tap on the search icon to activate the search overlay
  3. Attempt to scroll the background page content
  4. AC1: Background content should not scroll
  5. Scroll within the search results
  6. AC2: Search results area should be scrollable
  7. AC3: Only one search bar is present in the overlay

Design

none

Acceptance criteria

Communication criteria - does this need an announcement or discussion?

  • none

QA Results - Beta

ACStatusDetails
1T397539#10963477
2T397539#10963477
3T397539#10963477

QA Results - Prod

ACStatusDetails
1T397539#10970586
2T397539#10970586
3T397539#10970586

Event Timeline

bwang triaged this task as High priority.Jun 20 2025, 7:14 PM
bwang updated the task description. (Show Details)
bwang moved this task from Incoming to Q4 on the Web-Team board.

Change #1162072 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@master] Prevent extra scrolling when dialog is open on ios

https://gerrit.wikimedia.org/r/1162072

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/9d99309318/w/

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/84b07a3c42/w/

I was looking at English and Catalan wiki's typeahead search components (so the old vs new implementation) and noticed that the difference is that on English, aka previously, as soon as you start scrolling the input field loses focus aka gets blurred and that causes the ios keyboard to hide. So I was playing around with forcing a blur on the input field when the user scrolls or touchmoves but when that happens the cdx-typeahead-search menu gets it's expanded set to false and there's currently no way to override that. But if we could expose a prop on the codex TAHS component that is something like closeMenuOnBlur then we could use it in the core TAHS component along with forcing a blur when the user scrolls and I think that would cause the ios keyboard to hide and thus fix this? And the behavior would be exactly the same as before.

LMora-WMF subscribed.

Change #1162072 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@master] Prevent extra scrolling when dialog is open on ios

https://gerrit.wikimedia.org/r/1162072

Change #1164474 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/skins/MinervaNeue@wmf/1.45.0-wmf.7] Prevent extra scrolling when dialog is open on ios

https://gerrit.wikimedia.org/r/1164474

Change #1164474 merged by jenkins-bot:

[mediawiki/skins/MinervaNeue@wmf/1.45.0-wmf.7] Prevent extra scrolling when dialog is open on ios

https://gerrit.wikimedia.org/r/1164474

Mentioned in SAL (#wikimedia-operations) [2025-06-30T20:33:34Z] <cjming@deploy1003> Started scap sync-world: Backport for [[gerrit:1164474|Prevent extra scrolling when dialog is open on ios (T397539)]], [[gerrit:1164475|Add workaround for iOS to ensure the virtual keyboard is opened when the mobile TAHS overlay is opened (T397469)]]

Mentioned in SAL (#wikimedia-operations) [2025-06-30T20:35:28Z] <cjming@deploy1003> cjming, bwang: Backport for [[gerrit:1164474|Prevent extra scrolling when dialog is open on ios (T397539)]], [[gerrit:1164475|Add workaround for iOS to ensure the virtual keyboard is opened when the mobile TAHS overlay is opened (T397469)]] synced to the testservers (see https://wikitech.wikimedia.org/wiki/Mwdebug). Changes can now be verified there.

Mentioned in SAL (#wikimedia-operations) [2025-06-30T20:44:57Z] <cjming@deploy1003> Finished scap sync-world: Backport for [[gerrit:1164474|Prevent extra scrolling when dialog is open on ios (T397539)]], [[gerrit:1164475|Add workaround for iOS to ensure the virtual keyboard is opened when the mobile TAHS overlay is opened (T397469)]] (duration: 11m 23s)

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sequoia 15.5
Browser: Chrome Canary (latest as of test date)
Device: MS, iphone
Emulated Device: NA

Test Steps

Test Case 1: Background is non-scrollable when overlay is active

  1. Visit testwiki or any beta cluster wiki with the new mobile search experience enabled
  2. Tap on the search icon to activate the search overlay
  3. Attempt to scroll the background page content
  4. AC1: Background content should not scroll
  5. Scroll within the search results
  6. AC2: Search results area should be scrollable
  7. AC3: Only one search bar is present in the overlay

I tried this on Safari and Chrome on my device as well and I could not get the keyboard to stay open when I started to scroll.

screenshot 18.mov.gif (762×356 px, 2 MB)

Edtadros updated the task description. (Show Details)
Edtadros subscribed.

Test Result - PROD

Status: ✅ PASS
Environment: enwiki
OS: macOS Sequoia 15.5
Browser: Chrome Canary (latest as of test date)
Device: MS, iphone
Emulated Device: NA

Test Steps

Test Case 1: Background is non-scrollable when overlay is active

  1. Visit testwiki or any beta cluster wiki with the new mobile search experience enabled
  2. Tap on the search icon to activate the search overlay
  3. Attempt to scroll the background page content
  4. AC1: Background content should not scroll
  5. Scroll within the search results
  6. AC2: Search results area should be scrollable
  7. AC3: Only one search bar is present in the overlay

I tried this on Safari and Chrome on my device as well and I could not get the keyboard to stay open when I started to scroll.

screenshot 24.mov.gif (760×354 px, 1 MB)

ovasileva claimed this task.

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org//wikis/84b07a3c42/w/

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org//wikis/9d99309318/w/