diff --git a/src/DateTimePicker.jsx b/src/DateTimePicker.jsx index ff1542cce..b00411208 100644 --- a/src/DateTimePicker.jsx +++ b/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 diff --git a/src/DropdownList.jsx b/src/DropdownList.jsx index f40460251..7fffe9792 100644 --- a/src/DropdownList.jsx +++ b/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) }, diff --git a/src/SelectList.jsx b/src/SelectList.jsx index dda23fd19..1b8a7b02d 100644 --- a/src/SelectList.jsx +++ b/src/SelectList.jsx @@ -130,6 +130,7 @@ var SelectList = React.createClass({ return (
{ - 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) }, diff --git a/src/TimeList.jsx b/src/TimeList.jsx index c532962e8..c8ebf2d22 100644 --- a/src/TimeList.jsx +++ b/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(){