Page MenuHomePhabricator

MenteeOverview: Fix autocompletion search
Closed, ResolvedPublic

Description

The highlighting of the search query is breaking the displayed results text when looking up mentees by name. See example: https://imgur.com/a/jWLbnzG

Steps to reproduce:

  1. Navigate to https://en.wikipedia.beta.wmflabs.org/wiki/Special:MentorDashboard
  2. Use the lookup for mentees introducing a query that matches a mentee username except for the initial capital letter

What happens?

The displayed names have stripped parts and are not legible

What should happen?

The displayed names should be legible regardless of if the search query matched part is highlighted or not.

Screenshot 2022-07-05 at 18.59.11.png (1×1 px, 194 KB)

In the example above the API returns 2 matching names: "ScrollTest" and "ScrollTest2".

Event Timeline

kostajh triaged this task as High priority.Jul 5 2022, 8:23 AM

Change 811334 had a related patch set uploaded (by Sergio Gimeno; author: Sergio Gimeno):

[mediawiki/extensions/GrowthExperiments@master] Mentee overview(Vue): remove custom menu item template

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

The source of the issue was having used a custom menu-item slot template and not properly handling case sensitivity there when trying to split in chunks and highlight the match part. I have pushed a patch. No blame to Codex library, my bad for early diagnosing the source was in the CdxLookup component.

However when I tried to make use of Codex's API for an item with search query found that the demo for highlighting is not making bold the matched part from the search query but the right-side part of the match. Maybe someone from Design-Systems-Team can help clarify whether that's an expected behavior or a defect because I can see how the font is specifically set to "normal" for the matched part in SearchResultTitle#66 and it could make sense if the default is bold labels. So I'm not sure here.
Another impediment to use this feature with Codex is that is not very clear to how to propagate menuConfig props from the CdxLookup component down to "menu items." { boldLabel: true } worked well but I tried passing { highlightQuery: true } in the menuConfig and on each menuItem and none seemed to enable the feature. cc @AnneT

Sgs changed the task status from Open to In Progress.Jul 5 2022, 4:48 PM
Sgs updated the task description. (Show Details)
Sgs updated the task description. (Show Details)

However when I tried to make use of Codex's API for an item with search query found that the demo for highlighting is not making bold the matched part from the search query but the right-side part of the match. Maybe someone from Design-Systems-Team can help clarify whether that's an expected behavior or a defect because I can see how the font is specifically set to "normal" for the matched part in SearchResultTitle#66 and it could make sense if the default is bold labels. So I'm not sure here.

This is intentional and comes from the original TypeaheadSearch design. I believe the idea behind this design decision was to highlight (bold) the next part of the title that the use might type, rather than highlighting the part that they had already typed. That said, you're not the first person to indicate that this is counterintuitive, and I'll pass this on to the design team, and update that demo to add some text explaining that this is the intended behavior.

Another impediment to use this feature with Codex is that is not very clear to how to propagate menuConfig props from the CdxLookup component down to "menu items." { boldLabel: true } worked well but I tried passing { highlightQuery: true } in the menuConfig and on each menuItem and none seemed to enable the feature. cc @AnneT

This is happening because boldLabel is part of the MenuConfig type, while highlightQuery is not. We have only implemented highlightQuery in TypeaheadSearch, not in other components that contain a Menu. I've opened T312150 to determine which other components should support highlightQuery (i.e. just Lookup or other components that use a Menu), and will also recommend that we prioritize T300154 in order to prevent confusion in the future.

Change 811334 merged by jenkins-bot:

[mediawiki/extensions/GrowthExperiments@master] Mentee overview(Vue): remove custom menu item template

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

This is intentional and comes from the original TypeaheadSearch design. I believe the idea behind this design decision was to highlight (bold) the next part of the title that the use might type, rather than highlighting the part that they had already typed. That said, you're not the first person to indicate that this is counterintuitive, and I'll pass this on to the design team, and update that demo to add some text explaining that this is the intended behavior.

Thanks for clarifying, yes, it would be great to understand what's the argument backing the design decision.

This is happening because boldLabel is part of the MenuConfig type, while highlightQuery is not. We have only implemented highlightQuery in TypeaheadSearch, not in other components that contain a Menu. I've opened T312150 to determine which other components should support highlightQuery (i.e. just Lookup or other components that use a Menu), and will also recommend that we prioritize T300154 in order to prevent confusion in the future.

Alright. It's not a requirement for us at the moment to use highlighting in the lookup component. Thank you for the clarifications!

This task does not need specific QA, it can be tested as part of its parent T300532: Migration of mentee overview to Vue