- {this.renderValue(valueArray, isOpen)}
- {this.renderInput(valueArray)}
+
+ {this.renderValue(valueArray, isOpen)}
+ {this.renderInput(valueArray, focusedOptionIndex)}
+
+ {removeMessage}
{this.renderLoading()}
{this.renderClear()}
{this.renderArrow()}
diff --git a/src/Value.js b/src/Value.js
index 5d403354..7114a5ff 100644
--- a/src/Value.js
+++ b/src/Value.js
@@ -8,6 +8,7 @@ const Value = React.createClass({
propTypes: {
children: React.PropTypes.node,
disabled: React.PropTypes.bool, // disabled prop passed to ReactSelect
+ id: React.PropTypes.string, // Unique id for the value - used for aria
onClick: React.PropTypes.func, // method to handle click on value label
onRemove: React.PropTypes.func, // method to handle removal of the value
value: React.PropTypes.object.isRequired, // the option object for this value
@@ -56,6 +57,7 @@ const Value = React.createClass({
if (this.props.disabled || !this.props.onRemove) return;
return (
) : (
-
+
{this.props.children}
);
diff --git a/test/Async-test.js b/test/Async-test.js
index 2a0b830a..59a3ffb8 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -82,7 +82,6 @@ describe('Async', () => {
/>);
});
-
it('shows the returns options when the result returns', () => {
// Unexpected comes with promises built in - we'll use them
@@ -105,6 +104,26 @@ describe('Async', () => {
});
});
+ it('shows "Loading..." after typing if refined search matches none of the previous results', () => {
+
+ loadOptions.returns(expect.promise((resolve, reject) => {
+ resolve({ options: [{ value: 1, label: 'test' }] });
+ }));
+
+ typeSearchText('te');
+
+ return loadOptions.firstCall.returnValue.then(() => {
+
+ typeSearchText('ten');
+
+ return expect(renderer, 'to have rendered',
+
+ Two
+ One
+ );
});
it('calls onChange with the correct value when 1 option is selected', () => {
@@ -538,11 +685,11 @@ describe('Select', () => {
value: [3, 4]
});
- expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-value .Select-value-label',
- 'to satisfy', [
- expect.it('to have text', 'Three'),
- expect.it('to have text', 'Four')
- ]);
+ expect(instance, 'to contain',
+
+ Three
+ Four
+ );
});
it('supports updating the value to a single value', () => {
@@ -551,10 +698,10 @@ describe('Select', () => {
value: 1
});
- expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-value .Select-value-label',
- 'to satisfy', [
- expect.it('to have text', 'One')
- ]);
+ expect(instance, 'to contain',
+
+ One
+ );
});
it('supports updating the value to single value of 0', () => {
@@ -564,10 +711,10 @@ describe('Select', () => {
value: 0
});
- expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-value .Select-value-label',
- 'to satisfy', [
- expect.it('to have text', 'Zero')
- ]);
+ expect(instance, 'to contain',
+
+ Zero
+ );
});
it('calls onChange with the correct values when multiple options are selected', () => {
@@ -843,10 +990,11 @@ describe('Select', () => {
});
it('renders given invalid values in addition to given valid values', () => {
- var selectedItems = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label');
- expect(selectedItems[0], 'to have text', 'big dipper');
- expect(selectedItems[1], 'to have text', 'Virgo');
- expect(selectedItems, 'to have length', 2);
+ expect(instance, 'to contain',
+
+ big dipper
+ Virgo
+ );
});
});
@@ -1416,10 +1564,11 @@ describe('Select', () => {
it('displays both selected options', () => {
setValueProp([options[3], options[2]]);
- expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label')[0],
- 'to have text', 'Four');
- expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label')[1],
- 'to have text', 'Three');
+ expect(instance, 'to contain',
+
+ Four
+ Three
+ );
});
});
@@ -1439,10 +1588,11 @@ describe('Select', () => {
it('displays both selected options', () => {
setValueProp(['four', 'three']);
- expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label')[0],
- 'to have text', 'Four');
- expect(ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label')[1],
- 'to have text', 'Three');
+ expect(instance, 'to contain',
+
+ Four
+ Three
+ );
});
});
@@ -1478,9 +1628,11 @@ describe('Select', () => {
pressBackspace();
expect(onChange, 'was not called');
- var items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label');
- expect(items[0], 'to have text', 'Four');
- expect(items[1], 'to have text', 'Three');
+ expect(instance, 'to contain',
+
+ Four
+ Three
+ );
});
it('removes an item when clicking on the X', () => {
@@ -1514,10 +1666,11 @@ describe('Select', () => {
pressBackspace();
expect(onChange, 'was not called');
- var items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label');
- expect(items[0], 'to have text', 'Four');
- expect(items[1], 'to have text', 'Two');
-
+ expect(instance, 'to contain',
+
+ Four
+ Two
+ );
});
describe('with late options', () => {
@@ -1541,15 +1694,12 @@ describe('Select', () => {
]
});
- var items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value');
-
- expect(items[0], 'queried for', '.Select-value-label',
- 'to have items satisfying',
- 'to have text', 'new label for One');
- expect(items[1], 'queried for', '.Select-value-label',
- 'to have items satisfying',
- 'to have text', 'new label for Two');
+ expect(instance, 'to contain',
+
+ new label for One
+ new label for Two
+ );
});
});
@@ -1590,15 +1740,14 @@ describe('Select', () => {
clickArrowToOpen();
- var items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
- TestUtils.Simulate.mouseDown(items[1]);
- items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
- TestUtils.Simulate.mouseDown(items[0]);
-
- var selectedItems = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label');
- expect(selectedItems[0], 'to have text', 'Two');
- expect(selectedItems[1], 'to have text', 'One');
- expect(selectedItems, 'to have length', 2);
+ expect(instance,
+ 'with event mouseDown', 'on', Two
,
+ 'with event mouseDown', 'on', One
,
+ 'to contain',
+
+ Two
+ One
+ );
});
it('calls onChange when each option is selected', () => {
@@ -2003,13 +2152,9 @@ describe('Select', () => {
it('interprets the initial options correctly', () => {
- var values = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value');
-
- expect(values[0], 'queried for', '.Select-value-label', 'to have items satisfying',
- 'to have text', 'AbcDef');
- expect(values[1], 'queried for', '.Select-value-label', 'to have items satisfying',
- 'to have text', 'Three');
- expect(values, 'to have length', 2);
+ expect(instance, 'to contain', AbcDef );
+ expect(instance, 'to contain', Three );
+ expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-value-label', 'to have length', 2);
});
it('adds an additional option with the correct delimiter', () => {
@@ -2037,13 +2182,9 @@ describe('Select', () => {
it('interprets the initial options correctly', () => {
- var values = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value');
-
- expect(values[0], 'queried for', '.Select-value-label', 'to have items satisfying',
- 'to have text', 'AbcDef');
- expect(values[1], 'queried for', '.Select-value-label', 'to have items satisfying',
- 'to have text', 'Three');
- expect(values, 'to have length', 2);
+ expect(instance, 'to contain', AbcDef );
+ expect(instance, 'to contain', Three );
+ expect(ReactDOM.findDOMNode(instance), 'queried for', '.Select-value-label', 'to have length', 2);
});
it('adds an additional option with the correct delimiter', () => {
@@ -2113,6 +2254,15 @@ describe('Select', () => {
ReactDOM.render({option.label.toUpperCase()}
+ {option.label.toUpperCase()}
);
};
@@ -3113,7 +3263,7 @@ describe('Select', () => {
it('renders the values using the provided renderer', () => {
- var labelNode = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label span');
+ var labelNode = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-value-label span.custom-render');
expect(labelNode[0], 'to have text', 'THREE');
expect(labelNode[0], 'to have attributes', {
id: 'TESTOPTION_three'
@@ -3316,4 +3466,149 @@ describe('Select', () => {
expect(keys, 'to contain', 'valueArray');
});
});
+
+ describe('accessibility', () => {
+
+ describe('with basic searchable control', () => {
+
+ beforeEach(() => {
+
+ instance = createControl({
+ options: [
+ { value: 'one', label: 'label one' },
+ { value: 'two', label: 'label two' },
+ { value: 'three', label: 'label three' }
+ ],
+ value: 'two'
+ });
+ });
+
+ it('renders an input with a combobox role', () => {
+
+ expect(instance, 'to contain',
,
+ 'to contain',
,
+ 'with event', 'keyDown', ARROW_DOWN, 'on',
,
+ 'queried for',
+ Press backspace to remove label two
+ );
+ });
+
+ it('hides the `press backspace to remove` message on blur', () => {
+ expect(instance,
+ 'with event blur', 'on',
+ Press backspace to remove label two
+ );
+ });
+
+ it('updates the backspace message when the selected values update', () => {
+
+ wrapper.setPropsForChild({ value: [ 'three', 'two', 'one' ] });
+ expect(instance,
+ 'to contain',
+
+ Press backspace to remove label one
+ );
+ });
+
+ it('updates the active descendant after a selection', () => {
+
+ return expect(wrapper,
+ 'with event keyDown', ARROW_DOWN, 'on',
,
+ 'with event keyDown', KEY_ENTER, 'on',
,
+ 'queried for',