Fix/highlight matched substrings (#509)

* fix(highlight-matched-substrings): highlight all matches coming from the Google API * fix(highlight-matched-substrings): find matched substrings in fixtures case insensitive * test(highlight-matched-substrings): add test for multiple matched substrings
ubilabs · Oct 2, 2023 · f3cb836 · f3cb836
1 parent bfd0517
commit f3cb836
Show file tree

Hide file tree

Showing 5 changed files with 49 additions and 33 deletions.
diff --git a/src/Geosuggest.tsx b/src/Geosuggest.tsx
@@ -372,10 +372,12 @@ export default class GeoSuggest extends React.Component<Props, State> {
           suggests.push({
             ...fixture,
             isFixture: true,
-            matchedSubstrings: {
-              length: userInput.length,
-              offset: fixture.label.indexOf(userInput)
-            },
+            matchedSubstrings: [
+              {
+                length: userInput.length,
+                offset: fixture.label.search(regex)
+              }
+            ],
             placeId: fixture.placeId || fixture.label
           });
         }
@@ -390,7 +392,7 @@ export default class GeoSuggest extends React.Component<Props, State> {
           label: this.props.getSuggestLabel
             ? this.props.getSuggestLabel(suggest)
             : '',
-          matchedSubstrings: suggest.matched_substrings[0],
+          matchedSubstrings: suggest.matched_substrings,
           placeId: suggest.place_id
         });
       }

diff --git a/src/suggest-item.tsx b/src/suggest-item.tsx
@@ -43,12 +43,8 @@ export default class SuggestItem extends React.PureComponent<Props, unknown> {
   /**
    * Makes a text bold
    */
-  makeBold(element: string, key: string): JSX.Element {
-    return (
-      <b className="geosuggest__item__matched-text" key={key}>
-        {element}
-      </b>
-    );
+  makeBold(element: string) {
+    return <b className="geosuggest__item__matched-text">{element}</b>;
   }
 
   /**
@@ -59,31 +55,30 @@ export default class SuggestItem extends React.PureComponent<Props, unknown> {
       return suggest.label;
     }
 
-    const start: number = suggest.matchedSubstrings.offset;
-    const length: number = suggest.matchedSubstrings.length;
-    const end: number = start + length;
-    const boldPart = this.makeBold(
-      suggest.label.substring(start, end),
-      suggest.label
-    );
+    const parts = [];
 
-    let pre = '';
-    let post = '';
+    let previousEnd = 0;
+
+    for (const {offset: start, length} of suggest.matchedSubstrings) {
+      // Add non-matching substring before and between matches
+      if (start > previousEnd) {
+        parts.push(suggest.label.substring(previousEnd, start));
+      }
 
-    if (start > 0) {
-      pre = suggest.label.slice(0, start);
+      // Add matching substring as bold text
+      const end = start + length;
+      const match = this.makeBold(suggest.label.substring(start, end));
+      parts.push(match);
+
+      previousEnd = end;
     }
-    if (end < suggest.label.length) {
-      post = suggest.label.slice(end);
+
+    // Add non-matching substring after matches
+    if (previousEnd < suggest.label.length) {
+      parts.push(suggest.label.substring(previousEnd));
     }
 
-    return (
-      <span>
-        {pre}
-        {boldPart}
-        {post}
-      </span>
-    );
+    return <span>{parts}</span>;
   }
 
   /**

diff --git a/src/types/suggest.ts b/src/types/suggest.ts
@@ -13,6 +13,6 @@ export interface Suggest {
   readonly matchedSubstrings?: {
     offset: number;
     length: number;
-  };
+  }[];
   readonly className?: string;
 }
diff --git a/test/Geosuggest_spec.tsx b/test/Geosuggest_spec.tsx
@@ -870,13 +870,28 @@ describe('Component: Geosuggest', () => {
       expect(matchedText).to.have.lengthOf.at.least(1);
     });
 
-    it('should render a match with minial nodes', () => {
+    it('should highlight multiple matched substrings', () => {
       const geoSuggestInput = component.container.querySelector(
         '.geosuggest__input'
       ) as HTMLInputElement;
       fireEvent.change(geoSuggestInput, {target: {value: 'Newa'}});
       geoSuggestInput.focus();
 
+      const geoSuggestItems =
+        component.container.getElementsByClassName('geosuggest__item');
+      const matchedText = geoSuggestItems[0].getElementsByClassName(
+        'geosuggest__item__matched-text'
+      );
+      expect(matchedText).to.have.lengthOf(2);
+    });
+
+    it('should render a match with minimal nodes', () => {
+      const geoSuggestInput = component.container.querySelector(
+        '.geosuggest__input'
+      ) as HTMLInputElement;
+      fireEvent.change(geoSuggestInput, {target: {value: 'New Jersey'}});
+      geoSuggestInput.focus();
+
       const geoSuggestItems =
         component.container.getElementsByClassName('geosuggest__item');
       expect(geoSuggestItems).to.have.lengthOf(1);

diff --git a/test/fixtures/predictions.ts b/test/fixtures/predictions.ts
@@ -149,6 +149,10 @@ export default function predictions(): google.maps.places.AutocompletePrediction
         {
           length: 2,
           offset: 0
+        },
+        {
+          length: 2,
+          offset: 8
         }
       ],
       place_id: 'ChIJHQ6aMnBTwokRc-T-3CrcvOE',