Merge pull request ubilabs#246 from ubilabs/feat/blur

feat: add blur()

Author: yfr

README.md

@@ -254,6 +254,9 @@ These functions are accessible by setting "ref" on the component (see example be
 #### focus()
 Call `focus` to focus on the element. The suggest list will be expanded with the current suggestions.
 
+#### blur()
+Call `blur` to blur (unfocus) the element. The suggest list will be closed.
+
 #### update(value)
 It is possible to update the value of the input contained within the GeoSuggest component by calling the `update` function with a new desired `value` of the type String.
 

src/Geosuggest.jsx

@@ -143,6 +143,13 @@ class Geosuggest extends React.Component {
     this.refs.input.focus();
   }
 
+  /**
+   * Blur the input
+   */
+  blur() {
+    this.refs.input.blur();
+  }
+
   /**
    * Update the value of the user input
    * @param {String} userInput the new value of the user input

src/input.jsx

@@ -91,6 +91,13 @@ class Input extends React.Component {
     this.refs.input.focus();
   }
 
+  /**
+   * Blur the input
+   */
+  blur() {
+    this.refs.input.blur();
+  }
+
   /**
    * Render the view
    * @return {Function} The React element to render

test/Geosuggest_spec.jsx

@@ -244,6 +244,13 @@ describe('Component: Geosuggest', () => {
       expect(document.activeElement.classList.contains('geosuggest__input')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
     });
 
+    it('should not have the focus after calling `blur`', () => {
+      component.focus();
+      expect(document.activeElement.classList.contains('geosuggest__input')).to.be.true; // eslint-disable-line no-unused-expressions, max-len
+      component.blur();
+      expect(document.activeElement.classList.contains('geosuggest__input')).to.be.false; // eslint-disable-line no-unused-expressions, max-len
+    });
+
     it('should add external inline `style` to input component', () => { // eslint-disable-line max-len
       const geoSuggestInput = TestUtils.findRenderedDOMComponentWithClass(component, 'geosuggest__input'); // eslint-disable-line max-len
       expect(geoSuggestInput.style['border-color']).to.be.equal('#000');