fix(Input): pass all handlers to the html input (#886)

Author: levithomason

src/elements/Input/Input.js

@@ -17,29 +17,37 @@ import Icon from '../../elements/Icon'
 import Label from '../../elements/Label'
 
 export const htmlInputPropNames = [
-  // React
-  'selected',
-  'defaultValue',
-  'defaultChecked',
-
-  // Limited HTML props
-  'autoComplete',
-  'autoFocus',
-  'checked',
-  // 'disabled', do not pass (duplicates SUI CSS opacity rule)
-  'form',
-  'max',
-  'maxLength',
-  'min',
-  'name',
-  'onChange',
-  'pattern',
-  'placeholder',
-  'readOnly',
-  'required',
-  'step',
-  'type',
-  'value',
+  // REACT
+  'selected', 'defaultValue', 'defaultChecked',
+
+  // LIMITED HTML PROPS
+  'autoComplete', 'autoFocus', 'checked', 'form', 'max', 'maxLength', 'min',
+  'name', 'pattern', 'placeholder', 'readOnly', 'required', 'step', 'type', 'value',
+
+  // Heads Up!
+  // Do not pass disabled, it duplicates the SUI CSS opacity rule.
+  // 'disabled',
+
+  // EVENTS
+  // keyboard
+  'onKeyDown', 'onKeyPress', 'onKeyUp',
+
+  // focus
+  'onFocus', 'onBlur',
+
+  // form
+  'onChange', 'onInput',
+
+  // mouse
+  'onClick', 'onContextMenu',
+  'onDrag', 'onDragEnd', 'onDragEnter', 'onDragExit', 'onDragLeave', 'onDragOver', 'onDragStart', 'onDrop',
+  'onMouseDown', 'onMouseEnter', 'onMouseLeave', 'onMouseMove', 'onMouseOut', 'onMouseOver', 'onMouseUp',
+
+  // selection
+  'onSelect',
+
+  // touch
+  'onTouchCancel', 'onTouchEnd', 'onTouchMove', 'onTouchStart',
 ]
 
 const _meta = {

test/specs/elements/Input/Input-test.js

@@ -7,7 +7,50 @@ import Input, { htmlInputPropNames } from 'src/elements/Input/Input'
 import * as common from 'test/specs/commonTests'
 
 describe('Input', () => {
-  common.isConformant(Input, { eventTargets: { onChange: 'input' } })
+  common.isConformant(Input, {
+    eventTargets: {
+      // keyboard
+      onKeyDown: 'input',
+      onKeyPress: 'input',
+      onKeyUp: 'input',
+
+      // focus
+      onFocus: 'input',
+      onBlur: 'input',
+
+      // form
+      onChange: 'input',
+      onInput: 'input',
+
+      // mouse
+      onClick: 'input',
+      onContextMenu: 'input',
+      onDrag: 'input',
+      onDragEnd: 'input',
+      onDragEnter: 'input',
+      onDragExit: 'input',
+      onDragLeave: 'input',
+      onDragOver: 'input',
+      onDragStart: 'input',
+      onDrop: 'input',
+      onMouseDown: 'input',
+      onMouseEnter: 'input',
+      onMouseLeave: 'input',
+      onMouseMove: 'input',
+      onMouseOut: 'input',
+      onMouseOver: 'input',
+      onMouseUp: 'input',
+
+      // selection
+      onSelect: 'input',
+
+      // touch
+      onTouchCancel: 'input',
+      onTouchEnd: 'input',
+      onTouchMove: 'input',
+      onTouchStart: 'input',
+    },
+  })
   common.hasUIClassName(Input)
 
   common.implementsLabelProp(Input, {