Add experimentalAllowAnyInput option to allow submission of value n…

…ot in suggestions. Solves alphagov#156.

CHANGELOG.md

@@ -5,6 +5,7 @@
 ### Fixes
 
 - [Pull request #415: Make React bundle work server-side in a NodeJS environment](https://github.com/alphagov/accessible-autocomplete/pull/415)
+- Add `experimentalAllowAnyInput` option to allow submission of value not matching anything in suggestion list. Tests missing, must be added before creating pull request.
 
 ## 2.0.2 - 2020-01-30
 

README.md

@@ -278,6 +278,12 @@ Type: `Function`
 
 A function that gets passed an object with the property `className` (`{ className: '' }`) and should return a string of HTML or a (P)React element. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.
 
+#### `experimentalAllowAnyInput` (default: `false`)
+
+Type: `Boolean`
+
+The autocomplete will submit the entered value even if does not match a value in the list of suggestions when pressing Enter. This option has no effect if `autoselect` is `true` or if `enhanceSelectElement` is used.
+
 ### Internationalization
 
 #### `tNoResults` (default: `() => 'No results found'`)

package.json

@@ -19,7 +19,7 @@
   "scripts": {
     "build:css": "csso src/autocomplete.css -o dist/accessible-autocomplete.min.css",
     "build:js": "cross-env NODE_ENV=production webpack --progress --display-modules",
-    "build": "run-s 'build:js' 'build:css'",
+    "build": "run-s build:js build:css",
     "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
     "karma:dev": "cross-env NODE_ENV=test karma start test/karma.config.js",
     "karma": "npm run karma:dev -- --single-run",
@@ -69,7 +69,7 @@
     "karma-webpack": "^4.0.0-rc.2",
     "mocha": "^5.2.0",
     "npm-run-all": "^4.1.5",
-    "puppeteer": "^1.10.0",
+    "puppeteer": "^1.20.0",
     "replace-bundle-webpack-plugin": "^1.0.0",
     "sinon": "^6.3.5",
     "sinon-chai": "^3.2.0",

src/autocomplete.js

@@ -50,7 +50,8 @@ export default class Autocomplete extends Component {
     required: false,
     tNoResults: () => 'No results found',
     tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
-    dropdownArrow: DropdownArrowDown
+    dropdownArrow: DropdownArrowDown,
+    experimentalAllowAnyInput: false
   }
 
   elementReferences = {}
@@ -354,8 +355,15 @@ export default class Autocomplete extends Component {
 
   handleEnter (event) {
     if (this.state.menuOpen) {
-      event.preventDefault()
+      // If not using autoselect and not using enhanceSelectElement, check if the current
+      // value can be submitted without selecting an option from the open menu.
+      const allowAnyInput = !this.props.autoselect && !this.props.selectElement && this.props.experimentalAllowAnyInput
       const hasSelectedOption = this.state.selected >= 0
+
+      if (!allowAnyInput || hasSelectedOption) {
+        event.preventDefault()
+      }
+
       if (hasSelectedOption) {
         this.handleOptionClick(event, this.state.selected)
       }