Page MenuHomePhabricator

Enable configurable scroll and "load more" behavior in TypeaheadSearch
Open, In Progress, MediumPublic5 Estimated Story Points

Description

Summary

The following features are being added to the Menu component specifically to support the use case of TypeaheadSearch on wikidata.org:

  • T306932 will add configurable scroll behavior to the Menu component
  • T316603 will add "load more" behavior to the Menu component

This task covers enabling these behaviors in TypeaheadSearch and making them configurable, specifically so that different wikis can enable and configure these behaviors based on their needs.

Implementation

Configurable scroll

Other components with menus have a menuConfig prop, which allows the implementer to specify a bunch of common menu behaviors in a single object, which is then passed down to the Menu component (see Lookup, Select, and Combobox).

TypeaheadSearch does not do this, instead creating the menuConfig object in the setup function and then passing it to the Menu component. It was set up this way because TypeaheadSearch is opinionated about some of the options in menuConfig.

In order to enable configurable scroll in TypeaheadSearch, the component will need to take in a prop for the number of items to display initially, then pass it to the Menu component via menuConfig (note that this is assuming this is how we will implement it in T306932, which may change). The default number of items should be 10.

Load more

First, "load more" behavior should be off by default and configurable via a boolean prop.

T316603 will add an event that gets emitted when the user gets to the end of a list of menu items. TypeaheadSearch will need to be updated to listen for that event and, if "load more" behavior is enabled, tell the parent component to fetch more menu items, then pass them to the Menu component.

Demo

The Wikidata example on the TypeaheadSearch demo page should be updated to demonstrate these behaviors.

Acceptance criteria

  • Scrolling to additional menu items can be turned on via a prop that sets the number of items shown initially. (This can be tested in the Menu demo)
  • Load more behavior can be turned on (off by default)
  • Load more behavior works when turned on
  • The Wikidata demo on the TypeaheadSearch demo page demonstrates and explains these behaviors

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes
STH triaged this task as High priority.May 1 2022, 1:20 PM
STH lowered the priority of this task from High to Medium.May 17 2022, 5:43 PM
AnneT renamed this task from Enable load more behavior in TypeaheadSearch to Enable configurable scroll and "load more" behavior in TypeaheadSearch.Aug 29 2022, 9:17 PM
AnneT updated the task description. (Show Details)

Change 835109 had a related patch set uploaded (by Noa wmde; author: Noa wmde):

[design/codex@main] [WIP] TypeaheadSearch: adjust to support configurable scroll & load more

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

Sarai-WMDE changed the task status from Stalled to Open.Sep 26 2022, 5:23 PM

Change 835208 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/extensions/Wikibase@master] Track use of Searchbox footer on Wikidata

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

Change 835208 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@master] Track use of Searchbox footer on Wikidata

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

Change 835590 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/extensions/Wikibase@wmf/1.40.0-wmf.2] Track use of Searchbox footer on Wikidata

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

Change 835591 had a related patch set uploaded (by Michael Große; author: Michael Große):

[mediawiki/extensions/Wikibase@wmf/1.40.0-wmf.3] Track use of Searchbox footer on Wikidata

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

Change 835590 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@wmf/1.40.0-wmf.2] Track use of Searchbox footer on Wikidata

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

Change 835591 merged by jenkins-bot:

[mediawiki/extensions/Wikibase@wmf/1.40.0-wmf.3] Track use of Searchbox footer on Wikidata

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

