User menu in Vector 2022's Sticky Header doesnt close properly in certain cases
Closed, ResolvedPublic0 Estimated Story PointsBUG REPORT
Actions

Assigned To

None

Authored By

	bwang
	May 18 2023, 6:47 PM

Description

Steps to replicate the issue (include links if applicable):

Make the sticky header show
Open the user menu
Click outside of the user menu, or press tab until the focus leaves the user menu

What happens?:
The user menu stays open

What should have happened instead?:
It should close, similar to all other dropdowns in Vector

Developer notes

We use dropdownMenu.js to progressively enhance dropdowns to have this functionality. The user menu dropdown is added via JS afterwards, so it never gets enhanced

QA Results - Beta

AC	Status	Details
1	✅	T336965#9503713

QA Results - Prod (wmf.17)

AC	Status	Details
1	❌	T336965#9540452

Details

	Subject	Repo	Branch	Lines +/-
	Deactivate sticky header menus and search when sticky header is hidden	mediawiki/skins/Vector	master	+11 -4

Customize query in gerrit

Related Objects
Search...

		Status	Subtype	Assigned	Task
		Resolved	BUG REPORT	None	T336965 User menu in Vector 2022's Sticky Header doesnt close properly in certain cases
		Open	BUG REPORT	None	T357571 Cannot tab out of user menu

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptMay 18 2023, 6:47 PM

bwang added a project: Accessibility.May 25 2023, 5:25 PM

LGoto triaged this task as Medium priority.May 25 2023, 5:25 PM

LGoto lowered the priority of this task from Medium to Low.

LGoto edited projects, added Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5); removed Web-Team-Backlog.

LGoto edited projects, added Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 6); removed Web-Team-Backlog ( Web Team FY2022-23 Q4 Sprint 5).Jun 5 2023, 5:42 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1); removed Web-Team-Backlog (Web Team FY2022-23 Q4 Sprint 6).Jun 15 2023, 5:58 PM

Jdlrobson moved this task from Web Team FY2023-24 Q1 Sprint 1 to Web Team FY2023-24 Q1 Sprint 2 on the Web-Team-Backlog board.Jun 22 2023, 5:55 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 1).

Jdlrobson moved this task from Incoming to Sticky header on the Desktop Improvements (Vector 2022) board.Jul 7 2023, 10:07 PM

ovasileva set the point value for this task to 3.Jul 11 2023, 4:50 PM

ovasileva subscribed.

ovasileva changed the point value for this task from 3 to 1.Jul 11 2023, 4:56 PM

This appears to be added in bindDismissOnFocusLoss in resources/src/mediawiki.page.ready/checkboxHack.js - when discussing in estimation we noticed it's not called on the sticky header after it's built.

DavidBrooks subscribed.Jul 11 2023, 5:53 PM

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2) board.Jul 17 2023, 5:37 PM

bwang mentioned this in T338642: ULS Dropdown in Vector-2022 sticky header is cut off.Jul 18 2023, 4:40 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 3); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 2), Accessibility, Desktop Improvements (Vector 2022).Jul 31 2023, 5:36 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 3).Jul 31 2023, 5:59 PM

Jdlrobson moved this task from Web Team FY2023-24 Q1 Sprint 4 to Web Team FY2023-24 Q1 Sprint 5 on the Web-Team-Backlog board.Aug 7 2023, 5:42 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 5); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 4).

ovasileva moved this task from Incoming to Ready for Development on the Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 5) board.Aug 24 2023, 2:45 PM

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 5).Sep 5 2023, 5:24 PM

Jdlrobson edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1); removed Web-Team-Backlog (Web Team FY2023-24 Q1 Sprint 6).Sep 11 2023, 9:48 PM

I noticed a bug that I assume could have the same origin. If the sticky header user menu is still open when you scroll up to the top of the page, you no longer see that dropdown/popup menu but all its links are still clickable. As an effect, you can e.g. find yourself on the preferences page when you tried to open the languages menu.

Jdlrobson added a project: Desktop Improvements (Vector 2022).Oct 2 2023, 6:26 PM

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 2); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 1).Oct 9 2023, 12:13 PM

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 2).Oct 23 2023, 9:27 AM

ovasileva edited projects, added Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 3).Nov 2 2023, 12:13 PM

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q2 Sprint 5); removed Web-Team-Backlog (Web Team FY2023-24 Q2 Sprint 4).Nov 20 2023, 6:38 PM

