Show suggestions on input focus

.editorconfig

@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+end_of_line = lf
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true

dist/Autosuggest.js

@@ -53,6 +53,7 @@ var Autosuggest = (function (_Component) {
     };
     this.suggestionsFn = (0, _debounce2['default'])(props.suggestions, 100);
     this.onChange = props.inputAttributes.onChange || function () {};
+    this.onFocus = props.inputAttributes.onFocus || function () {};
     this.onBlur = props.inputAttributes.onBlur || function () {};
     this.lastSuggestionsInputValue = null; // Helps to deal with delayed requests
     this.justUnfocused = false; // Helps to avoid calling onSuggestionUnfocused
@@ -62,6 +63,7 @@ var Autosuggest = (function (_Component) {
 
     this.onInputChange = this.onInputChange.bind(this);
     this.onInputKeyDown = this.onInputKeyDown.bind(this);
+    this.onInputFocus = this.onInputFocus.bind(this);
     this.onInputBlur = this.onInputBlur.bind(this);
   }
 
@@ -359,6 +361,12 @@ var Autosuggest = (function (_Component) {
           break;
       }
     }
+  }, {
+    key: 'onInputFocus',
+    value: function onInputFocus(event) {
+      this.showSuggestions(this.state.value);
+      this.onFocus(event);
+    }
   }, {
     key: 'onInputBlur',
     value: function onInputBlur(event) {
@@ -550,6 +558,7 @@ var Autosuggest = (function (_Component) {
           ref: 'input',
           onChange: this.onInputChange,
           onKeyDown: this.onInputKeyDown,
+          onFocus: this.onInputFocus,
           onBlur: this.onInputBlur })),
         this.renderSuggestions()
       );
@@ -590,4 +599,4 @@ var Autosuggest = (function (_Component) {
 })(_react.Component);
 
 exports['default'] = Autosuggest;
-module.exports = exports['default'];
+module.exports = exports['default'];

dist/sectionIterator.js

@@ -114,4 +114,4 @@ exports['default'] = {
   prev: prev,
   isLast: isLast
 };
-module.exports = exports['default'];
+module.exports = exports['default'];

dist/standalone/autosuggest.js

@@ -109,6 +109,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	    };
 	    this.suggestionsFn = (0, _debounce2['default'])(props.suggestions, 100);
 	    this.onChange = props.inputAttributes.onChange || function () {};
+	    this.onFocus = props.inputAttributes.onFocus || function () {};
 	    this.onBlur = props.inputAttributes.onBlur || function () {};
 	    this.lastSuggestionsInputValue = null; // Helps to deal with delayed requests
 	    this.justUnfocused = false; // Helps to avoid calling onSuggestionUnfocused
@@ -118,6 +119,7 @@ return /******/ (function(modules) { // webpackBootstrap
 
 	    this.onInputChange = this.onInputChange.bind(this);
 	    this.onInputKeyDown = this.onInputKeyDown.bind(this);
+	    this.onInputFocus = this.onInputFocus.bind(this);
 	    this.onInputBlur = this.onInputBlur.bind(this);
 	  }
 
@@ -415,6 +417,12 @@ return /******/ (function(modules) { // webpackBootstrap
 	          break;
 	      }
 	    }
+	  }, {
+	    key: 'onInputFocus',
+	    value: function onInputFocus(event) {
+	      this.showSuggestions(this.state.value);
+	      this.onFocus(event);
+	    }
 	  }, {
 	    key: 'onInputBlur',
 	    value: function onInputBlur(event) {
@@ -606,6 +614,7 @@ return /******/ (function(modules) { // webpackBootstrap
 	          ref: 'input',
 	          onChange: this.onInputChange,
 	          onKeyDown: this.onInputKeyDown,
+	          onFocus: this.onInputFocus,
 	          onBlur: this.onInputBlur })),
 	        this.renderSuggestions()
 	      );

examples/dist/app.js

@@ -54,7 +54,7 @@
 /******/ 	
 /******/ 	
 /******/ 	var hotApplyOnUpdate = true;
-/******/ 	var hotCurrentHash = "645c3c4c371526351dbb"; // eslint-disable-line no-unused-vars
+/******/ 	var hotCurrentHash = "12c93abb9c10e199fbba"; // eslint-disable-line no-unused-vars
 /******/ 	var hotCurrentModuleData = {};
 /******/ 	var hotCurrentParents = []; // eslint-disable-line no-unused-vars
 /******/ 	
@@ -29396,6 +29396,7 @@
 	    };
 	    this.suggestionsFn = (0, _debounce2['default'])(props.suggestions, 100);
 	    this.onChange = props.inputAttributes.onChange || function () {};
+	    this.onFocus = props.inputAttributes.onFocus || function () {};
 	    this.onBlur = props.inputAttributes.onBlur || function () {};
 	    this.lastSuggestionsInputValue = null; // Helps to deal with delayed requests
 	    this.justUnfocused = false; // Helps to avoid calling onSuggestionUnfocused
@@ -29405,6 +29406,7 @@
 
 	    this.onInputChange = this.onInputChange.bind(this);
 	    this.onInputKeyDown = this.onInputKeyDown.bind(this);
