From cce53da4eb105972b6fce136e5e0253cea7dc4e2 Mon Sep 17 00:00:00 2001 From: Anton Alexandrenok Date: Tue, 21 Feb 2017 10:12:53 +0300 Subject: [PATCH 01/22] Added .focus() instance method --- src/Creatable.js | 4 ++++ test/Creatable-test.js | 13 +++++++++++++ 2 files changed, 17 insertions(+) diff --git a/src/Creatable.js b/src/Creatable.js index 145c568aa3..f1f3fe33e5 100644 --- a/src/Creatable.js +++ b/src/Creatable.js @@ -203,6 +203,10 @@ const Creatable = React.createClass({ } }, + focus () { + this.select.focus(); + }, + render () { const { newOptionCreator, diff --git a/test/Creatable-test.js b/test/Creatable-test.js index 968478fd9a..45014c105a 100644 --- a/test/Creatable-test.js +++ b/test/Creatable-test.js @@ -237,4 +237,17 @@ describe('Creatable', () => { createControl({ onInputKeyDown: event => done() }); return creatableInstance.onInputKeyDown({ keyCode: 97 }); }); + + describe('.focus()', () => { + beforeEach(() => { + createControl({}); + TestUtils.Simulate.blur(filterInputNode); + }); + + it('focuses the search input', () => { + expect(filterInputNode, 'not to equal', document.activeElement); + creatableInstance.focus(); + expect(filterInputNode, 'to equal', document.activeElement); + }); + }); }); From af0f77fe742fef8765b8578ff9486075991d1177 Mon Sep 17 00:00:00 2001 From: Eric Lee Date: Tue, 21 Feb 2017 14:30:57 -0800 Subject: [PATCH 02/22] Add aria-describedby support --- src/Select.js | 2 ++ test/Select-test.js | 13 +++++++++++++ 2 files changed, 15 insertions(+) diff --git a/src/Select.js b/src/Select.js index fc09e715f0..4960865cf6 100644 --- a/src/Select.js +++ b/src/Select.js @@ -48,6 +48,7 @@ const Select = React.createClass({ addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input 'aria-label': React.PropTypes.string, // Aria label (for assistive tech) 'aria-labelledby': React.PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech) + 'aria-describedby': React.PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) arrowRenderer: React.PropTypes.func, // Create drop-down caret element autoBlur: React.PropTypes.bool, // automatically blur the component when an option is selected autofocus: React.PropTypes.bool, // autofocus the component on mount @@ -854,6 +855,7 @@ const Select = React.createClass({ 'aria-haspopup': '' + isOpen, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', 'aria-labelledby': this.props['aria-labelledby'], + 'aria-describedby': this.props['aria-describedby'], 'aria-label': this.props['aria-label'], className: className, tabIndex: this.props.tabIndex, diff --git a/test/Select-test.js b/test/Select-test.js index d8df285436..10a2c6afb1 100644 --- a/test/Select-test.js +++ b/test/Select-test.js @@ -3803,6 +3803,19 @@ describe('Select', () => { 'to contain', ); }); + it('passes through the aria-describedby prop', () => { + + instance = createControl({ + options: defaultOptions, + value: 'one', + 'aria-describedby': 'test-label1-id test-label2-id' + }); + + expect(instance, + 'to contain', ); + }); + + it('passes through the aria-label prop', () => { instance = createControl({ From ba7dc9fa143f3c41a7a6960e1ece6cb8597a5fe2 Mon Sep 17 00:00:00 2001 From: Eric Lee Date: Tue, 21 Feb 2017 14:53:32 -0800 Subject: [PATCH 03/22] Sort aria-describedby propTypes alphabetically --- src/Select.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Select.js b/src/Select.js index 4960865cf6..5149cd65c8 100644 --- a/src/Select.js +++ b/src/Select.js @@ -46,9 +46,9 @@ const Select = React.createClass({ propTypes: { addLabelText: React.PropTypes.string, // placeholder displayed when you want to add a label on a multi-value input + 'aria-describedby': React.PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) 'aria-label': React.PropTypes.string, // Aria label (for assistive tech) 'aria-labelledby': React.PropTypes.string, // HTML ID of an element that should be used as the label (for assistive tech) - 'aria-describedby': React.PropTypes.string, // HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) arrowRenderer: React.PropTypes.func, // Create drop-down caret element autoBlur: React.PropTypes.bool, // automatically blur the component when an option is selected autofocus: React.PropTypes.bool, // autofocus the component on mount @@ -854,8 +854,8 @@ const Select = React.createClass({ 'aria-owns': ariaOwns, 'aria-haspopup': '' + isOpen, 'aria-activedescendant': isOpen ? this._instancePrefix + '-option-' + focusedOptionIndex : this._instancePrefix + '-value', - 'aria-labelledby': this.props['aria-labelledby'], 'aria-describedby': this.props['aria-describedby'], + 'aria-labelledby': this.props['aria-labelledby'], 'aria-label': this.props['aria-label'], className: className, tabIndex: this.props.tabIndex, From 5513893df6bbd3eb06470c29e2120971202baa50 Mon Sep 17 00:00:00 2001 From: Anton Alexandrenok Date: Tue, 14 Mar 2017 12:03:35 +0300 Subject: [PATCH 04/22] Added .focus() to AsyncCreatable --- src/AsyncCreatable.js | 5 +++++ test/AsyncCreatable-test.js | 13 +++++++++++++ 2 files changed, 18 insertions(+) diff --git a/src/AsyncCreatable.js b/src/AsyncCreatable.js index edc51ee10b..eb87b51459 100644 --- a/src/AsyncCreatable.js +++ b/src/AsyncCreatable.js @@ -13,6 +13,10 @@ function reduce(obj, props = {}){ const AsyncCreatable = React.createClass({ displayName: 'AsyncCreatableSelect', + focus () { + this.select.focus(); + }, + render () { return ( @@ -26,6 +30,7 @@ const AsyncCreatable = React.createClass({ return asyncProps.onInputChange(input); }} ref={(ref) => { + this.select = ref; creatableProps.ref(ref); asyncProps.ref(ref); }} diff --git a/test/AsyncCreatable-test.js b/test/AsyncCreatable-test.js index e1dd788238..de1e821126 100644 --- a/test/AsyncCreatable-test.js +++ b/test/AsyncCreatable-test.js @@ -59,4 +59,17 @@ describe('AsyncCreatable', () => { class: ['foo'] }); }); + + describe('.focus()', () => { + beforeEach(() => { + createControl({}); + TestUtils.Simulate.blur(filterInputNode); + }); + + it('focuses the search input', () => { + expect(filterInputNode, 'not to equal', document.activeElement); + creatableInstance.focus(); + expect(filterInputNode, 'to equal', document.activeElement); + }); + }); }); From 14f199ce6da5bba52eaf6e9439b8524958fe764c Mon Sep 17 00:00:00 2001 From: Christopher Dwan Date: Thu, 23 Mar 2017 09:24:21 -0700 Subject: [PATCH 05/22] Make table formatting consistent - remove attempts to align the tables and just use one space around pipes - add pipes to the front and end of each line --- README.md | 155 +++++++++++++++++++++++++++--------------------------- 1 file changed, 77 insertions(+), 78 deletions(-) diff --git a/README.md b/README.md index 5a0202284b..0f777d6b2a 100644 --- a/README.md +++ b/README.md @@ -221,15 +221,15 @@ function render (selectProps) { ##### Creatable properties -Property | Type | Description +| Property | Type | Description :---|:---|:--- -`children` | function | Child function responsible for creating the inner Select component. This component can be used to compose HOCs (eg Creatable and Async). Expected signature: `(props: Object): PropTypes.element` | -`isOptionUnique` | function | Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: `({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean` | -`isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` | -`newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` | -`onNewOptionClick` | function | new option click handler, it calls when new option has been selected. `function(option) {}` | -`shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `({ keyCode: number }): boolean` | -`promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` | +| `children` | function | Child function responsible for creating the inner Select component. This component can be used to compose HOCs (eg Creatable and Async). Expected signature: `(props: Object): PropTypes.element` | +| `isOptionUnique` | function | Searches for any matching option within the set of options. This function prevents duplicate options from being created. By default this is a basic, case-sensitive comparison of label and value. Expected signature: `({ option: Object, options: Array, labelKey: string, valueKey: string }): boolean` | +| `isValidNewOption` | function | Determines if the current input text represents a valid option. By default any non-empty string will be considered valid. Expected signature: `({ label: string }): boolean` | +| `newOptionCreator` | function | Factory to create new option. Expected signature: `({ label: string, labelKey: string, valueKey: string }): Object` | +| `onNewOptionClick` | function | new option click handler, it calls when new option has been selected. `function(option) {}` | +| `shouldKeyDownEventCreateNewOption` | function | Decides if a keyDown event (eg its `keyCode`) should result in the creation of a new option. ENTER, TAB and comma keys create new options by default. Expected signature: `({ keyCode: number }): boolean` | +| `promptTextCreator` | function | Factory for overriding default option creator prompt label. By default it will read 'Create option "{label}"'. Expected signature: `(label: String): String` | ### Combining Async and Creatable @@ -324,84 +324,83 @@ You can extend or override this behavior by providing a `onInputKeyDown` callbac ```js function onInputKeyDown(event) { - switch (event.keyCode) { - case 9: // TAB - // Extend default TAB behavior by doing something here - break; - case 13: // ENTER - // Override default ENTER behavior by doing stuff here and then preventing default - event.preventDefault(); - break; - } + switch (event.keyCode) { + case 9: // TAB + // Extend default TAB behavior by doing something here + break; + case 13: // ENTER + // Override default ENTER behavior by doing stuff here and then preventing default + event.preventDefault(); + break; + } } ` tag - noResultsText | string | 'No results found' | placeholder displayed when there are no matching search results or a falsy value to hide it (can also be a react component) - onBlur | func | undefined | onBlur handler: `function(event) {}` - onBlurResetsInput | bool | true | whether to clear input on blur or not - onChange | func | undefined | onChange handler: `function(newValue) {}` - onClose | func | undefined | handler for when the menu closes: `function () {}` - onCloseResetsInput | bool | true | whether to clear input when closing the menu through the arrow - onFocus | func | undefined | onFocus handler: `function(event) {}` - onInputChange | func | undefined | onInputChange handler: `function(inputValue) {}` - onInputKeyDown | func | undefined | input keyDown handler; call `event.preventDefault()` to override default `Select` behavior: `function(event) {}` - onOpen | func | undefined | handler for when the menu opens: `function () {}` - onValueClick | func | undefined | onClick handler for value labels: `function (value, event) {}` - openOnFocus | bool | false | open the options menu when the input gets focus (requires searchable = true) - optionRenderer | func | undefined | function which returns a custom way to render the options in the menu - options | array | undefined | array of options - placeholder | string\|node | 'Select ...' | field placeholder, displayed when there's no value - scrollMenuIntoView | bool | true | whether the viewport will shift to display the entire menu when engaged - searchable | bool | true | whether to enable searching feature or not - searchPromptText | string\|node | 'Type to search' | label to prompt for search input - loadingPlaceholder | string\|node | 'Loading...' | label to prompt for loading search result - tabSelectsValue | bool | true | whether to select the currently focused value when the `[tab]` key is pressed - value | any | undefined | initial field value - valueKey | string | 'value' | the option property to use for the value - valueRenderer | func | undefined | function which returns a custom way to render the value selected `function (option) {}` +| Property | Type | Default | Description | +|:---|:---|:---|:---| +| addLabelText | string | 'Add "{label}"?' | text to display when `allowCreate` is true | + arrowRenderer | func | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })` | +| autoBlur | bool | false | Blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices | +| autofocus | bool | undefined | autofocus the component on mount | +| autoload | bool | true | whether to auto-load the default async options set | +| autosize | bool | true | If enabled, the input will expand as the length of its value increases | +| backspaceRemoves | bool | true | whether pressing backspace removes the last item when there is no input value | +| backspaceToRemoveMessage | string | 'Press backspace to remove {last label}' | prompt shown in input when at least one option in a multiselect is shown, set to '' to clear | +| cache | bool | true | enables the options cache for `asyncOptions` (default: `true`) | +| className | string | undefined | className for the outer element | +| clearable | bool | true | should it be possible to reset value | +| clearAllText | string | 'Clear all' | title for the "clear" control when `multi` is true | +| clearRenderer | func | undefined | Renders a custom clear to be shown in the right-hand side of the select when clearable true: `clearRenderer()` | +| clearValueText | string | 'Clear value' | title for the "clear" control | +| resetValue | any | null | value to use when you clear the control | +| deleteRemoves | bool | true | whether pressing delete key removes the last item when there is no input value | +| delimiter | string | ',' | delimiter to use to join multiple values | +| disabled | bool | false | whether the Select is disabled or not | +| filterOption | func | undefined | method to filter a single option: `function(option, filterString)` | +| filterOptions | func | undefined | method to filter the options array: `function([options], filterString, [values])` | +| ignoreAccents | bool | true | whether to strip accents when filtering | +| ignoreCase | bool | true | whether to perform case-insensitive filtering | +| inputProps | object | {} | custom attributes for the Input (in the Select-control) e.g: `{'data-foo': 'bar'}` | +| isLoading | bool | false | whether the Select is loading externally or not (such as options being loaded) | +| joinValues | bool | false | join multiple values into a single hidden input using the `delimiter` | +| labelKey | string | 'label' | the option property to use for the label | +| loadOptions | func | undefined | function that returns a promise or calls a callback with the options: `function(input, [callback])` | +| matchPos | string | 'any' | (any, start) match the start or entire string when filtering | +| matchProp | string | 'any' | (any, label, value) which option property to filter on | +| menuBuffer | number | 0 | buffer of px between the base of the dropdown and the viewport to shift if menu doesnt fit in viewport | +| menuRenderer | func | undefined | Renders a custom menu with options; accepts the following named parameters: `menuRenderer({ focusedOption, focusOption, options, selectValue, valueArray })` | +| multi | bool | undefined | multi-value input | +| name | string | undefined | field name, for hidden `` tag | +| noResultsText | string | 'No results found' | placeholder displayed when there are no matching search results or a falsy value to hide it (can also be a react component) | +| onBlur | func | undefined | onBlur handler: `function(event) {}` | +| onBlurResetsInput | bool | true | whether to clear input on blur or not | +| onChange | func | undefined | onChange handler: `function(newValue) {}` | +| onClose | func | undefined | handler for when the menu closes: `function () {}` | +| onCloseResetsInput | bool | true | whether to clear input when closing the menu through the arrow | +| onFocus | func | undefined | onFocus handler: `function(event) {}` | +| onInputChange | func | undefined | onInputChange handler: `function(inputValue) {}` | +| onInputKeyDown | func | undefined | input keyDown handler; call `event.preventDefault()` to override default `Select` behavior: `function(event) {}` | +| onOpen | func | undefined | handler for when the menu opens: `function () {}` | +| onValueClick | func | undefined | onClick handler for value labels: `function (value, event) {}` | +| openOnFocus | bool | false | open the options menu when the input gets focus (requires searchable = true) | +| optionRenderer | func | undefined | function which returns a custom way to render the options in the menu | +| options | array | undefined | array of options | +| placeholder | string\|node | 'Select ...' | field placeholder, displayed when there's no value | +| scrollMenuIntoView | bool | true | whether the viewport will shift to display the entire menu when engaged | +| searchable | bool | true | whether to enable searching feature or not | +| searchPromptText | string\|node | 'Type to search' | label to prompt for search input | +| loadingPlaceholder | string\|node | 'Loading...' | label to prompt for loading search result | +| tabSelectsValue | bool | true | whether to select the currently focused value when the `[tab]` key is pressed | +| value | any | undefined | initial field value | +| valueKey | string | 'value' | the option property to use for the value | +| valueRenderer | func | undefined | function which returns a custom way to render the value selected `function (option) {}` | ### Methods From 9f82da2a5cb7d098f4fabd67a302e713004ac634 Mon Sep 17 00:00:00 2001 From: Christopher Dwan Date: Thu, 23 Mar 2017 09:25:40 -0700 Subject: [PATCH 06/22] Replace tabs in README with two spaces --- README.md | 56 +++++++++++++++++++++++++++---------------------------- 1 file changed, 28 insertions(+), 28 deletions(-) diff --git a/README.md b/README.md index 0f777d6b2a..4ab43b05ae 100644 --- a/README.md +++ b/README.md @@ -78,19 +78,19 @@ When the value is changed, `onChange(selectedValueOrValues)` will fire. var Select = require('react-select'); var options = [ - { value: 'one', label: 'One' }, - { value: 'two', label: 'Two' } + { value: 'one', label: 'One' }, + { value: 'two', label: 'Two' } ]; function logChange(val) { - console.log("Selected: " + val); + console.log("Selected: " + val); } ``` @@ -307,7 +307,7 @@ You can manipulate the input using the onInputChange and returning a new value. ```js function cleanInput(inputValue) { - // Strip all non-number characters from the input + // Strip all non-number characters from the input return inputValue.replace(/[^0-9]/g, ""); } From c81b9c9d03af4959e748be7e95ea8417c5b19bfd Mon Sep 17 00:00:00 2001 From: DDiaz Date: Thu, 6 Apr 2017 10:37:15 -0400 Subject: [PATCH 07/22] Include a className of 'is-clearable' if clearable is true --- src/Select.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Select.js b/src/Select.js index 17b8f3b0ff..63383ac050 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1079,6 +1079,7 @@ const Select = React.createClass({ let className = classNames('Select', this.props.className, { 'Select--multi': this.props.multi, 'Select--single': !this.props.multi, + 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, 'is-loading': this.props.isLoading, From 75d6372e4b549677c96d0e660d4f72fac46d407c Mon Sep 17 00:00:00 2001 From: DDiaz Date: Thu, 6 Apr 2017 10:39:10 -0400 Subject: [PATCH 08/22] spaces to tabs --- src/Select.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Select.js b/src/Select.js index 63383ac050..33e29b37bf 100644 --- a/src/Select.js +++ b/src/Select.js @@ -1079,7 +1079,7 @@ const Select = React.createClass({ let className = classNames('Select', this.props.className, { 'Select--multi': this.props.multi, 'Select--single': !this.props.multi, - 'is-clearable': this.props.clearable, + 'is-clearable': this.props.clearable, 'is-disabled': this.props.disabled, 'is-focused': this.state.isFocused, 'is-loading': this.props.isLoading, From 16ff8e93f24175c1d521f72f55a4088c3dc870ae Mon Sep 17 00:00:00 2001 From: Adam Girton Date: Mon, 10 Apr 2017 09:38:37 -0700 Subject: [PATCH 09/22] Use new prop-types package --- package.json | 4 +- src/Async.js | 49 +++++++++-------- src/Creatable.js | 25 +++++---- src/Option.js | 23 ++++---- src/Select.js | 139 ++++++++++++++++++++++++----------------------- src/Value.js | 13 +++-- 6 files changed, 130 insertions(+), 123 deletions(-) diff --git a/package.json b/package.json index 12151a0505..b0ec54597a 100644 --- a/package.json +++ b/package.json @@ -11,8 +11,10 @@ "url": "https://github.com/JedWatson/react-select.git" }, "dependencies": { + "create-react-class": "15.5.1", "classnames": "^2.2.4", - "react-input-autosize": "^1.1.0" + "react-input-autosize": "^1.1.0", + "prop-types": "15.5.6" }, "devDependencies": { "babel": "^5.8.23", diff --git a/src/Async.js b/src/Async.js index 23d8e9c61a..de2c8ad9ad 100644 --- a/src/Async.js +++ b/src/Async.js @@ -1,35 +1,36 @@ -import React, { Component, PropTypes } from 'react'; +import React, { Component } from 'react'; +import PropTypes from 'prop-types'; import Select from './Select'; import stripDiacritics from './utils/stripDiacritics'; const propTypes = { - autoload: React.PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true - cache: React.PropTypes.any, // object to use to cache results; set to null/false to disable caching - children: React.PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element - ignoreAccents: React.PropTypes.bool, // strip diacritics when filtering; defaults to true - ignoreCase: React.PropTypes.bool, // perform case-insensitive filtering; defaults to true - loadingPlaceholder: React.PropTypes.oneOfType([ // replaces the placeholder while options are loading - React.PropTypes.string, - React.PropTypes.node + autoload: PropTypes.bool.isRequired, // automatically call the `loadOptions` prop on-mount; defaults to true + cache: PropTypes.any, // object to use to cache results; set to null/false to disable caching + children: PropTypes.func.isRequired, // Child function responsible for creating the inner Select component; (props: Object): PropTypes.element + ignoreAccents: PropTypes.bool, // strip diacritics when filtering; defaults to true + ignoreCase: PropTypes.bool, // perform case-insensitive filtering; defaults to true + loadingPlaceholder: PropTypes.oneOfType([ // replaces the placeholder while options are loading + PropTypes.string, + PropTypes.node ]), - loadOptions: React.PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise - multi: React.PropTypes.bool, // multi-value input + loadOptions: PropTypes.func.isRequired, // callback to load options asynchronously; (inputValue: string, callback: Function): ?Promise + multi: PropTypes.bool, // multi-value input options: PropTypes.array.isRequired, // array of options - placeholder: React.PropTypes.oneOfType([ // field placeholder, displayed when there's no value (shared with Select) - React.PropTypes.string, - React.PropTypes.node + placeholder: PropTypes.oneOfType([ // field placeholder, displayed when there's no value (shared with Select) + PropTypes.string, + PropTypes.node ]), - noResultsText: React.PropTypes.oneOfType([ // field noResultsText, displayed when no options come back from the server - React.PropTypes.string, - React.PropTypes.node + noResultsText: PropTypes.oneOfType([ // field noResultsText, displayed when no options come back from the server + PropTypes.string, + PropTypes.node ]), - onChange: React.PropTypes.func, // onChange handler: function (newValue) {} - searchPromptText: React.PropTypes.oneOfType([ // label to prompt for search input - React.PropTypes.string, - React.PropTypes.node + onChange: PropTypes.func, // onChange handler: function (newValue) {} + searchPromptText: PropTypes.oneOfType([ // label to prompt for search input + PropTypes.string, + PropTypes.node ]), - onInputChange: React.PropTypes.func, // optional for keeping track of what is being typed - value: React.PropTypes.any, // initial field value + onInputChange: PropTypes.func, // optional for keeping track of what is being typed + value: PropTypes.any, // initial field value }; const defaultCache = {}; @@ -214,4 +215,4 @@ function defaultChildren (props) { return ( tag with this field name for html forms + clearable: PropTypes.bool, // should it be possible to reset value + 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 + 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) + 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: React.PropTypes.func, // onBlur handler: function (event) {} - onBlurResetsInput: React.PropTypes.bool, // whether input is cleared on blur - onChange: React.PropTypes.func, // onChange handler: function (newValue) {} - onClose: React.PropTypes.func, // fires when the menu is closed - onCloseResetsInput: React.PropTypes.bool, // whether input is cleared when menu is closed through the arrow - onFocus: React.PropTypes.func, // onFocus handler: function (event) {} - onInputChange: React.PropTypes.func, // onInputChange handler: function (inputValue) {} - onInputKeyDown: React.PropTypes.func, // input keyDown handler: function (event) {} - onMenuScrollToBottom: React.PropTypes.func, // fires when the menu is scrolled to the bottom; can be used to paginate options - onOpen: React.PropTypes.func, // fires when the menu is opened - onValueClick: React.PropTypes.func, // onClick handler for value labels: function (value, event) {} - openAfterFocus: React.PropTypes.bool, // boolean to enable opening dropdown when focused - openOnFocus: React.PropTypes.bool, // always open options menu on focus - optionClassName: React.PropTypes.string, // additional class(es) to apply to the