Skip to content

Commit

Permalink
[fixed] list searches correctly happen on keyPress and not keyDown
Browse files Browse the repository at this point in the history
  • Loading branch information
@jquense
jquense committed Dec 4, 2015
1 parent dc1c6d0 commit 88bc7b0
Show file tree
Hide file tree
Showing 4 changed files with 82 additions and 44 deletions.
10 changes: 10 additions & 0 deletions src/DateTimePicker.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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
Expand Down
66 changes: 39 additions & 27 deletions src/DropdownList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 }
Expand Down Expand Up @@ -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 })
}
Expand Down Expand Up @@ -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
Expand All @@ -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)
Expand All @@ -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()
},

Expand All @@ -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', () => {
Expand All @@ -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)
},
Expand Down
35 changes: 25 additions & 10 deletions src/SelectList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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'}
Expand Down Expand Up @@ -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(){
Expand Down Expand Up @@ -254,7 +263,7 @@ var SelectList = React.createClass({

multiple = !!multiple

if ( !multiple )
if (!multiple)
return notify(this.props.onChange, checked ? item : null)

values = checked
Expand All @@ -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 })
}
Expand All @@ -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

Expand All @@ -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)
},

Expand Down
15 changes: 8 additions & 7 deletions src/TimeList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand All @@ -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(){
Expand Down

0 comments on commit 88bc7b0

Please sign in to comment.