+	    this.onInputFocus = this.onInputFocus.bind(this);
 	    this.onInputBlur = this.onInputBlur.bind(this);
 	  }
 
@@ -29702,6 +29704,12 @@
 	          break;
 	      }
 	    }
+	  }, {
+	    key: 'onInputFocus',
+	    value: function onInputFocus(event) {
+	      this.showSuggestions(this.state.value);
+	      this.onFocus(event);
+	    }
 	  }, {
 	    key: 'onInputBlur',
 	    value: function onInputBlur(event) {
@@ -29893,6 +29901,7 @@
 	          ref: 'input',
 	          onChange: this.onInputChange,
 	          onKeyDown: this.onInputKeyDown,
+	          onFocus: this.onInputFocus,
 	          onBlur: this.onInputBlur })),
 	        this.renderSuggestions()
 	      );

mocha.opts

@@ -0,0 +1 @@
+--compilers js:babel/register

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-autosuggest",
-  "version": "1.16.0",
+  "version": "1.16.1",
   "description": "WAI-ARIA compliant React autosuggest component",
   "main": "dist/Autosuggest.js",
   "repository": {
@@ -15,8 +15,8 @@
   "scripts": {
     "start": "node server",
     "lint": "eslint src/sectionIterator.js src/Autosuggest.js examples/src",
-    "test": "mocha src/tests/index.js --compilers js:babel/register",
-    "dist": "babel src/sectionIterator.js -o dist/sectionIterator.js && babel src/Autosuggest.js -o dist/Autosuggest.js",
+    "test": "mocha test/index.js --opts mocha.opts",
+    "dist": "babel src -d dist",
     "examples-dist": "webpack --config webpack.dev.config.js",
     "standalone": "webpack --config webpack.standalone.config.js",
     "build": "npm run lint && npm test && npm run dist && npm run examples-dist && npm run standalone",

src/Autosuggest.js

@@ -45,6 +45,7 @@ export default class Autosuggest extends Component { // eslint-disable-line no-s
     };
     this.suggestionsFn = debounce(props.suggestions, 100);
     this.onChange = props.inputAttributes.onChange || (() => {});
+    this.onFocus = props.inputAttributes.onFocus || (() => {});
     this.onBlur = props.inputAttributes.onBlur || (() => {});
     this.lastSuggestionsInputValue = null; // Helps to deal with delayed requests
     this.justUnfocused = false; // Helps to avoid calling onSuggestionUnfocused
@@ -54,6 +55,7 @@ export default class Autosuggest extends Component { // eslint-disable-line no-s
 
     this.onInputChange = ::this.onInputChange;
     this.onInputKeyDown = ::this.onInputKeyDown;
+    this.onInputFocus = ::this.onInputFocus;
     this.onInputBlur = ::this.onInputBlur;
   }
 
@@ -330,6 +332,11 @@ export default class Autosuggest extends Component { // eslint-disable-line no-s
     }
   }
 
+  onInputFocus(event) {
+    this.showSuggestions(this.state.value);
+    this.onFocus(event);
+  }
+
   onInputBlur(event) {
     this.onSuggestionUnfocused();
 
@@ -504,6 +511,7 @@ export default class Autosuggest extends Component { // eslint-disable-line no-s
                ref="input"
                onChange={this.onInputChange}
                onKeyDown={this.onInputKeyDown}
+               onFocus={this.onInputFocus}
                onBlur={this.onInputBlur} />
         {this.renderSuggestions()}
       </div>

src/tests/Autosuggest.js → test/Autosuggest.js

@@ -9,7 +9,7 @@ import SyntheticEvent from 'react/lib/SyntheticEvent';
 
 chai.use(sinonChai);
 
-const Autosuggest = proxyquire('../Autosuggest', { debounce: fn => fn });
+const Autosuggest = proxyquire('../src/Autosuggest', { debounce: fn => fn });
 const TestUtils = React.addons.TestUtils;
 const Simulate = TestUtils.Simulate;
 const SimulateNative = TestUtils.SimulateNative;
@@ -122,6 +122,10 @@ function clickOutside() {
   Simulate.blur(input);
 }
 
+function focusOnInput() {
+  Simulate.focus(input);
+}
+
 function clickEscape() {
   Simulate.keyDown(input, { keyCode: 27 });
 }
@@ -281,7 +285,7 @@ describe('Autosuggest', () => {
         expectSuggestions(['Nunawading']);
       });
 
-      it('should show not suggestions when no matches exist', () => {
+      it('should not show suggestions when no matches exist', () => {
         setInputValue('a');
         expectSuggestions([]);
       });
@@ -298,6 +302,14 @@ describe('Autosuggest', () => {
         clickEscape();
         expectInputValue('');
       });
+
+      it('should show suggestions when when input is focussed', () => {
+        setInputValue('m');
+        clickOutside();
+        expectSuggestions([]);
+        focusOnInput();
+        expectSuggestions(['Mill Park', 'Mordialloc']);
+      });
     });
 
     describe('with object suggestions', () => {

src/tests/sectionIterator.js → test/sectionIterator.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import { expect } from 'chai';
-import sectionIterator from '../sectionIterator.js';
+import sectionIterator from '../src/sectionIterator.js';
 
 describe('sectionIterator', () => {
   describe('with no sections', () => {