To reproduce:
- Enable beta features in mobile web in the English Wikipedia.
- Go to https://en.m.wikipedia.org/wiki/Dada_Masiti (or any other article)
- Scroll down.
- Click "Categories".
- Click "Add to category".
- Click the search box. Type: `Categ`
Observe: "<strong>" and "</strong>" tags are visible in autocompletions.
{F29310507 size=full}
This doesn't happen if you type the category name without the "Category" namespace. This happens on desktop and on mobile phone.
== Developer Notes
* CategoryLookupInputWidget [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.categories.overlays/CategoryLookupInputWidget.js#L93 | passes a string containing HTML ]] to OO.ui.MenuOptionWidget's label option and that gets escaped. The HTML in this string originates from [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.startup/search/SearchGateway.js#L78 | SearchGateway's _highlightSearchTerm method ]]. To immediately address the problem, we may want to pass `new OO.ui.HtmlSnippet( value.displayTitle )` instead of this plain string.
* The formatting done by the ([[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.startup/search/SearchGateway.js#L78 | _highlightSearchTerm ]]) may need to be adjusted because it currently doesn't do fuzzy formatting i.e. If there is a "Foo" category, it will only apply the bold text if the user begins the search with "Categ" (letters from "Category") but not if the user only types "Fo" (letters from "Foo"). I've attached a video which demonstrates this with the "Trees" category.
{F29343041}
Acceptance Criteria
================
[] Replace the "<bold>" tags with actual bold formatting in the Categories search results
[] If a substring matches the user's search input, that substring is bolded regardless if the substring is at the beginning or not. If this adds too much scope to this ticket, consider breaking this into a new ticket that can be analyzed/prioritized on its own.