feat(combobox): highlight filter matches

[jcfranco]

Related Issue: #9026

Summary

Adds highlighting to combobox for the first occurrence of an item's label that matches the filter text.

Next steps

For consistency, we can update list with similar functionality.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

[driskull]

Looking good! 🫘

[driskull]

not sure if this is helpful, but this is what we have for the maps sdk.

const regexContainsHTML = /<[a-z/][\s\S]*>/i;

const boldKeywords = (text: string, keywords: string): string => {
  const escapedKeywords = escapeRegExpString(keywords);
  const splitKeywords = escapedKeywords.split(/\s/);
  const pattern = new RegExp(`(${splitKeywords.join("|")})`, "gi");
  return text.replace(pattern, (match) => `<strong>${match}</strong>`);
};

... later

return regexContainsHTML.test(text) ? text : boldKeywords(text, searchTerm);

[driskull]

We may want to follow the same logic since Search widget would likely want the same bold experience.

[jcfranco]

Great suggestion. Will update!

[jcfranco]

Actually, could we discuss this in a follow-up issue? There are some differences in implementation and UI/UX that I think need to be considered first, such as:

• combobox filtering is immediate, search has minimum chars before showing matches
• combobox highlights the first occurrence, search highlights all matches
• combobox items do not support HTML as content, search does

There could be others, but these are the ones I noticed.

[jcfranco]

I did add the regexp char escape. 🏃🔠 Thanks for the bringing that up!

[driskull]

combobox filtering is immediate, search has minimum chars before showing matches

I think this could be handled when we support combobox with dynamic data

combobox highlights the first occurrence, search highlights all matches

Shouldn't combobox highlight all matches? Why does it only highlight the first occurrence?

combobox items do not support HTML as content, search does

Yes, we can ignore this one. It doesn't do regex if there is HTML involved.

[jcfranco]

Shouldn't combobox highlight all matches? Why does it only highlight the first occurrence?

This closely matches the current filtering behavior. It returns on the first match. I also did this to minimize elements updated as the user types since we don't have virtualization alternatives and showing all matches < 3 chars seems unnecessary.

FWIW, I'm fine revisiting ☝️, but I would like design to give a pass before doing so. It would be an incremental enhancement this way vs rolling it back.

[driskull]

Yeah sounds good.

[jcfranco]

@driskull I think I've addressed all items besides the highlighting behavior discussion. Would you mind reviewing again?

[driskull]

👍 Looks good!