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-System-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

In T311992#8052604, @Sgs wrote:

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-System-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

In T311992#8053070, @AnneT wrote:

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!