+ );
+ }
+};
+
+Select.propTypes = {
+ 'aria-describedby': PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech)
+ 'aria-label': PropTypes.string, // Aria label (for assistive tech)
+ 'aria-labelledby': PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech)
+ addLabelText: PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input
+ arrowRenderer: PropTypes.func, // Create drop-down caret element
+ autoBlur: PropTypes.bool, // automatically blur the component when an option is selected
+ autofocus: PropTypes.bool, // autofocus the component on mount
+ autosize: PropTypes.bool, // whether to enable autosizing or not
+ backspaceRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input
+ backspaceToRemoveMessage: PropTypes.string, // Message to use for screenreaders to press backspace to remove the current item - {label} is replaced with the item label
+ className: PropTypes.string, // className for the outer element
+ clearAllText: stringOrNode, // title for the "clear" control when multi: true
+ clearRenderer: PropTypes.func, // create clearable x element
+ clearValueText: stringOrNode, // title for the "clear" control
+ clearable: PropTypes.bool, // should it be possible to reset value
+ closeOnSelect: PropTypes.bool, // whether to close the menu when a value is selected
+ deleteRemoves: PropTypes.bool, // whether backspace removes an item if there is no text input
+ delimiter: PropTypes.string, // delimiter to use to join multiple values for the hidden field value
+ disabled: PropTypes.bool, // whether the Select is disabled or not
+ dropdownComponent: PropTypes.func, // dropdown component to render the menu in
+ escapeClearsValue: PropTypes.bool, // whether escape clears the value when the menu is closed
+ filterOption: PropTypes.func, // method to filter a single option (option, filterString)
+ filterOptions: PropTypes.any, // boolean to enable default filtering or function to filter the options array ([options], filterString, [values])
+ ignoreAccents: PropTypes.bool, // whether to strip diacritics when filtering
+ ignoreCase: PropTypes.bool, // whether to perform case-insensitive filtering
+ inputProps: PropTypes.object, // custom attributes for the Input
+ inputRenderer: PropTypes.func, // returns a custom input component
+ instanceId: PropTypes.string, // set the components instanceId
+ isLoading: PropTypes.bool, // whether the Select is loading externally or not (such as options being loaded)
+ isOpen: PropTypes.bool, // whether the Select dropdown menu is open or not
+ joinValues: PropTypes.bool, // joins multiple values into a single form field with the delimiter (legacy mode)
+ labelKey: PropTypes.string, // path of the label value in option objects
+ matchPos: PropTypes.string, // (any|start) match the start or entire string when filtering
+ matchProp: PropTypes.string, // (any|label|value) which option property to filter on
+ menuBuffer: PropTypes.number, // optional buffer (in px) between the bottom of the viewport and the bottom of the menu
+ menuContainerStyle: PropTypes.object, // optional style to apply to the menu container
+ menuRenderer: PropTypes.func, // renders a custom menu with options
+ menuStyle: PropTypes.object, // optional style to apply to the menu
+ multi: PropTypes.bool, // multi-value input
+ name: PropTypes.string, // generates a hidden tag with this field name for html forms
+ noResultsText: stringOrNode, // placeholder displayed when there are no matching search results
+ onBlur: PropTypes.func, // onBlur handler: function (event) {}
+ onBlurResetsInput: PropTypes.bool, // whether input is cleared on blur
+ onChange: PropTypes.func, // onChange handler: function (newValue) {}
+ onClose: PropTypes.func, // fires when the menu is closed
+ onCloseResetsInput: PropTypes.bool, // whether input is cleared when menu is closed through the arrow
+ onFocus: PropTypes.func, // onFocus handler: function (event) {}
+ onInputChange: PropTypes.func, // onInputChange handler: function (inputValue) {}
+ onInputKeyDown: PropTypes.func, // input keyDown handler: function (event) {}
+ onMenuScrollToBottom: PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options
+ onOpen: PropTypes.func, // fires when the menu is opened
+ onSelectResetsInput: PropTypes.bool, // whether input is cleared on select (works only for multiselect)
+ onValueClick: PropTypes.func, // onClick handler for value labels: function (value, event) {}
+ openOnClick: PropTypes.bool, // boolean to control opening the menu when the control is clicked
+ openOnFocus: PropTypes.bool, // always open options menu on focus
+ optionClassName: PropTypes.string, // additional class(es) to apply to the elements
+ optionComponent: PropTypes.func, // option component to render in dropdown
+ optionGroupComponent: PropTypes.func, // option group component to render in dropdown
+ optionRenderer: PropTypes.func, // optionRenderer: function (option) {}
+ options: PropTypes.array, // array of options
+ pageSize: PropTypes.number, // number of entries to page when using page up/down keys
+ placeholder: stringOrNode, // field placeholder, displayed when there's no value
+ renderInvalidValues: PropTypes.bool, // boolean to enable rendering values that do not match any options
+ required: PropTypes.bool, // applies HTML5 required attribute when needed
+ resetValue: PropTypes.any, // value to use when you clear the control
+ scrollMenuIntoView: PropTypes.bool, // boolean to enable the viewport to shift so that the full menu fully visible when engaged
+ searchable: PropTypes.bool, // whether to enable searching feature or not
+ simpleValue: PropTypes.bool, // pass the value to onChange as a simple value (legacy pre 1.0 mode), defaults to false
+ style: PropTypes.object, // optional style to apply to the control
+ tabIndex: PropTypes.string, // optional tab index of the control
+ tabSelectsValue: PropTypes.bool, // whether to treat tabbing out while focused to be value selection
+ value: PropTypes.any, // initial field value
+ valueComponent: PropTypes.func, // value component to render
+ valueKey: PropTypes.string, // path of the label value in option objects
+ valueRenderer: PropTypes.func, // valueRenderer: function (option) {}
+ wrapperStyle: PropTypes.object, // optional style to apply to the component wrapper
+};
+
+Select.defaultProps = {
+ addLabelText: 'Add "{label}"?',
+ arrowRenderer: defaultArrowRenderer,
+ autosize: true,
+ backspaceRemoves: true,
+ backspaceToRemoveMessage: 'Press backspace to remove {label}',
+ clearable: true,
+ clearAllText: 'Clear all',
+ clearRenderer: defaultClearRenderer,
+ clearValueText: 'Clear value',
+ closeOnSelect: true,
+ deleteRemoves: true,
+ delimiter: ',',
+ disabled: false,
+ dropdownComponent: Dropdown,
+ escapeClearsValue: true,
+ filterOptions: defaultFilterOptions,
+ ignoreAccents: true,
+ ignoreCase: true,
+ inputProps: {},
+ isLoading: false,
+ joinValues: false,
+ labelKey: 'label',
+ matchPos: 'any',
+ matchProp: 'any',
+ menuBuffer: 0,
+ menuRenderer: defaultMenuRenderer,
+ multi: false,
+ noResultsText: 'No results found',
+ onBlurResetsInput: true,
+ onSelectResetsInput: true,
+ onCloseResetsInput: true,
+ openOnClick: true,
+ optionComponent: Option,
+ optionGroupComponent: OptionGroup,
+ pageSize: 5,
+ placeholder: 'Select...',
+ required: false,
+ scrollMenuIntoView: true,
+ searchable: true,
+ simpleValue: false,
+ tabSelectsValue: true,
+ valueComponent: Value,
+ valueKey: 'value',
+};
export default Select;
diff --git a/src/Value.js b/src/Value.js
index d9925654..e282fd18 100644
--- a/src/Value.js
+++ b/src/Value.js
@@ -1,20 +1,18 @@
import React from 'react';
-import createClass from 'create-react-class';
import PropTypes from 'prop-types';
import classNames from 'classnames';
-const Value = createClass({
+class Value extends React.Component {
- displayName: 'Value',
+ constructor(props) {
+ super(props);
- propTypes: {
- children: PropTypes.node,
- disabled: PropTypes.bool, // disabled prop passed to ReactSelect
- id: PropTypes.string, // Unique id for the value - used for aria
- onClick: PropTypes.func, // method to handle click on value label
- onRemove: PropTypes.func, // method to handle removal of the value
- value: PropTypes.object.isRequired, // the option object for this value
- },
+ this.handleMouseDown = this.handleMouseDown.bind(this);
+ this.onRemove = this.onRemove.bind(this);
+ this.handleTouchEndRemove = this.handleTouchEndRemove.bind(this);
+ this.handleTouchMove = this.handleTouchMove.bind(this);
+ this.handleTouchStart = this.handleTouchStart.bind(this);
+ }
handleMouseDown (event) {
if (event.type === 'mousedown' && event.button !== 0) {
@@ -28,13 +26,13 @@ const Value = createClass({
if (this.props.value.href) {
event.stopPropagation();
}
- },
+ }
onRemove (event) {
event.preventDefault();
event.stopPropagation();
this.props.onRemove(this.props.value);
- },
+ }
handleTouchEndRemove (event){
// Check if the view is being dragged, In this case
@@ -43,17 +41,17 @@ const Value = createClass({
// Fire the mouse events
this.onRemove(event);
- },
+ }
handleTouchMove (event) {
// Set a flag that the view is being dragged
this.dragging = true;
- },
+ }
handleTouchStart (event) {
// Set a flag that the view is not being dragged
this.dragging = false;
- },
+ }
renderRemoveIcon () {
if (this.props.disabled || !this.props.onRemove) return;
@@ -67,7 +65,7 @@ const Value = createClass({
×
);
- },
+ }
renderLabel () {
let className = 'Select-value-label';
@@ -80,7 +78,7 @@ const Value = createClass({
{this.props.children}
);
- },
+ }
render () {
return (
@@ -93,7 +91,16 @@ const Value = createClass({
);
}
+};
+
-});
+Value.propTypes = {
+ children: PropTypes.node,
+ disabled: PropTypes.bool, // disabled prop passed to ReactSelect
+ id: PropTypes.string, // Unique id for the value - used for aria
+ onClick: PropTypes.func, // method to handle click on value label
+ onRemove: PropTypes.func, // method to handle removal of the value
+ value: PropTypes.object.isRequired, // the option object for this value
+};
-module.exports = Value;
+export default Value;
diff --git a/src/index.js b/src/index.js
new file mode 100644
index 00000000..a4bdbe21
--- /dev/null
+++ b/src/index.js
@@ -0,0 +1,18 @@
+import Select from './Select';
+import Async from './Async';
+import AsyncCreatable from './AsyncCreatable';
+import Creatable from './Creatable';
+import Value from './Value';
+
+Select.Async = Async;
+Select.AsyncCreatable = AsyncCreatable;
+Select.Creatable = Creatable;
+Select.Value = Value;
+
+export default Select;
+export {
+ Async,
+ AsyncCreatable,
+ Creatable,
+ Value
+};
diff --git a/src/index.umd.js b/src/index.umd.js
new file mode 100644
index 00000000..980c7222
--- /dev/null
+++ b/src/index.umd.js
@@ -0,0 +1,17 @@
+// This file exists as an entry point for bundling our umd builds.
+// Both in rollup and in webpack, umd builds built from es6 modules are not
+// compatible with mixed imports (which exist in index.js)
+// This file does away with named imports in favor of a single export default.
+
+import Select from './Select';
+import Async from './Async';
+import AsyncCreatable from './AsyncCreatable';
+import Creatable from './Creatable';
+import Value from './Value';
+
+Select.Async = Async;
+Select.AsyncCreatable = AsyncCreatable;
+Select.Creatable = Creatable;
+Select.Value = Value;
+
+export default Select;
diff --git a/src/utils/defaultArrowRenderer.js b/src/utils/defaultArrowRenderer.js
index 0654e310..3fee9f0e 100644
--- a/src/utils/defaultArrowRenderer.js
+++ b/src/utils/defaultArrowRenderer.js
@@ -1,4 +1,5 @@
import React from 'react';
+import PropTypes from 'prop-types';
export default function arrowRenderer ({ onMouseDown }) {
return (
@@ -8,3 +9,7 @@ export default function arrowRenderer ({ onMouseDown }) {
/>
);
};
+
+arrowRenderer.propTypes = {
+ onMouseDown: PropTypes.func,
+};
diff --git a/src/utils/defaultFilterOptions.js b/src/utils/defaultFilterOptions.js
index 8a5a783a..bdbd363c 100644
--- a/src/utils/defaultFilterOptions.js
+++ b/src/utils/defaultFilterOptions.js
@@ -35,4 +35,4 @@ function filterOptions (options, filterValue, excludeOptions, props) {
});
}
-module.exports = filterOptions;
+export default filterOptions;
diff --git a/src/utils/defaultMenuRenderer.js b/src/utils/defaultMenuRenderer.js
index c5a3833b..58e356ba 100644
--- a/src/utils/defaultMenuRenderer.js
+++ b/src/utils/defaultMenuRenderer.js
@@ -77,4 +77,4 @@ function menuRenderer ({
return renderOptions(options);
}
-module.exports = menuRenderer;
+export default menuRenderer;
diff --git a/src/utils/stripDiacritics.js b/src/utils/stripDiacritics.js
index 9f91f83a..478d26e6 100644
--- a/src/utils/stripDiacritics.js
+++ b/src/utils/stripDiacritics.js
@@ -85,7 +85,7 @@ var map = [
{ 'base':'z', 'letters':/[\u007A\u24E9\uFF5A\u017A\u1E91\u017C\u017E\u1E93\u1E95\u01B6\u0225\u0240\u2C6C\uA763]/g },
];
-module.exports = function stripDiacritics (str) {
+export default function stripDiacritics (str) {
for (var i = 0; i < map.length; i++) {
str = str.replace(map[i].letters, map[i].base);
}
diff --git a/test/Async-test.js b/test/Async-test.js
index 41f794b4..3e76e9fc 100644
--- a/test/Async-test.js
+++ b/test/Async-test.js
@@ -20,7 +20,7 @@ var ReactDOM = require('react-dom');
var TestUtils = require('react-dom/test-utils');
var sinon = require('sinon');
-var Select = require('../src/Select');
+var Select = require('../src');
describe('Async', () => {
let asyncInstance, asyncNode, filterInputNode, loadOptions;
@@ -31,8 +31,8 @@ describe('Async', () => {
);
asyncNode = ReactDOM.findDOMNode(asyncInstance);
@@ -319,6 +319,15 @@ describe('Async', () => {
typeSearchText('WÄRE');
expect(loadOptions, 'was called with', 'WÄRE');
});
+
+ it('does not mutate the user input', () => {
+ createControl({
+ ignoreAccents: false,
+ ignoreCase: true
+ });
+ typeSearchText('A');
+ expect(asyncNode.textContent.substr(asyncNode.textContent.indexOf('}') + 1), 'to begin with', 'A');
+ });
});
describe('with ignore case and ignore accents', () => {
@@ -377,26 +386,30 @@ describe('Async', () => {
});
describe('if noResultsText has been provided', () => {
- it('returns the noResultsText', () => {
- asyncInstance.select = { state: { inputValue: 'asdf' } };
- expect(asyncInstance.noResultsText(), 'to equal', 'noResultsText');
+ it('returns the noResultsText', (cb) => {
+ asyncInstance.setState({
+ inputValue: 'asfd',
+ }, () => {
+ expect(asyncInstance.noResultsText(), 'to equal', 'noResultsText');
+ cb();
+ });
});
});
describe('if noResultsText is empty', () => {
- beforeEach((cb) => {
+ beforeEach(() => {
createControl({
searchPromptText: 'searchPromptText',
loadingPlaceholder: 'loadingPlaceholder'
});
- asyncInstance.setState({
- isLoading: false,
- inputValue: 'asdfkljhadsf'
- }, cb);
});
- it('falls back to searchPromptText', () => {
- asyncInstance.select = { state: { inputValue: 'asdf' } };
- expect(asyncInstance.noResultsText(), 'to equal', 'searchPromptText');
+ it('falls back to searchPromptText', (cb) => {
+ asyncInstance.setState({
+ inputValue: 'asfd',
+ }, () => {
+ expect(asyncInstance.noResultsText(), 'to equal', 'searchPromptText');
+ cb();
+ });
});
});
});
@@ -438,13 +451,29 @@ describe('Async', () => {
describe('.focus()', () => {
beforeEach(() => {
createControl({});
+ TestUtils.Simulate.blur(filterInputNode);
});
it('focuses the search input', () => {
- var input = asyncNode.querySelector('input');
- expect(input, 'not to equal', document.activeElement);
+ expect(filterInputNode, 'not to equal', document.activeElement);
asyncInstance.focus();
- expect(input, 'to equal', document.activeElement);
+ expect(filterInputNode, 'to equal', document.activeElement);
+ });
+ });
+
+
+ describe('props sync test', () => {
+ it('should update options on componentWillReceiveProps', () => {
+ createControl({
+ });
+ asyncInstance.componentWillReceiveProps({
+ options: [{
+ label: 'bar',
+ value: 'foo',
+ }]
+ });
+ expect(asyncNode.querySelectorAll('[role=option]').length, 'to equal', 1);
+ expect(asyncNode.querySelector('[role=option]').textContent, 'to equal', 'bar');
});
});
});
diff --git a/test/AsyncCreatable-test.js b/test/AsyncCreatable-test.js
index 00b80a9b..514a40bd 100644
--- a/test/AsyncCreatable-test.js
+++ b/test/AsyncCreatable-test.js
@@ -16,7 +16,7 @@ var React = require('react');
var ReactDOM = require('react-dom');
var TestUtils = require('react-dom/test-utils');
var sinon = require('sinon');
-var Select = require('../src/Select');
+var Select = require('../src');
describe('AsyncCreatable', () => {
let creatableInstance, creatableNode, filterInputNode, loadOptions, renderer;
diff --git a/test/Creatable-test.js b/test/Creatable-test.js
index cd49307c..0c317aab 100644
--- a/test/Creatable-test.js
+++ b/test/Creatable-test.js
@@ -16,10 +16,10 @@ var expect = unexpected
var React = require('react');
var ReactDOM = require('react-dom');
var TestUtils = require('react-dom/test-utils');
-var Select = require('../src/Select');
+var Select = require('../src');
describe('Creatable', () => {
- let creatableInstance, creatableNode, filterInputNode, innserSelectInstance, renderer;
+ let creatableInstance, creatableNode, filterInputNode, innerSelectInstance, renderer;
beforeEach(() => renderer = TestUtils.createRenderer());
@@ -36,7 +36,7 @@ describe('Creatable', () => {
);
creatableNode = ReactDOM.findDOMNode(creatableInstance);
- innserSelectInstance = creatableInstance.select;
+ innerSelectInstance = creatableInstance.select;
findAndFocusInputControl();
};
@@ -106,7 +106,7 @@ describe('Creatable', () => {
createControl({
filterOptions: () => null
});
- typeSearchText('test');;
+ typeSearchText('test');
});
it('should not show a "create..." prompt if current filter text is not a valid option (as determined by :isValidNewOption prop)', () => {
@@ -150,7 +150,6 @@ describe('Creatable', () => {
const options = [{ label: 'One', value: 1 }];
createControl({
options,
- shouldKeyDownEventCreateNewOption: ({ keyCode }) => keyCode === 13
});
typeSearchText('on'); // ['Create option "on"', 'One']
TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 40, key: 'ArrowDown' }); // Select 'One'
@@ -158,6 +157,28 @@ describe('Creatable', () => {
expect(options, 'to have length', 1);
});
+ it('should remove the new option after closing on selecting option', () => {
+ createControl();
+ typeSearchText('9');
+ TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 40, key: 'ArrowDown' });
+ TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 13 });
+ expect(creatableInstance.inputValue, 'to equal', '');
+ });
+
+ it('should remove the new option after closing on escape', () => {
+ createControl();
+ typeSearchText('9');
+ TestUtils.Simulate.keyDown(filterInputNode, { keyCode: 27 });
+ expect(creatableInstance.inputValue, 'to equal', '');
+ });
+
+ it('should remove the new option after closing on blur', () => {
+ createControl();
+ typeSearchText('9');
+ TestUtils.Simulate.blur(filterInputNode);
+ expect(creatableInstance.inputValue, 'to equal', '');
+ });
+
it('should allow a custom select type to be rendered via the :children property', () => {
let childProps;
createControl({
diff --git a/test/Select-test.js b/test/Select-test.js
index 47b76237..630fec3b 100644
--- a/test/Select-test.js
+++ b/test/Select-test.js
@@ -22,8 +22,7 @@ var React = require('react');
var ReactDOM = require('react-dom');
var TestUtils = require('react-dom/test-utils');
-var Select = require('../src/Select');
-var Value = require('../src/Value');
+var Select = require('../src').default;
// The displayed text of the currently selected item, when items collapsed
var DISPLAYED_SELECTION_SELECTOR = '.Select-value';
@@ -2004,6 +2003,19 @@ describe('Select', () => {
]);
});
+ it('removes the last item with backspace', () => {
+
+ wrapper.setPropsForChild({
+ multi: false,
+ value: 'one'
+ });
+ onChange.reset(); // Ignore previous onChange calls
+
+ pressBackspace();
+
+ expect(onChange, 'was called with', null);
+ });
+
it('doesn\'t show the X if clearableValue=false', () => {
setValueProp(['two']);
@@ -2133,7 +2145,8 @@ describe('Select', () => {
value: '',
options: options,
searchable: false,
- multi: true
+ multi: true,
+ closeOnSelect: false,
}, {
wireUpOnChangeToValue: true
});
@@ -2153,8 +2166,8 @@ describe('Select', () => {
clickArrowToOpen();
expect(instance,
- 'with event mouseDown', 'on',
Two
,
- 'with event mouseDown', 'on',
One
,
+ 'with event', 'mouseDown', 'on',
Two
,
+ 'with event', 'mouseDown', 'on',
One
,
'to contain',
Two
@@ -2234,6 +2247,7 @@ describe('Select', () => {
// Render an instance of the component
wrapper = createControlWithWrapper({
value: '',
+ closeOnSelect: false,
options: options,
searchable: false,
multi: true
@@ -2257,6 +2271,8 @@ describe('Select', () => {
var items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
var groups = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option-group-label');
+ expect(items, 'to have length', 4);
+ expect(groups, 'to have length', 2);
// Click the option "-1" to select it
expect(items[1], 'to have text', '-1');
@@ -2266,13 +2282,13 @@ describe('Select', () => {
// Now get the list again
items = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option');
groups = ReactDOM.findDOMNode(instance).querySelectorAll('.Select-option-group-label');
+ expect(items, 'to have length', 3);
+ expect(groups, 'to have length', 2);
expect(items[0], 'to have text', '-2');
expect(items[1], 'to have text', '+1');
expect(items[2], 'to have text', '+2');
- expect(items, 'to have length', 3);
expect(groups[0], 'to have text', 'Negative Numbers');
expect(groups[1], 'to have text', 'Positive Numbers');
- expect(groups, 'to have length', 2);
// Click the option "-2" to select it
TestUtils.Simulate.mouseDown(items[0]);
@@ -2726,7 +2742,7 @@ describe('Select', () => {
expect(spyFilterOption, 'was called with', defaultOptions[1], '');
expect(spyFilterOption, 'was called with', defaultOptions[2], '');
expect(spyFilterOption, 'was called with', defaultOptions[3], '');
- });
+ }).timeout(5000);
describe('when entering text', () => {
@@ -2744,7 +2760,7 @@ describe('Select', () => {
expect(spyFilterOption, 'was called with', defaultOptions[1], 'xyz');
expect(spyFilterOption, 'was called with', defaultOptions[2], 'xyz');
expect(spyFilterOption, 'was called with', defaultOptions[3], 'xyz');
- });
+ }).timeout(5000);
it('only shows the filtered option', () => {
@@ -3209,7 +3225,7 @@ describe('Select', () => {
instance = createControl({
options: defaultOptions,
- onFocus: onFocus
+ onFocus: onFocus,
});
});
@@ -3219,27 +3235,51 @@ describe('Select', () => {
});
});
- describe('openAfterFocus', () => {
-
- var openAfterFocus;
-
- beforeEach(() => {
- openAfterFocus = sinon.spy();
-
+ describe('openOnClick', () => {
+ it('should open the menu on click when true', () => {
instance = createControl({
options: defaultOptions,
- openAfterFocus: true
+ openOnClick: true,
+ }, {
+ initialFocus: false,
});
+ TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-control'), { button: 0 });
+ // need to simulate the focus on the input, it does not happen in jsdom
+ findAndFocusInputControl();
+ expect(instance.state.isOpen, 'to be true');
});
- it('should show the options when focused', () => {
- instance.focus();
+ it('should not open the menu on click when false', () => {
+ instance = createControl({
+ options: defaultOptions,
+ openOnClick: false,
+ }, {
+ initialFocus: false,
+ });
+ TestUtils.Simulate.mouseDown(ReactDOM.findDOMNode(instance).querySelector('.Select-control'), { button: 0 });
+ // need to simulate the focus on the input, it does not happen in jsdom
+ findAndFocusInputControl();
+ expect(instance.state.isOpen, 'to be falsy');
+ });
+ });
- if (instance.state.isFocused && instance.state.openAfterFocus) {
- expect(instance.state.isOpen, 'to equal', true);
- }
+ describe('openOnFocus', () => {
+ // Note: createControl automatically focuses the control
+ it('should open the menu on focus when true', () => {
+ instance = createControl({
+ options: defaultOptions,
+ openOnFocus: true,
+ });
+ expect(instance.state.isOpen, 'to be true');
});
+ it('should open the menu on focus when false', () => {
+ instance = createControl({
+ options: defaultOptions,
+ openOnFocus: false,
+ });
+ expect(instance.state.isOpen, 'to be falsy');
+ });
});
describe('onValueClick', () => {
@@ -4045,7 +4085,7 @@ describe('Select', () => {
it('sets the haspopup and expanded to true when menu is shown', () => {
expect(instance,
- 'with event keyDown', ARROW_DOWN, 'on', ,
+ 'with event', 'keyDown', ARROW_DOWN, 'on', ,
'to contain', );
});
@@ -4112,7 +4152,8 @@ describe('Select', () => {
{ value: 'five', label: 'label five' }
],
value: [ 'three', 'two' ],
- multi: true
+ multi: true,
+ closeOnSelect: false,
}, {
wireUpOnChangeToValue: true
});
@@ -4128,7 +4169,7 @@ describe('Select', () => {
it('hides the `press backspace to remove` message on blur', () => {
expect(instance,
- 'with event blur', 'on', ,
+ 'with event', 'blur', 'on', ,
'not to contain',
Press backspace to remove label two
@@ -4148,8 +4189,8 @@ describe('Select', () => {
it('updates the active descendant after a selection', () => {
return expect(wrapper,
- 'with event keyDown', ARROW_DOWN, 'on', ,
- 'with event keyDown', KEY_ENTER, 'on', ,
+ 'with event', 'keyDown', ARROW_DOWN, 'on', ,
+ 'with event', 'keyDown', KEY_ENTER, 'on', ,
'queried for', )
.then(input => {
diff --git a/test/Value-test.js b/test/Value-test.js
index 8f324a20..5ef1b224 100644
--- a/test/Value-test.js
+++ b/test/Value-test.js
@@ -20,7 +20,7 @@ var TestUtils = require('react-dom/test-utils');
var OPTION = { label: 'TEST-LABEL', value: 'TEST-VALUE' };
-var Value = require('../src/Value');
+var Value = require('../src/Value').default;
describe('Value component', function() {
diff --git a/webpack.config.js b/webpack.config.js
new file mode 100644
index 00000000..60129fc2
--- /dev/null
+++ b/webpack.config.js
@@ -0,0 +1,65 @@
+const webpack = require('webpack');
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ExtractTextPlugin = require('extract-text-webpack-plugin');
+
+module.exports = {
+ context: path.resolve(__dirname, 'examples/src'),
+ entry: {
+ app: './app.js',
+ },
+ output: {
+ path: path.resolve(__dirname, 'examples/dist'),
+ filename: '[name].js',
+ publicPath: '/',
+ },
+ devServer: {
+ contentBase: path.resolve(__dirname, 'examples/src'),
+ port: 8000,
+ },
+ module: {
+ rules: [
+ {
+ test: /\.js$/,
+ exclude: [/node_modules/],
+ use: [{
+ loader: 'babel-loader',
+ options: { presets: ['es2015'] },
+ }],
+ },
+ {
+ test: /\.less$/,
+ use: ExtractTextPlugin.extract({
+ fallback: 'style-loader',
+ use: ['css-loader', 'less-loader'],
+ })
+ },
+ {
+ test: /\.html$/,
+ use: [
+ {
+ loader: 'html-loader',
+ }
+ ]
+ },
+ ],
+ },
+ resolve: {
+ alias: {
+ 'react-select-plus': path.resolve(__dirname, 'src/index'),
+ }
+ },
+ plugins: [
+ new webpack.optimize.CommonsChunkPlugin({
+ name: 'common',
+ filename: 'common.js',
+ minChunk: 2,
+ }),
+ new HtmlWebpackPlugin({
+ filename: 'index.html',
+ inject: false,
+ template: path.resolve(__dirname, 'examples/src/index.html')
+ }),
+ new ExtractTextPlugin('example.css'),
+ ]
+};