Page MenuHomePhabricator

Fix behaviour of SelectZObject component to make it more usable and similar to OOUI component
Closed, ResolvedPublic

Description

SelectZobject currently has a little unpredictable behavior.

This component will receive an input from the user, search using the wikilambda_searchlabels and present a drop-down with labels for the user to select.

Few things about this component that should be addressed:

  • Remove search-text attribute if not needed. In the parent template, the component is passed a search-text attribute, but this is not declared nor treated as an input. This might have been added as a property first, but later removed from the component but not from the template. This works fine, and does not generate any error, but if not expected to come as input, the template should be kept clean.
  • The search, fetch and display options, and select behaviors don't work intuitively:
    • If the field is emptied, it hides search results drop-down, but doesn't clear the input from the perspective of parent component, so when erasing a value, the parent still has the last valid string that has been written.
    • When while typing, it matches a valid format, it selects it and emits the input. So when searching for Z103, it selects and emits Z1, Z10 and Z103 but from Z1 onward (including), it stops searching, so the last valid search for labels is wikilambda_searchlabels&wikilambda_search=Z&wikilambda_language=en
  • Instead, a more intuitive behavior could be:
    • When letters are input and after a short delay, even if the format is matched, request suggested labels and display the drop down.
    • Emit the value to the parent not when it's written, but when it's selected, either:
      • from the drop-down, or
      • directly typing in the input field, which will be considered "selected" when moving the focus out of the field
    • When an empty or a non-valid value is selected, clear the field and emit a null value to the parent if a null value is selected.

Notice that there's an element that has this same behavior in the OOUI library, but it will take some time till we can use the Vue implementation of this as part of the WVUI effort.

OOUI Lookup element: https://doc.wikimedia.org/oojs-ui/master/demos/?page=widgets&theme=wikimediaui&direction=ltr&platform=desktop#LookupElement-without-highlighting-1st-term-try-inputting-an-integer

gengh suggestion: We can keep different layers for this kind of component, a generic one that we can contribute or unplug and replace (e.g. LookupElement.vue), which contains the generic behavior, and a WikiLambda-specific implementation of this component (e.g. LabelLookupElement.vue) that instances the generic one and provides the specific Wikilambda behavior. We can look at the OOUI LookupElement to understand what is considered "generic" behavior and replicate it.

Event Timeline

Jdforrester-WMF renamed this task from Fix behavior of SelectZObject component to make it more usable and similar to OOUI component to Fix behaviour of SelectZObject component to make it more usable and similar to OOUI component.Dec 16 2020, 6:13 PM

A similar component implemented in Vue by the mediasearch team to the LookupElement mentioned above is this one:

https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikibaseMediaInfo/+/refs/heads/master/resources/mediasearch-vue/components/base/AutocompleteSearchInput.vue

This component is sufficiently generic to be treated as a base component, we can contemplate reusing this as an option. Also, consider taking a look into the base components of this project in order to reuse them if needed.

DVrandecic raised the priority of this task from Medium to High.Jan 6 2021, 5:47 PM

Some of my notes on other things the select widget should do that it doesn't do right now...:

(1) @gengh noticed it's giving Vue warnings related to changing the incoming prop values - some modification is needed there!
(2) arrow keys don't work - ideally you could step up or down through the response list and not require moving the mouse
(3) search results is limited to 10 - it would probably eventually be useful to allow an expanded search somehow if those 10 weren't enough. That ones definitely not urgent though.
(4) I'm sure the styling could be improved...

Change 656956 had a related patch set uploaded (by Genoveva Galarza; owner: Genoveva Galarza):
[mediawiki/extensions/WikiLambda@master] Add Autocomplete base component from wikisearch-vue and dependencies.

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

Change 656957 had a related patch set uploaded (by Genoveva Galarza; owner: Genoveva Galarza):
[mediawiki/extensions/WikiLambda@master] Replace custom selector with base AutocompleteSearchInput component

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

A similar component implemented in Vue by the mediasearch team to the LookupElement mentioned above is this one:

https://gerrit.wikimedia.org/r/plugins/gitiles/mediawiki/extensions/WikibaseMediaInfo/+/refs/heads/master/resources/mediasearch-vue/components/base/AutocompleteSearchInput.vue

This component is sufficiently generic to be treated as a base component, we can contemplate reusing this as an option. Also, consider taking a look into the base components of this project in order to reuse them if needed.

Rather than copying the component, it should eventually be added to WVUI or another library for reuse (ref T249840). Suggest noting that somewhere in the copied files ("TODO move this to a shared library")

Change 657641 had a related patch set uploaded (by Genoveva Galarza; owner: Genoveva Galarza):
[mediawiki/extensions/WikiLambda@master] Exclude selection of Z1, Z2, Z7 and Z9 from type selector

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

Change 656956 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] Add Autocomplete base component from wikisearch-vue and dependencies.

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

Change 656957 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] Replace custom selector with base AutocompleteSearchInput component

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

Change 657641 merged by jenkins-bot:
[mediawiki/extensions/WikiLambda@master] Exclude selection of Z1, Z2, Z7 and Z9 from type selector

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