Mentioned in SAL (#wikimedia-operations) [2022-09-27T13:59:14Z] <taavi@deploy1002> Started scap: Backport for [[gerrit:835590|Track use of Searchbox footer on Wikidata (T306933)]], [[gerrit:835591|Track use of Searchbox footer on Wikidata (T306933)]]

Mentioned in SAL (#wikimedia-operations) [2022-09-27T13:59:45Z] <taavi@deploy1002> taavi and migr: Backport for [[gerrit:835590|Track use of Searchbox footer on Wikidata (T306933)]], [[gerrit:835591|Track use of Searchbox footer on Wikidata (T306933)]] synced to the testservers: mwdebug1001.eqiad.wmnet, mwdebug2001.codfw.wmnet, mwdebug2002.codfw.wmnet, mwdebug1002.eqiad.wmnet

Mentioned in SAL (#wikimedia-operations) [2022-09-27T14:06:13Z] <taavi@deploy1002> Finished scap: Backport for [[gerrit:835590|Track use of Searchbox footer on Wikidata (T306933)]], [[gerrit:835591|Track use of Searchbox footer on Wikidata (T306933)]] (duration: 06m 59s)

Change 835109 merged by jenkins-bot:

[design/codex@main] TypeaheadSearch: adjust to support configurable scroll & load more

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

egardner set the point value for this task to 5.Sep 28 2022, 8:30 PM

Change 835653 had a related patch set uploaded (by Michael Große; author: Michael Große):

[design/codex@main] Dedicated sticky footer in the Menu component

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

AnneT changed the task status from Open to In Progress.Sep 29 2022, 2:57 PM

@EUdoh-WMF this is still in code review, but we could use some QA now if you have time! This work makes changes to both Menu and TypeaheadSearch for the Wikidata use case, so we need to make sure that the default implementation of TypeaheadSearch has not been affected.

I'm having some problems with patchdemo at the moment, so I can't easily set this up on-wiki for you to test the Vector search bar, but hopefully this will be resolved soon.

In the meantime, you can test the following on the Codex docs site:

  1. That the Wikidata demo, which now has infinite scrolling, works properly. The search footer should remain visible while you can scroll or keyboard navigate through the list of results.
  2. That the Wikipedia demo remains unchanged

@EUdoh-WMF got a patchdemo working! You might need to add some content to effectively test this (hardly any results seem to exist unfortunately). This demo should work exactly like the current production version with no changes.

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

https://patchdemo.wmflabs.org/wikis/b294045895/w/

Hi @Catrope @AnneT ,

I discovered this on the Patchdemo and can see it is on Beta too. The progress bar width is longer than that of the search box. I guess this is due to the implementation to extend the search box only when results are returned.

Other than this, there are no visible regressions for TAhS.

Thanks for finding this Ezekiel! I'm also seeing the same issue in production, so it looks like this was caused by an earlier change, not by this change. I've filed it as a separate task at T321009

@Catrope

Regarding the auto-scrolling feature, this is something I have seen:

  1. If you scroll quickly through the dropdown (using the Wikidata section of TAhS, for example), you will get to the "end" of the results and see the result footer briefly before it loads other results. Instead of the footer, can we show a loader which could result in being the footer, if no other results are being returned?
  1. As a result of (1) above, if you scroll fast enough (using a slow network connection), since the result footer initially shows at the end, you can scroll past it and start scrolling down the rest of the page even before the rest of the items load. The experience does not seem so smooth.

Video

Any thoughts?

Re #1, this should be fixed by pinning the footer at the bottom of the menu, below the scrollable area, which is done by the patch attached to this bug. You can test that here. In my own testing though, that code does have a bug where it scrolls back up after loading more results:

It doesn't scroll up when I move my mouse while results load, so this may be related to the code that scrolls to the highlighted/selected item.

Re #2, I don't think that we can easily prevent that. However, we probably should consider some kind of indication to the user that more results are loading, right now there is none.

Change 849191 had a related patch set uploaded (by VolkerE; author: VolkerE):

[mediawiki/core@master] Update Codex from v0.2.1 to v0.2.2

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

Change 849191 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.1 to v0.2.2

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

Thank you for #1: pinning the footer to the bottom is a good idea, in my opinion.

However, pressing the down arrow key without letting it go scrolls past the items and gets to the footer. I still think the Loading more... feature is a good idea, which will pause the scrolling until more items are loaded, before it continues scrolling (without getting to the footer until it is at the last menu item).

The bug about scrolling back up is documented here T321846.

@EUdoh-WMF thanks for your review here! I agree that we should indicate to users, at least those experiencing a slower connection, that more results are loading, although I think that should be a separate task. I've opened T322136 to document this; please feel free to edit that task to add more info if you want to.

Change 851700 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] styles, Menu: Move footer border-top to the Menu component

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

Change 851701 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[design/codex@main] docs, Menu: Add more docs on the new footer prop

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

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/3c21250d6e/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/3c21250d6e/w/build/codex/docs

This comment was removed by AnneT.

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

https://patchdemo.wmflabs.org/wikis/3c21250d6e/w/

Test wiki created on Patch demo by ATomasevich (WMF) using patch(es) linked to this task:
https://patchdemo.wmflabs.org/wikis/7836f7c545/w

Also created a Codex documentation site:
https://patchdemo.wmflabs.org/wikis/7836f7c545/w/build/codex/docs

Change 835653 merged by jenkins-bot:

[design/codex@main] Menu, TypeaheadSearch: Dedicated sticky footer in the Menu component

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

Change 851700 merged by jenkins-bot:

[design/codex@main] styles, Menu: Move footer border-top to the Menu component

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

Change 851701 merged by jenkins-bot:

[design/codex@main] docs, Menu: Add more docs on the new footer prop

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

Design sign-off done. I've checked the different test cases described in the task and they look good to me.

The only bug I've found is related with Safari looks weird since when you scroll to the last position it jumps to the first item in the menu (watch the video here). This is working well in Chrome but not in Safari.

@EUdoh-WMF moving the task to QTE sign-off since the design sign-off is already done.

Thanks @bmartinezcalvo, the bug about the auto-scroll to the top has been captured in another ticket T321846. Other than that, the sticky footer and load more looks good in Chrome v106, Safari v16 and Firefox v106.

Moving this to Product Sign-off.

Change 859597 had a related patch set uploaded (by Anne Tomasevich; author: Anne Tomasevich):

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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

Change 859597 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v0.2.2 to v0.3.0

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