[fixed] list searches correctly happen on keyPress and not keyDown

Author: jquense

src/DateTimePicker.jsx

@@ -167,6 +167,7 @@ var DateTimePicker = React.createClass({
         ref="element"
         tabIndex={'-1'}
         onKeyDown={this._keyDown}
+        onKeyPress={this._keyPress}
         onFocus={this._focus.bind(null, true)}
         onBlur={this._focus.bind(null, false)}
         className={cx(className, 'rw-datetimepicker', 'rw-widget', {
@@ -342,8 +343,17 @@ var DateTimePicker = React.createClass({
       if (open === popups.TIME )
         this.refs.timePopup._keyDown(e)
     }
+  },
+
+  @widgetEditable
+  _keyPress(e) {
+    notify(this.props.onKeyPress, [e])
 
+    if (e.defaultPrevented)
+      return
 
+    if (this.props.open === popups.TIME )
+      this.refs.timePopup._keyPress(e)
   },
 
   @widgetEnabled

src/DropdownList.jsx

@@ -154,7 +154,7 @@ var DropdownList = React.createClass({
         aria-owns={listID}
         aria-busy={!!busy}
         aria-live={!open && 'polite'}
-        //aria-activedescendant={activeID}
+        onKeyPress={this._keyPress}
         aria-autocomplete="list"
         aria-disabled={disabled }
         aria-readonly={readOnly }
@@ -234,9 +234,9 @@ var DropdownList = React.createClass({
   _focus(focused, e){
 
     this.setTimeout('focus', () => {
-      if( !focused) this.close()
+      if (!focused) this.close()
 
-      if( focused !== this.state.focused) {
+      if (focused !== this.state.focused) {
         notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
         this.setState({ focused: focused })
       }
@@ -281,40 +281,34 @@ var DropdownList = React.createClass({
     if (e.defaultPrevented)
       return
 
-    if ( key === 'End' ) {
-      if ( isOpen) this.setState({ focusedItem: list.last() })
-      else         change(list.last())
+    if (key === 'End') {
+      if (isOpen) this.setState({ focusedItem: list.last() })
+      else        change(list.last())
       e.preventDefault()
     }
-    else if ( key === 'Home' ) {
-      if ( isOpen) this.setState({ focusedItem: list.first() })
-      else         change(list.first())
+    else if (key === 'Home') {
+      if (isOpen) this.setState({ focusedItem: list.first() })
+      else        change(list.first())
       e.preventDefault()
     }
-    else if ( key === 'Escape' && isOpen ) {
+    else if (key === 'Escape' && isOpen) {
       closeWithFocus()
     }
-    else if ( (key === 'Enter' || (key === ' ' && !filtering)) && isOpen ) {
+    else if ((key === 'Enter' || (key === ' ' && !filtering)) && isOpen ) {
       change(this.state.focusedItem, true)
     }
-    else if ( key === 'ArrowDown' ) {
-      if ( alt )         this.open()
-      else if ( isOpen ) this.setState({ focusedItem: list.next(focusedItem) })
-      else               change(list.next(selectedItem))
+    else if (key === 'ArrowDown') {
+      if (alt)         this.open()
+      else if (isOpen) this.setState({ focusedItem: list.next(focusedItem) })
+      else             change(list.next(selectedItem))
       e.preventDefault()
     }
-    else if ( key === 'ArrowUp' ) {
-      if ( alt )         closeWithFocus()
-      else if ( isOpen ) this.setState({ focusedItem: list.prev(focusedItem) })
-      else               change(list.prev(selectedItem))
+    else if (key === 'ArrowUp') {
+      if (alt)         closeWithFocus()
+      else if (isOpen) this.setState({ focusedItem: list.prev(focusedItem) })
+      else             change(list.prev(selectedItem))
       e.preventDefault()
     }
-    else if ( !(this.props.filter && isOpen) )
-      this.search(String.fromCharCode(e.keyCode), item => {
-        isOpen
-          ? this.setState({ focusedItem: item })
-          : change(item)
-      })
 
     function change(item, fromList){
       if(!item) return
@@ -324,6 +318,21 @@ var DropdownList = React.createClass({
     }
   },
 
+  @widgetEditable
+  _keyPress(e) {
+    notify(this.props.onKeyPress, [e])
+
+    if (e.defaultPrevented)
+      return
+
+    if (!(this.props.filter && this.props.open))
+      this.search(String.fromCharCode(e.which), item => {
+        this.isMounted() && this.props.open
+          ? this.setState({ focusedItem: item })
+          : item && this.change(item)
+      })
+  },
+
   change(data){
     if ( !_.isShallowEqual(data, this.props.value) ) {
       notify(this.props.onChange, data)
@@ -335,7 +344,7 @@ var DropdownList = React.createClass({
   focus(target){
     var inst = target || (this.props.filter && this.props.open ? this.refs.filter : this.refs.input);
 
-    if ( activeElement() !== compat.findDOMNode(inst))
+    if (activeElement() !== compat.findDOMNode(inst))
       compat.findDOMNode(inst).focus()
   },
 
@@ -346,6 +355,9 @@ var DropdownList = React.createClass({
   search(character, cb) {
     var word = ((this._searchTerm || '') + character).toLowerCase();
 
+    if (!character)
+      return
+
     this._searchTerm = word
 
     this.setTimeout('search', () => {
@@ -354,7 +366,7 @@ var DropdownList = React.createClass({
         , item = list.next(this.state[key], word);
 
       this._searchTerm = ''
-      if ( item) cb(item)
+      if (item) cb(item)
 
     }, this.props.delay)
   },

src/SelectList.jsx

@@ -130,6 +130,7 @@ var SelectList = React.createClass({
     return (
       <div {...elementProps}
         onKeyDown={this._keyDown}
+        onKeyPress={this._keyPress}
         onFocus={this._focus.bind(null, true)}
         onBlur={this._focus.bind(null, false)}
         role={'radiogroup'}
@@ -224,8 +225,16 @@ var SelectList = React.createClass({
       e.preventDefault()
       this.selectAll()
     }
-    else
-      this.search(String.fromCharCode(e.keyCode))
+  },
+
+  @widgetEditable
+  _keyPress(e) {
+    notify(this.props.onKeyPress, [e])
+
+    if (e.defaultPrevented)
+      return
+
+    this.search(String.fromCharCode(e.which))
   },
 
   selectAll(){
@@ -254,7 +263,7 @@ var SelectList = React.createClass({
 
     multiple  = !!multiple
 
-    if ( !multiple )
+    if (!multiple)
       return notify(this.props.onChange, checked ? item : null)
 
     values = checked
@@ -266,11 +275,11 @@ var SelectList = React.createClass({
 
   @widgetEnabled
   _focus(focused, e) {
-
-    if( focused) compat.findDOMNode(this.refs.list).focus()
+    if (focused)
+      compat.findDOMNode(this.refs.list).focus()
 
     this.setTimeout('focus', () => {
-      if( focused !== this.state.focused){
+      if (focused !== this.state.focused) {
         notify(this.props[focused ? 'onFocus' : 'onBlur'], e)
         this.setState({ focused: focused })
       }
@@ -279,7 +288,11 @@ var SelectList = React.createClass({
 
   search(character) {
     var word = ((this._searchTerm || '') + character).toLowerCase()
-      , list = this.refs.list;
+      , list = this.refs.list
+      , multiple = this.props.multiple;
+
+    if (!character)
+      return
 
     this._searchTerm = word
 
@@ -288,9 +301,11 @@ var SelectList = React.createClass({
 
       this._searchTerm = ''
 
-      if ( focusedItem)
-        this.setState({ focusedItem })
-
+      if (focusedItem) {
+        !multiple
+          ? this._change(focusedItem, true)
+          : this.setState({ focusedItem })
+      }
     }, this.props.delay)
   },
 

src/TimeList.jsx

@@ -149,9 +149,8 @@ export default React.createClass({
     }
   },
 
-  _keyDown: function(e){
+  _keyDown(e) {
     var key = e.key
-      , character = String.fromCharCode(e.keyCode)
       , focusedItem  = this.state.focusedItem
       , list = this.refs.list;
 
@@ -172,13 +171,15 @@ export default React.createClass({
       e.preventDefault()
       this.setState({ focusedItem: list.prev(focusedItem) })
     }
-    else {
-      e.preventDefault()
+  },
+
+  _keyPress(e) {
+    e.preventDefault();
 
-      this.search(character, item => {
+    this.search(String.fromCharCode(e.which), item => {
+      this.isMounted() &&
         this.setState({ focusedItem: item })
-      })
-    }
+    })
   },
 
   scrollTo(){