Fix onChange/onInput event handler

I naively changed this from an `onInput` to an `onChange` when I saw that it "worked fine" in Preact. However, it wasn't working in reality; the `pollInputElement` handler was making it look like it. We can't use `onInput` in both Preact and React because it fails in React on IE10.
alphagov · May 23, 2017 · b1a31a3 · b1a31a3
1 parent d8c95d3
commit b1a31a3
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 41 deletions.
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -1,6 +1,9 @@
 import { createElement, Component } from 'preact' /** @jsx createElement */
 import Status from './status'
 
+const IS_PREACT = process.env.COMPONENT_LIBRARY === 'PREACT'
+const IS_REACT = process.env.COMPONENT_LIBRARY === 'REACT'
+
 const keyCodes = {
   13: 'enter',
   27: 'escape',
@@ -30,6 +33,12 @@ function isPrintableKeyCode (keyCode) {
   )
 }
 
+// Preact does not implement onChange on inputs, but React does.
+function onChangeCrossLibrary (handler) {
+  if (IS_PREACT) { return { onInput: handler } }
+  if (IS_REACT) { return { onChange: handler } }
+}
+
 export default class Autocomplete extends Component {
   static defaultProps = {
     autoselect: false,
@@ -385,7 +394,7 @@ export default class Autocomplete extends Component {
           className={`${inputClassName}${inputModFocused}`}
           id={id}
           onBlur={this.handleInputBlur}
-          onChange={this.handleInputChange}
+          {...onChangeCrossLibrary(this.handleInputChange)}
           onFocus={this.handleInputFocus}
           name={name}
           placeholder={placeholder}

diff --git a/webpack.config.babel.js b/webpack.config.babel.js
@@ -5,6 +5,47 @@ import V8LazyParseWebpackPlugin from 'v8-lazy-parse-webpack-plugin'
 import CopyWebpackPlugin from 'copy-webpack-plugin'
 const ENV = process.env.NODE_ENV || 'development'
 
+const plugins = [
+  new webpack.NoEmitOnErrorsPlugin(),
+  new webpack.DefinePlugin({
+    'process.env.NODE_ENV': JSON.stringify(ENV)
+  })
+]
+
+const productionPlugins = [
+  new V8LazyParseWebpackPlugin(),
+  new webpack.optimize.UglifyJsPlugin({
+    output: {
+      comments: false
+    },
+    compress: {
+      warnings: false,
+      conditionals: true,
+      unused: true,
+      comparisons: true,
+      sequences: true,
+      dead_code: true,
+      evaluate: true,
+      if_return: true,
+      join_vars: true,
+      negate_iife: false
+    }
+  }),
+
+  // strip out babel-helper invariant checks
+  new ReplacePlugin([{
+    // this is actually the property name https://github.com/kimhou/replace-bundle-webpack-plugin/issues/1
+    partten: /throw\s+(new\s+)?[a-zA-Z]+Error\s*\(/g,
+    replacement: () => 'return;('
+  }])
+]
+
+const developmentPlugins = [
+  new CopyWebpackPlugin([
+    { from: './autocomplete.css', to: 'accessible-autocomplete.min.css' }
+  ])
+]
+
 const config = {
   context: path.resolve(__dirname, 'src'),
 
@@ -32,43 +73,6 @@ const config = {
     ]
   },
 
-  plugins: ([
-    new webpack.NoEmitOnErrorsPlugin(),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(ENV)
-    })
-  ]).concat(ENV === 'production' ? [
-    new V8LazyParseWebpackPlugin(),
-    new webpack.optimize.UglifyJsPlugin({
-      output: {
-        comments: false
-      },
-      compress: {
-        warnings: false,
-        conditionals: true,
-        unused: true,
-        comparisons: true,
-        sequences: true,
-        dead_code: true,
-        evaluate: true,
-        if_return: true,
-        join_vars: true,
-        negate_iife: false
-      }
-    }),
-
-    // strip out babel-helper invariant checks
-    new ReplacePlugin([{
-      // this is actually the property name https://github.com/kimhou/replace-bundle-webpack-plugin/issues/1
-      partten: /throw\s+(new\s+)?[a-zA-Z]+Error\s*\(/g,
-      replacement: () => 'return;('
-    }])
-  ] : [
-    new CopyWebpackPlugin([
-      { from: './autocomplete.css', to: 'accessible-autocomplete.min.css' }
-    ])
-  ]),
-
   stats: { colors: true },
 
   node: {
@@ -103,7 +107,15 @@ const bundleStandalone = {
     filename: 'accessible-autocomplete.min.js',
     library: 'accessibleAutocomplete',
     libraryTarget: 'umd'
-  }
+  },
+  plugins: plugins
+    .concat([new webpack.DefinePlugin({
+      'process.env.COMPONENT_LIBRARY': '"PREACT"'
+    })])
+    .concat(ENV === 'production'
+      ? productionPlugins
+      : developmentPlugins
+    )
 }
 
 const bundlePreact = {
@@ -123,7 +135,15 @@ const bundlePreact = {
       commonjs2: 'preact',
       root: 'preact'
     }
-  }
+  },
+  plugins: plugins
+    .concat([new webpack.DefinePlugin({
+      'process.env.COMPONENT_LIBRARY': '"PREACT"'
+    })])
+    .concat(ENV === 'production'
+      ? productionPlugins
+      : developmentPlugins
+    )
 }
 
 const bundleReact = {
@@ -143,7 +163,15 @@ const bundleReact = {
       commonjs2: 'react',
       root: 'React'
     }
-  }
+  },
+  plugins: plugins
+    .concat([new webpack.DefinePlugin({
+      'process.env.COMPONENT_LIBRARY': '"REACT"'
+    })])
+    .concat(ENV === 'production'
+      ? productionPlugins
+      : developmentPlugins
+    )
 }
 
 module.exports = [