Improve label formatting

ubilabs · Jul 12, 2017 · e652323 · e652323
1 parent 882099f
commit e652323
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 3 deletions.
diff --git a/src/suggest-item.jsx b/src/suggest-item.jsx
@@ -33,13 +33,20 @@ export default class SuggestItem extends React.Component {
     const start = suggest.matchedSubstrings.offset,
       length = suggest.matchedSubstrings.length,
       end = start + length,
-      split = suggest.label.split(''),
       boldPart = this.makeBold(suggest.label.substring(start, end),
         suggest.label);
 
-    split.splice(start, length, boldPart);
+    let pre = '',
+      post = '';
 
-    return <span>{split}</span>;
+    if (start > 0) {
+      pre = suggest.label.slice(0, start);
+    }
+    if (end < suggest.label.length) {
+      post = suggest.label.slice(end);
+    }
+
+    return <span>{pre}{boldPart}{post}</span>;
   }
 
   /**

diff --git a/test/Geosuggest_spec.jsx b/test/Geosuggest_spec.jsx
@@ -593,4 +593,22 @@ describe('Component: Geosuggest', () => {
       expect(matchedText).to.have.length.of.at.least(1); // eslint-disable-line max-len
     });
   });
+  describe('with highLightMatch', () => { // eslint-disable-line max-len
+    const props = {
+      suggestsClassName: 'suggests-class'
+    };
+
+    beforeEach(() => render(props));
+    it('should render a match with minial nodes', () => { // eslint-disable-line max-len
+      const geoSuggestInput = TestUtils.findRenderedDOMComponentWithClass(component, 'geosuggest__input'); // eslint-disable-line max-len
+      geoSuggestInput.value = 'Newa';
+      TestUtils.Simulate.change(geoSuggestInput);
+      TestUtils.Simulate.focus(geoSuggestInput);
+
+      const geoSuggestItems = TestUtils.scryRenderedDOMComponentsWithClass(component, 'geosuggest__item'); // eslint-disable-line max-len, one-var
+      expect(geoSuggestItems).to.have.length.of(1);
+      expect(geoSuggestItems[0].childNodes).to.have.length.of(1);
+      expect(geoSuggestItems[0].childNodes[0].childNodes).to.have.length.of(6);
+    });
+  });
 });