Jdlrobson moved this task from Incoming to Doing on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.Nov 30 2023, 7:04 PM

Jdlrobson moved this task from Doing to Incoming on the Web-Team-Backlog (FY2023-24 Q2 Sprint 5) board.

Jdlrobson edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 1); removed Web-Team-Backlog (FY2023-24 Q2 Sprint 5).Dec 4 2023, 8:46 PM

Jdlrobson moved this task from Incoming to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 1) board.Jan 4 2024, 12:20 AM

ovasileva edited projects, added Web-Team-Backlog (FY2023-24 Q3 Sprint 2); removed Web-Team-Backlog (FY2023-24 Q3 Sprint 1).Jan 4 2024, 9:42 AM

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

[mediawiki/skins/Vector@master] Deactivate sticky header menus and search when sticky header is hidden

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

gerritbot added a project: Patch-For-Review.Jan 18 2024, 8:25 PM

bwang moved this task from Incoming to Code Review on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 18 2024, 8:25 PM

Jdlrobson moved this task from Code Review to Ready for Development on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 4:15 PM

bwang changed the task status from Open to Stalled.Jan 29 2024, 6:50 PM

bwang changed the point value for this task from 1 to 0.

Jdlrobson moved this task from Ready for Development to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 29 2024, 7:15 PM

Change 991646 merged by jenkins-bot:

[mediawiki/skins/Vector@master] Deactivate sticky header menus and search when sticky header is hidden

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

ReleaseTaggerBot added a project: MW-1.42-notes (1.42.0-wmf.16; 2024-01-30).Jan 30 2024, 1:00 AM

Jdlrobson changed the task status from Stalled to Open.Jan 30 2024, 1:06 AM

Jdlrobson assigned this task to Edtadros.

Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.

Maintenance_bot removed a project: Patch-For-Review.Jan 30 2024, 1:30 AM

Jdlrobson moved this task from QA to Needs More Work on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 30 2024, 2:24 AM

Jdlrobson moved this task from Needs More Work to Blocked on Others on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 30 2024, 5:39 PM

Jdlrobson moved this task from Blocked on Others to QA on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Jan 30 2024, 10:22 PM

Test Result - Beta

Status: ✅ PASS
Environment: beta
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Make the sticky header show
Open the user menu
Click outside of the user menu, or press tab until the focus leaves the user menu
✅ AC1: The user menu should close.

screenshot 222.mov.gif (846×1 px, 731 KB)

Edtadros updated the task description. (Show Details)Jan 31 2024, 7:51 PM

Jdlrobson assigned this task to ovasileva.Feb 1 2024, 5:35 PM

Jdlrobson merged a task: T356604: The menu in sticky header becomes transparent and overlaps the tools in Vector 2022.Feb 5 2024, 3:29 PM

Jdlrobson added a subscriber: Iniquity.

@Jdlrobson Hello! <s>Are you sure this is the same task? :) It seems to me that destroying an object when you click outside it and destroying an object when you hide the sticky header are slightly different things.</s> I have found the right task :)

Test Result - Prod

Status: ❌
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Make the sticky header show
Open the user menu
Click outside of the user menu, or press tab until the focus leaves the user menu
❌ AC1: The user menu should close.

screenshot 225.mov.gif (1×644 px, 907 KB)

Edtadros mentioned this in T355380: Verify 1.42.0-wmf.16 deployment.Feb 5 2024, 5:52 PM

@bwang could you take a look? Thanks in advance!

Hm weird, it seems to work for me on beta but not in prod. I need to investigate more why

Jdlrobson moved this task from Needs More Work to Doing on the Web-Team-Backlog (FY2023-24 Q3 Sprint 2) board.Feb 7 2024, 8:36 PM

I think I worked this out - https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/994145 got merged on January 30th so it should only be riding the train now?

The new patch was not associated with this ticket: https://gerrit.wikimedia.org/r/c/mediawiki/skins/Vector/+/994145
so we should test it again as part of wmf.17

Does this make sense?

Since the QA passed in beta cluster, it will be QAed in production again for wmf.17

Test Result - Prod

Status: ❌ FAIL
Environment: enwiki
OS: macOS Sonoma
Browser: Chrome
Device: MBA
Emulated Device:NA

Test Artifact(s):

QA Steps

Make the sticky header show
Open the user menu
Click outside of the user menu, or press tab until the focus leaves the user menu
❌ AC1: The user menu should close.
This works when you click out of the menu