Change Details

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 * Looks like CategoryLookupInputWidget [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.categories.overlays/CategoryLookupInputWidget.js#L93 | passes as string containing HTML ]] which is [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.startup/search/SearchGateway.js#L78 | formatted by SearchGateway's _highlightSearchTerm method ]] to OO.ui.MenuOptionWidget's label option and that gets escaped. To immediately address the problem, we may want to pass `new OO.ui.HtmlSnippet( value.displayTitle )` instead * 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}

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 * Looks like CategoryLookupInputWidget [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.categories.overlays/CategoryLookupInputWidget.js#L93 | passes as string containing HTML ]] which is [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.startup/search/SearchGateway.js#L78 | formatted by SearchGateway's _highlightSearchTerm method ]] to OO.ui.MenuOptionWidget's label option and that gets escaped. To immediately address the problem, we may want to pass `new OO.ui.HtmlSnippet( value.displayTitle )` instead * 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.

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 * Looks like CategoryLookupInputWidget [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.categories.overlays/CategoryLookupInputWidget.js#L93 | passes as string containing HTML ]] which is [[ https://github.com/wikimedia/mediawiki-extensions-MobileFrontend/blob/6dfa85ecbd954309c1a30b31e47dee2bbdae6a4a/src/mobile.startup/search/SearchGateway.js#L78 | formatted by SearchGateway's _highlightSearchTerm method ]] to OO.ui.MenuOptionWidget's label option and that gets escaped. To immediately address the problem, we may want to pass `new OO.ui.HtmlSnippet( value.displayTitle )` instead * 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.