Page MenuHomePhabricator

Switch WikiLambda from copied MediaSearch Lookup component to Codex Lookup
Closed, ResolvedPublic

Description

Replace AutocompleteSearchInput with Lookup

The Codex component library contains a Lookup component that is analogous to the old copy-pasted AutocompleteSearchInput component (a Vue 2 component developed for MediaSearch originally). This component is a better match than the Codex TypeaheadSearch component because the latter displays a menu of *links*, where WikiLambda needs to display a menu of *values*.

Screenshot

Screen Shot 2022-03-16 at 10.52.25 AM.png (808×1 px, 112 KB)

Questions

Are there any disparities in design or functionality that need to be addressed?

Event Timeline

Hey @JKieserman - it's possible that the Codex component you want to use here is Lookup, rather than TypeaheadSearch.

They're similar components, but TypeaheadSearch is much more opinionated in a few ways:

  • It contains a <form> with a submit button
  • The menu items presented as autocomplete suggestions are meant to be links to other pages. TypeaheadSearch expects the items provided via the menuItem prop to follow the SearchResult type, which requires a url for the menu item.
  • Tracking of the selected item's value is different: with Lookup, you use v-model to bind the value of the selected item, so you're always tracking that value in the parent component. With TypeaheadSearch, clicking on a menu item typically takes you to another page, so the focus is on emitting events on click or on form submit, for the sake of analytics, rather than keeping track of the selected value.

Essentially, Lookup is designed for selection of items to be used in a form or otherwise on the same page, whereas TypeaheadSearch is designed to present links that will take the user off the page.

By the way, we're in the process of changing the way menu items work, and the result will be that you will have many more built-in options for menu items for any component with a menu. So, you'll be able to easily add things like descriptions, thumbnails, and icons to the menu items within a Lookup component.

Happy to chat about this more together so we can figure out what's the best component here! We've also considered moving TypeaheadSearch to a different location on the documentation site to indicate that it's more of an "app" meant for a specific use case, vs. a more flexible and basic component like Lookup.

JKieserman renamed this task from Switch WikiLambda from copied MediaSearch AutoCompleteSearch component to using Codex TypeaheadSearch to Switch WikiLambda from copied MediaSearch Lookup component to using Codex TypeaheadSearch.Mar 11 2022, 4:50 PM

Change 770528 had a related patch set uploaded (by Jkieserman; author: Jkieserman):

[mediawiki/extensions/WikiLambda@master] Replace SDAutocompleteSearchInput with Codex Lookup

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

egardner renamed this task from Switch WikiLambda from copied MediaSearch Lookup component to using Codex TypeaheadSearch to Switch WikiLambda from copied MediaSearch Lookup component to Codex Lookup.Mar 16 2022, 5:51 PM

Change 770528 merged by jenkins-bot:

[mediawiki/extensions/WikiLambda@master] Replace SDAutocompleteSearchInput with Codex Lookup

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