Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fixed failing tests, resolved merge conflicts on #1428 #2092

Merged
merged 1 commit into from
Oct 25, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 19 additions & 4 deletions src/Select.js
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,10 @@ class Select extends React.Component {
this.selectFocusedOption();
return;
case 13: // enter
if (!this.state.isOpen) return;
if (!this.state.isOpen) {
this.focusNextOption();
return;
}
event.stopPropagation();
this.selectFocusedOption();
break;
Expand All @@ -400,6 +403,17 @@ class Select extends React.Component {
event.stopPropagation();
}
break;
case 32: // space
if (!this.props.searchable) {
event.preventDefault();
}
if (!this.state.isOpen) {
this.focusNextOption();
return;
}
event.stopPropagation();
this.selectFocusedOption();
break;
case 38: // up
this.focusPreviousOption();
break;
Expand Down Expand Up @@ -781,20 +795,21 @@ class Select extends React.Component {
[this._instancePrefix + '-list']: isOpen,
});
return (

<div
{...divProps}
role="combobox"
aria-expanded={isOpen}
aria-owns={ariaOwns}
aria-activedescendant={isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value'}
aria-labelledby={this.props['aria-labelledby']}
aria-label={this.props['aria-label']}
className={className}
tabIndex={this.props.tabIndex || 0}
onBlur={this.handleInputBlur}
onFocus={this.handleInputFocus}
ref={ref => this.input = ref}
id={divProps.id ? divProps.id : this.props.id}
aria-readonly={'' + !!this.props.disabled}
aria-disabled={'' + !!this.props.disabled}
style={{ border: 0, width: 1, display:'inline-block' }}/>
);
}
Expand Down
43 changes: 41 additions & 2 deletions test/Select-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ var PLACEHOLDER_SELECTOR = '.Select-placeholder';
var ARROW_UP = { keyCode: 38, key: 'ArrowUp' };
var ARROW_DOWN = { keyCode: 40, key: 'ArrowDown' };
var KEY_ENTER = { keyCode: 13, key: 'Enter' };
var KEY_SPACE = { keyCode: 32, key: 'Space' };

class PropsWrapper extends React.Component {

Expand Down Expand Up @@ -3253,7 +3254,6 @@ describe('Select', () => {
});

it('disabled option link is still clickable', () => {
var selectArrow = ReactDOM.findDOMNode(instance).querySelector('.Select-arrow');
var selectArrow = ReactDOM.findDOMNode(instance).querySelector('.Select-arrow');
TestUtils.Simulate.mouseDown(selectArrow);
var options = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
Expand Down Expand Up @@ -3975,7 +3975,7 @@ describe('Select', () => {
</span>);
});

it('updates the active descendant after a selection', () => {
it('updates the active descendant after a selection using enter key', () => {

return expect(wrapper,
'with event', 'keyDown', ARROW_DOWN, 'on', <div className="Select-control" />,
Expand All @@ -3991,6 +3991,45 @@ describe('Select', () => {
});

});

it('expands the drop down when the enter key is pressed', () => {

return expect(wrapper,
'with event', 'keyDown', KEY_ENTER, 'on', <div className="Select-control" />,
'queried for', <input role="combobox" />)
.then(input => {
expect(instance.state.focusedOption, 'to equal', { value: 'one', label: 'label one' });
});

});

it('updates the active descendant after a selection using space bar', () => {

return expect(wrapper,
'with event', 'keyDown', ARROW_DOWN, 'on', <div className="Select-control" />,
'with event', 'keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
'queried for', <input role="combobox" />)
.then(input => {

// [ 'three', 'two', 'one' ] is now selected,
// therefore in-focus should be 'four'

const activeId = input.attributes['aria-activedescendant'].value;
expect(ReactDOM.findDOMNode(instance), 'queried for first', '#' + activeId, 'to have text', 'label four');
});

});

it('expands the drop down when the space bar is pressed', () => {

return expect(wrapper,
'with event', 'keyDown', KEY_SPACE, 'on', <div className="Select-control" />,
'queried for', <input role="combobox" />)
.then(input => {
expect(instance.state.focusedOption, 'to equal', { value: 'one', label: 'label one' });
});

});
});
});

Expand Down