Page MenuHomePhabricator

Lookup component loses scrollbar and height after open and closing menu if more items have been loaded on scroll
Closed, ResolvedPublic8 Estimated Story PointsBUG REPORT

Description

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

  • Go to https://www.wikidata.org/wiki/Special:NewLexeme
  • Type e in the Lexeme's language field.
  • Scroll down until more results appear, you will see the scrollbar changing position
  • Click outside the menu before the new results load
  • Reopen the menu by clicking on the input field.

What happens?:

  • The height of the options menu with the items is very long and not limited to show only 6 items and the rest of items on scroll.
  • The scrollbar is gone

image.png (671×1 px, 122 KB)

What should have happened instead?:

The item results limitation is not being observed and more results are appearing
The items option menu should preserve result limit it had before being closed the first time
The items option menu should still show the scrollbar

image.png (664×1 px, 138 KB)

Other information (browser name/version, screenshots, etc.):

Event Timeline

Task Triage Notes:

  • This seems to affect the width as well as the height of the element
  • This will be prioritized in the product backlog
karapayneWMDE set the point value for this task to 5.Feb 7 2023, 11:13 AM
karapayneWMDE changed the point value for this task from 5 to 8.Aug 8 2023, 9:19 AM
karapayneWMDE moved this task from Unified DOT Backlog to Sprint-∞ on the Wikidata Dev Team board.

Notes:

  • it is possible to test this locally within special-new-lexeme in node_modules/.vite/deps/@wmde_wikit-vue-components.js.
  • check out for caching of this file when making the local test in this file.

The issue is in this line: https://github.com/wmde/wikit/blob/master/vue-components/src/components/OptionsMenu.vue#L163 since the value of maxHeight is being set to zero here when the OptionsMenu hides, due to the fact that that offsetTop from elements that are hidden is undefined.

A minimally invasive solution would be to update the value of maxHeight only when menuHeight > 0, which would be the case when users load the results without closing the menu. The equivalent would be to instead check if showMenu is set to true, the result will be the same, but showMenu right now is only defined in LookupInput and not being passed to OptionsMenu. The > 0 solution is thus the one that requires the least effort.

See:
https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent
and https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetTop

Change 949209 had a related patch set uploaded (by Guergana Tzatchkova; author: Guergana Tzatchkova):

[mediawiki/extensions/WikibaseLexeme@master] Bump special-new-lexeme

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

Change 949209 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Bump special-new-lexeme

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