Page MenuHomePhabricator

Regression: Parameter list jumps when being focused in chrome
Open, Needs TriagePublic5 Estimated Story PointsBUG REPORT

Description

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

  • Open a template with a long parameter list in chrome.
  • Tab to the parameter list.

What happens?:
The paramter list jumps to an unclear position. Hiding the first few elements.

Peek 2022-07-11 14-55.gif (928×1 px, 805 KB)

What should have happened instead?:
The paramter list should not jump if no parameter is selected and jump to the selected parameter if one is selected.

Other information (browser name/version, screenshots, etc.):
This only happens in chrome. Firefox works fine.

Event Timeline

P.S.: The situation is quite improved with https://gerrit.wikimedia.org/r/c/mediawiki/extensions/VisualEditor/+/812824/ - there's still some weird jump visible, but at least the grey highlighted parameter ( in this case the first in the list ) scrolls into view.

What happens here:

  • When the browser gets keyboard focus on the parameter list it highlights the first item to let the user move with the arrow keys.
  • Chrome has the habit of scrolling a select element to the top of the scrollable container it is in as soon is you tab into it and it gets focus.
  • The browser does not respect the offset implied by the sticky header part, so it scrolls the list "behind" the sticky.
  • Our scrollIntoView kicks in because of the focus event and fixes the scroll position.

So we get that "jump".

WMDE-Fisch moved this task from Doing to Sprint Backlog on the WMDE-TechWish-Sprint-2022-07-06 board.

I tried to find a way to block that default scroll. But did not succeed. There seems to be none? o.O

For example by using preventDefault when scroll is triggered on the scroll-able.

or

element.focus({
  preventScroll: true
});

Unassigned from that task. Seems to only happen in Chrome. Checked FF and IE. Priority might be not to high.

Change 814123 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Remove non-helpful 1px hack from template dialog sidebar

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

Change 814123 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove non-helpful 1px hack from template dialog sidebar

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

Change 814790 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Template dialog sidebar: Skip glitchy jQuery animation

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

thiemowmde set the point value for this task to 5.

Test wiki created on Patch demo by Svantje Lilienthal (WMDE) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/0ffb97b510/w

Change 814790 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Template dialog sidebar: Skip glitchy jQuery animation

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