From ff2def024e41e14273af24db959c180f183d5101 Mon Sep 17 00:00:00 2001
From: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
Date: Thu, 4 Jan 2024 16:20:25 +0100
Subject: [PATCH] Merge pull request #16363 from overleaf/rd-bold-characters

[web] Bold matched characters of institutions for onboarding data collection

GitOrigin-RevId: 386866c0917608e6091b641f1b0d67182a925dcf
---
 .../settings/components/emails/downshift-input.tsx | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
index 62c6cd42c2..a737af5649 100644
--- a/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
+++ b/services/web/frontend/js/features/settings/components/emails/downshift-input.tsx
@@ -1,8 +1,10 @@
 import { useState, useEffect, forwardRef } from 'react'
 import { useCombobox } from 'downshift'
 import classnames from 'classnames'
+import { escapeRegExp } from 'lodash'
 
 type DownshiftInputProps = {
+  highlightMatches?: boolean
   items: string[]
   itemsTitle?: string
   inputValue: string
@@ -19,6 +21,7 @@ const filterItemsByInputValue = (
 ) => items.filter(item => item.toLowerCase().includes(inputValue.toLowerCase()))
 
 function Downshift({
+  highlightMatches = false,
   items,
   itemsTitle,
   inputValue,
@@ -63,6 +66,15 @@ function Downshift({
     },
   })
 
+  const highlightMatchedCharacters = (item: string, query: string) => {
+    if (!query || !highlightMatches) return item
+    const regex = new RegExp(`(${escapeRegExp(query)})`, 'gi')
+    const parts = item.split(regex)
+    return parts.map((part, index) =>
+      regex.test(part) ? <strong key={`${part}-${index}`}>{part}</strong> : part
+    )
+  }
+
   return (
     <div
       className={classnames(
@@ -116,7 +128,7 @@ function Downshift({
               })}
             >
               <span className="ui-select-choices-row-inner">
-                <span>{item}</span>
+                <span>{highlightMatchedCharacters(item, inputValue)}</span>
               </span>
             </div>
           </li>