diff --git a/.TODO.md b/.TODO.md
deleted file mode 100644
index b98166a2e9..0000000000
--- a/.TODO.md
+++ /dev/null
@@ -1,98 +0,0 @@
-# Changes planned from Beta -> RC:
-
-* [ ] Look into package size reduction, extract optional modules, e.g
- * createFilter could be optional, saving 2.6k gz
- * vendor simple Menu by default, allow opt-in to advanced usage
-* [ ] Bind getStyles for each component
-
----
-
-# Order of focus:
-
-* [ ] Review how the `required` state of the `` can be handled
-* [ ] Example of how to implement Separators
-* [ ] Handle Header and Footer elements in the Menu
-* [ ] Keyboard focusing of values in multi select
-
----
-
-# Review:
-
-### Select Component Props
-
-* [ ] `backspaceToRemoveMessage` _investigate_
-* [x] `className` _investigate_ might need to move the className util into commonProps
-* [x] `openOnClick` / `openOnFocus` needs implementation
-* [ ] `required` _|||_ this has some complex behaviour in v1 which may or may not be needed
-* [x] `tabIndex` needs implementation
-
-#### Done
-
-* [x] `id`
-* [x] `inputId` falls back to `react-select-${props.instanceId}-input`
-* [x] `autoBlur` **REMOVED** can be handled with `onChange`
-* [x] `autosize` **REMOVED** can replace `` component
-* [x] `onClose` --> `onMenuClose`
-* [x] `onOpen` --> `onMenuOpen`
-* [x] `onBlurResetsInput` / `onCloseResetsInput` / `onSelectResetsInput` **REMOVED** now that `inputValue` can be controlled, these should be unnecessary
-* [x] `onMenuScrollToBottom` implemented
-* [x] `clearable` --> `isClearable`
-* [x] `rtl` --> `isRTL`
-* [x] `pageSize`
-* [x] `menuShouldScrollIntoView`
-* [x] `searchable` --> `isSearchable`
-* [x] `resetValue` **REMOVED** can be handled with `onInputChange`
-* [x] `clearAllText` / `clearValueText` **REMOVED** title no longer applied, can replace ``
-
-### Async Component Props
-
-* [ ] `autoLoad` _investigate_ should be considered in conjunction with `searchPromptText`, may affect `defaultOptions` behaviour
-* [ ] `searchPromptText` _investigate_ how do we know to display it? (https://goo.gl/PLTwV5)
-
----
-
-# Maybe:
-
-* [ ] Virtualisation
-* [ ] Prevent values from being popped, was `option.clearableValue === false`
-* [ ] Async w/ pagination
-* [ ] Extention point to reorder / change menu options array when it's created
-
----
-
-# Later:
-
-* [ ] Reordering of Options (drag and drop)
-
----
-
-# Done:
-
-* [x] Tags mode (Creatable)
-* [x] Handle changing of isDisabled prop
-* [x] Better mobile support and touch handling
-* [x] Better control of flip behaviour
-* [x] Scroll the menu into view when it opens
-* [x] Handle touch outside (see v1 implementation)
-* [x] Review implementation of `isSearchable` prop (creates a "fake" input)
-* [x] Async + Creatable variant
-* [x] Cleanup
-* [x] Documentation - Props, Customisation
-* [x] Upgrade Guide from v1 -> v2
-* [x] Lock scrolling on Menu (enable with prop)
-* [x] Make inputValue a controllable prop
-* [x] Make menuIsOpen a controllable prop
-* [x] Finalise theme and style customisation framework
-* [x] Remove `disabledKey`, clean up similar functionality
-* [x] Pseudo-focus Options
-* [x] Keyboard navigation
-* [x] Make `isDisabled` / `isSelected` etc. props
-* [x] Scroll to focused option
-* [x] Add `autofocus` prop
-* [x] Add HTML Form Input
-* [x] Async with:
-* [x] * promises
-* [x] * better loading state and behaviour
-* [x] Pass more (and consistent?) props and state from Select to Components
-* [x] Fix issue with how the mouse hover interacts with keyboard scrolling
-* [x] Ability to customise built-in strings
diff --git a/.babelrc b/.babelrc
deleted file mode 100644
index 48ce4d451a..0000000000
--- a/.babelrc
+++ /dev/null
@@ -1,14 +0,0 @@
-{
- "plugins": [
- "emotion",
- "transform-class-properties",
- "transform-object-rest-spread"
- ],
- "presets": ["env", "react"],
- "ignore": ["node_modules"],
- "env": {
- "test": {
- "plugins": ["istanbul"]
- }
- }
-}
diff --git a/.changeset/README.md b/.changeset/README.md
new file mode 100644
index 0000000000..26f218eda3
--- /dev/null
+++ b/.changeset/README.md
@@ -0,0 +1,36 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works with `bolt` to help you release components from a mono-repository. You can find the full documentation for it [here](https://www.npmjs.com/package/@changesets/cli)
+
+To help you get started though, here are some things you should know about this folder:
+
+## Changesets are automatically generated
+
+Changesets are generated by the `yarn changeset` or `npx changeset` command. As long as you are following a changeset release flow, you shouldn't have any problems.
+
+## Each changeset is its own folder
+
+We use hashes by default for these folder names to avoid collisions when generating them, but there's no harm that will come from renaming them.
+
+## Changesets are automatically removed
+
+When `changeset bump` or equivalent command is run, all the changeset folders are removed. This is so we only ever use a changeset once. This makes this a very bad place to store any other information.
+
+## Changesets come in two parts
+
+You should treat these parts quite differently:
+
+- `changes.md` is a file you should feel free to edit as much as you want. It will be prepended to your changelog when you next run your version command.
+- `changes.json` is a file that includes information about releases, what should be versioned by the version command. We strongly recommend against editing this directly, as you may make a new changeset that puts your bolt repository into an invalid state.
+
+## I want to edit the information in a `changes.json` - how do I do it safely?
+
+The best option is to make a new changeset using the changeset command, copy over the `changes.md`, then delete the old changeset.
+
+## Can I rename the folder for my changeset?
+
+Absolutely! We need unique hashes to make changesets play nicely with git, but changing your folder from our hash to your own name isn't going to cause any problems.
+
+## Can I manually delete changesets?
+
+You can, but you should be aware this will remove the intent to release communicated by the changeset, and should be done with caution.
diff --git a/.changeset/config.json b/.changeset/config.json
new file mode 100644
index 0000000000..71ec72852f
--- /dev/null
+++ b/.changeset/config.json
@@ -0,0 +1,7 @@
+{
+ "$schema": "https://unpkg.com/@changesets/config@0.2.1/schema.json",
+ "changelog": "./getChangelogEntry",
+ "commit": false,
+ "linked": [],
+ "access": "public"
+}
diff --git a/.changeset/fair-panthers-marry.md b/.changeset/fair-panthers-marry.md
new file mode 100644
index 0000000000..3a2fa9c028
--- /dev/null
+++ b/.changeset/fair-panthers-marry.md
@@ -0,0 +1,5 @@
+---
+"react-select": patch
+---
+
+The Menu bottom is no longer scrolled into view when menuShouldScrollIntoView=false
diff --git a/.changeset/getChangelogEntry.js b/.changeset/getChangelogEntry.js
new file mode 100644
index 0000000000..3641c30cf1
--- /dev/null
+++ b/.changeset/getChangelogEntry.js
@@ -0,0 +1,34 @@
+require('dotenv').config();
+const { getInfo } = require('@changesets/get-github-info');
+
+const getReleaseLine = async (changeset, type) => {
+ const [firstLine, ...futureLines] = changeset.summary
+ .split('\n')
+ .map(l => l.trimRight());
+ let { links } = await getInfo({
+ repo: 'JedWatson/react-select',
+ commit: changeset.commit,
+ });
+ return `- ${links.commit}${links.pull === null ? '' : ` ${links.pull}`}${
+ links.user === null ? '' : ` Thanks ${links.user}!`
+ } - ${firstLine}\n${futureLines.map(l => ` ${l}`).join('\n')}`;
+};
+
+const getDependencyReleaseLine = async (changesets, dependenciesUpdated) => {
+ if (dependenciesUpdated.length === 0) return '';
+
+ const changesetLinks = changesets.map(
+ changeset => `- Updated dependencies [${changeset.commit}]:`
+ );
+
+ const updatedDepenenciesList = dependenciesUpdated.map(
+ dependency => ` - ${dependency.name}@${dependency.version}`
+ );
+
+ return [...changesetLinks, ...updatedDepenenciesList].join('\n');
+};
+
+module.exports = {
+ getReleaseLine,
+ getDependencyReleaseLine,
+};
diff --git a/.circleci/config.yml b/.circleci/config.yml
index 0df7795c00..1a75fe2e1e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,9 +2,9 @@ version: 2
docker_defaults: &docker_defaults
docker:
- - image: cypress/base:8
+ - image: cypress/browsers:node12.18.0-chrome83-ff77
environment:
- TERM: xterm
+ TERM: xterm
working_directory: ~/project/repo
attach_workspace: &attach_workspace
@@ -15,24 +15,25 @@ install_steps: &install_steps
steps:
- checkout
- restore_cache:
- name: Restore node_modules cache
- keys:
- - dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
- - dependency-cache-{{ .Branch }}-
- - dependency-cache-
+ name: Restore node_modules cache
+ keys:
+ - dependency-cache-{{ .Branch }}-{{ checksum "yarn.lock" }}
+ - dependency-cache-{{ .Branch }}-
+ - dependency-cache-
+ - cache-{{ checksum "package.json" }}
- run:
- name: Installing Dependencies
- command: |
- yarn install --silent
+ name: Installing Dependencies
+ command: |
+ yarn install --silent
- save_cache:
- name: Save node_modules cache
- key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
- paths:
- - node_modules/
+ name: Save node_modules cache
+ key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }}
+ paths:
+ - ~/.cache
- persist_to_workspace:
- root: ~/project
- paths:
- - repo
+ root: ~/project
+ paths:
+ - repo
workflows:
version: 2
@@ -40,11 +41,11 @@ workflows:
jobs:
- build
- unit_test:
- requires:
- - build
+ requires:
+ - build
- end_to_end:
- requires:
- - build
+ requires:
+ - build
jobs:
build:
<<: *docker_defaults
@@ -54,16 +55,21 @@ jobs:
steps:
- *attach_workspace
- run:
- name: Running unit tests
- command: |
- yarn lint
- yarn test:jest
- yarn coveralls
+ name: Running unit tests
+ command: |
+ yarn prettier:check
+ yarn lint
+ yarn flow check --flowconfig-name=.flowconfig-ci
+ yarn test:jest
+ yarn coveralls
end_to_end:
<<: *docker_defaults
steps:
- *attach_workspace
- run:
- name: Running E2E tests
- command: |
- yarn e2e
+ name: Running E2E tests
+ command: |
+ yarn global add cypress
+ yarn install --silent
+ yarn cypress install
+ yarn e2e
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
new file mode 100644
index 0000000000..9c1083f61f
--- /dev/null
+++ b/.codesandbox/ci.json
@@ -0,0 +1,8 @@
+
+
+{
+ "buildCommand": "build",
+ "packages": ["packages/*"],
+ "sandboxes": ["nfmxw"]
+}
+
diff --git a/.eslintignore b/.eslintignore
index 80dc4fffe4..6db96945f0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,7 +1,8 @@
coverage/*
cypress/plugins/*
cypress/support/*
-dist/*
+**/dist/*
flow-typed/*
lib/*
node_modules/*
+**/node_modules/*
diff --git a/.eslintrc.js b/.eslintrc.js
index e57f7f0d48..3172aa03a5 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,4 +1,5 @@
module.exports = {
+ extends: ['plugin:react-hooks/recommended'],
parser: 'babel-eslint',
env: {
browser: true,
@@ -14,6 +15,7 @@ module.exports = {
argsIgnorePattern: '^event$',
ignoreRestSiblings: true,
vars: 'all',
+ varsIgnorePattern: 'jsx|emotionJSX',
},
],
curly: [2, 'multi-line'],
diff --git a/.flowconfig b/.flowconfig
index ca2bf61839..39bc0d7107 100644
--- a/.flowconfig
+++ b/.flowconfig
@@ -1,8 +1,11 @@
[ignore]
-./lib/.*
-./dist/.*
.*/node_modules/cypress/.*
+
+[untyped]
.*/node_modules/@atlaskit/tooltip/dist/cjs/components/Marshal.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/FocusLock/index.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/gateway/components/Gateway.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/withRenderTarget.js.flow
[include]
@@ -10,6 +13,8 @@
flow-typed
[lints]
+unclear-type=warn
+untyped-type-import=error
[options]
module.name_mapper='\!\!raw-loader\!.*' -> '/typings/raw-loader.js'
diff --git a/.flowconfig-ci b/.flowconfig-ci
new file mode 100644
index 0000000000..06a3cbd6f3
--- /dev/null
+++ b/.flowconfig-ci
@@ -0,0 +1,25 @@
+[ignore]
+.*/node_modules/cypress/.*
+
+[untyped]
+.*/node_modules/@atlaskit/tooltip/dist/cjs/components/Marshal.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/FocusLock/index.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/gateway/components/Gateway.js.flow
+.*/node_modules/@atlaskit/layer-manager/dist/cjs/components/withRenderTarget.js.flow
+
+[include]
+
+[libs]
+flow-typed
+
+[lints]
+unclear-type=warn
+untyped-type-import=error
+
+[options]
+module.name_mapper='\!\!raw-loader\!.*' -> '/typings/raw-loader.js'
+module.name_mapper='\!\!extract-react-types-loader\!.*' -> '/typings/extract-react-types-loader.js'
+server.max_workers=1
+sharedmemory.hash_table_pow=21
+
+[strict]
diff --git a/.github/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md
index 20856b2f33..1a70f05a29 100644
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@@ -3,13 +3,21 @@
Before creating an issue...
# Are you asking a question?
-Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag
+Please don't file GitHub issues to ask questions. Use Stack Overflow with a [#react-select](http://stackoverflow.com/questions/tagged/react-select) tag.
# Are you reporting a bug or runtime error?
Please include a test case that demonstrates the issue you're reporting!
+
This is very helpful to maintainers in order to help us see the issue you're seeing.
+Please note we are currently only directing our efforts towards the current major (v3) version and beyond.
+
+We understand this might be inconvenient but it is in the best interest of supporting the broader community and to sustain the `react-select` project going forward.
+
+To report bugs against react-select v3 please fork the following code-sandbox:
+https://codesandbox.io/s/react-select-v3-sandbox-jgdch
+
To report bugs against react-select v2 please fork the following code-sandbox:
https://codesandbox.io/s/k5rvn9z3lv
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 0000000000..520150afcf
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,36 @@
+name: Release
+
+on:
+ push:
+ branches:
+ - master
+
+jobs:
+ release:
+ name: Release
+ runs-on: ubuntu-latest
+ steps:
+ - name: Checkout Repo
+ uses: actions/checkout@master
+ with:
+ # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+ fetch-depth: 0
+
+ - name: Setup Node.js 10.x
+ uses: actions/setup-node@master
+ with:
+ node-version: 10.x
+
+ - name: Install Yarn
+ run: npm install --global yarn
+
+ - name: Install Dependencies
+ run: yarn
+
+ - name: Create Release Pull Request or Publish to npm
+ uses: changesets/action@master
+ with:
+ publish: yarn release
+ env:
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+ NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
diff --git a/.nvmrc b/.nvmrc
index a2f28f43be..48082f72f0 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-8.4.0
+12
diff --git a/.nycrc b/.nycrc
deleted file mode 100644
index e6c59634b3..0000000000
--- a/.nycrc
+++ /dev/null
@@ -1,12 +0,0 @@
-{
- "reporter": [
- "lcov",
- "text-summary"
- ],
- "require": [
- "babel-register"
- ],
- "sourceMap": false,
- "instrument": false,
- "report-dir": "./coverage"
-}
diff --git a/.prettierignore b/.prettierignore
index ec6d3cdd7f..6db96945f0 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1 +1,8 @@
-package.json
+coverage/*
+cypress/plugins/*
+cypress/support/*
+**/dist/*
+flow-typed/*
+lib/*
+node_modules/*
+**/node_modules/*
diff --git a/.sweet-changelogs.js b/.sweet-changelogs.js
deleted file mode 100644
index 4dd2bd5e5f..0000000000
--- a/.sweet-changelogs.js
+++ /dev/null
@@ -1,6 +0,0 @@
-module.exports = {
- filename: 'HISTORY.md',
- message: ({ pr, user }) =>
- `* ${pr.title}, thanks [${user.name ||
- user.login}](${user.url}) - [see PR](${pr.url})`,
-};
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
new file mode 100644
index 0000000000..b9c862838a
--- /dev/null
+++ b/CONTRIBUTING.md
@@ -0,0 +1,25 @@
+# Contributing
+
+Thanks for your interest in React-Select. All forms of contribution are
+welcome, from issue reports to PRs and documentation / write-ups.
+
+Before you open a PR:
+
+* In development, run `yarn start` to build (and watch) the project source, and run
+the [development server](http://localhost:8000).
+* Please ensure all the examples work correctly after your change. If you're
+adding a major new use-case, add a new example `/docs/examples` and subsequent documentation demonstrating its use `/docs/pages`.
+* Ensure that your effort is aligned with the project's roadmap by talking to
+the maintainers, especially if you are going to spend a lot of time on it.
+* Make sure there's an issue open for any work you take on and intend to submit
+as a pull request - it helps core members review your concept and direction
+early and is a good way to discuss what you're planning to do.
+* If you open an issue and are interested in working on a fix, please let us
+know. We'll help you get started, rather than inadvertently doubling up on your hard work.
+* Make sure you do not add regressions by running `yarn test`.
+* Where possible, include tests with your changes, either that demonstrates the
+bug, or tests the new functionality. If you're not sure how to test your
+changes, feel free to ping @gwyneplaine
+* Please [follow our established coding conventions](https://github.com/keystonejs/keystone/wiki/Coding-Standards)
+(with regards to formatting, etc)
+* All new features and changes need documentation.
diff --git a/HISTORY.md b/HISTORY.md
deleted file mode 100644
index 2b765312ee..0000000000
--- a/HISTORY.md
+++ /dev/null
@@ -1,1391 +0,0 @@
-# React-Select
-
-## v2.2.0 / 2018-12-28
-
-### Bug Fixes
-* [#3296](https://github.com/JedWatson/react-select/pull/3296) Fix for tab interactions when in composition mode with an IME. Thanks [yshr446](https://github.com/yshr446) for the PR.
-* [#3302](https://github.com/JedWatson/react-select/pull/3302) Fix to breaking android and mobile safari touch bug [#2755](https://github.com/JedWatson/react-select/issues/2755), by adding more conscientious checks to the onTouchStart and onTouchMove listeners. Thanks [xakep139](https://github.com/xakep139) for the PR.
-* [#3303](https://github.com/JedWatson/react-select/pull/3303) Input and GroupHeading components now get passed the selectProps prop, thanks [maxmarchuk](https://github.com/maxmarchuk) for the PR.
-* [#3260](https://github.com/JedWatson/react-select/pull/3260) As a result of the CSP nonce support feature, the emotion instance is now cached and passed down to all internal components, meaning that users looking to heavily customise their Select components can do so without externally importing emotion, and nonce instances are respected per select instance. Please see [this segment](https://react-select.com/styles#cx-and-custom-components) in the docs for a more detailed explanation.
-* [#3299](https://github.com/JedWatson/react-select/pull/3299) fix to assistive text on menu open.
-
-### Feature
-* [#3260](https://github.com/JedWatson/react-select/pull/3260) Add CSP nonce support to Select, thanks [Avaq](https://github.com/Avaq) and [Andarist](https://github.com/Andarist) for the heavy lifting.
-
-## v2.1.2 / 2018-11-22
-
-### Bug fixes
-
-* [#3161] Initialize state with `inputValue` when `defaultOptions` is true in AsyncSelect, resolves [#3160](https://github.com/JedWatson/react-select/issues/3160), thanks [@cutterbl](https://github.com/cutterbl)
-* [#3096] Placeholder component now also receives the isFocused state value as a prop. Thanks [@Nelrohd](https://github.com/Nelrohd)
-* [#3060] Fix bug where trying to set the cursor somewhere in an input value would close the menu. Thanks [@stijndeschuymer](https://github.com/stijndeschuymer)
-* [#3163] Fixed bug where isDisabled wasn't being reflected onto the DummyInput, which meant that disabled non searchable selects were still focusable. Thanks [@gm0t](https://github.com/gm0t)
-* [#3216] Fixes bug where clearing with backspace in a single select would result in an empty array, as opposed to the expected empty object. Thanks [@IanVS](https://github.com/IanVS)
-* [#3013] Fixes bug where the menu would close on trying to scroll using the scroll bar in IE11. Thanks [@rakid](https://github.com/rakid)
-
-### Misc
-
-* A big shoutout to everyone who helped contribute to the docs. In no particular order [@acrawford13](https://github.com/JedWatson/react-select/commits?author=acrawford13), [@kirillku](https://github.com/kirillku), [@ajaymathur](https://github.com/ajaymathur), [@mgalgs](https://github.com/mgalgs), [@cutterbl](https://github.com/cutterbl), [@JonathanWbn](https://github.com/JonathanWbn), [@mwood23](https://github.com/mwood23), [@stevemao](https://github.com/stevemao), [@jossmac](https://github.com/jossmac), and anyone else I've missed.
-* Thanks to [@IanVS](https://github.com/IanVS) for cleaning up our cypress tests.
-
-## v2.1.1 / 2018-10-24
-
-### Bug fixes
-
-* [#3132] Strip theme props from default Input and GroupHeading components, as they were polluting the DOM.
-* [#3131] Add support for the 'Delete' key in the internal onKeyDown method. Same functionality as 'Backspace'.
-* [#3100] Update flow-types and normalised default prop declarations in indicators. Thanks [iseredov](https://github.com/iseredov)
-
-### Updates
-
-* [#3083] Added sideEffects property to package.json to support tree-shaking in webpack 4.x. Thanks [SimenB](https://github.com/SimenB).
-* [#3078] Update jest dependency to 23.6.0. Thanks [papandreou](https://github.com/papandreou)
-* [#3065] Update babel-plugin-emotion to 9.2.10. Thanks [mtzhang](https://github.com/mtzhang)
-* [#3108] Update docs to include instructions for replicating the simple-value use case within react-select v2. Thanks [elboletaire](https://github.com/elboletaire)
-
-## v2.1.0 / 2018-10-03
-
-* [#2839] Added support for theming via theme prop. Thanks [akx](https://github.com/akx)
-* [#2874] Fixed flow-types of MultiValue components. Thanks [mike1808](https://github.com/mike1808)
-* [#2903] Fix missing form input when there isn't a selected value. Thanks [alvinsj](https://github.com/alvinsj)
-* [#2934] Reduced theme colors to a sane value set to make the exported theme more easy to consume and configure. Thanks [jossmac](https://github.com/jossmac)
-* [#2876] Added overflow hidden to valueContainer to stop overflowing text in the control. Thanks [mike1808](https://github.com/mike1808)
-* [#2975] Separated menu placement logic from menu primitive. Thanks [jossmac](https://github.com/jossmac).
-
-## v2.0.0 / 2018-07-23
-
-* async select now accepts a filterOptions function as a prop [#2822](https://github.com/JedWatson/react-select/pull/2822)
-* [BREAKING] react-select now exports react-select.esm.js from dist instead of react-select.es.js [#2641](https://github.com/JedWatson/react-select/pull/2641)
-* [BREAKING] innerRef assignments in custom components must now be made from the root of the prop object, as opposed to reaching into innerProps. This is part of the work to normalize the behaviour circa custom components. [#2824](https://github.com/JedWatson/react-select/pull/2824)
-* className and classNamePrefix deprecation warning and backward compatibility removed. className now only affects the select container, classNamePrefix prefixes all internal components. [#2820](https://github.com/JedWatson/react-select/pull/2820)
-* Added `closeMenuOnScroll` prop, which can either be a `boolean` or a `function`, if set to `true` the select menu will close on scroll of the document/body. If a function is supplied, it must take the following shape `(event: ScrollEvent) => boolean`, the boolean value will be used to resolve whether the menu should be closed or stay open. [#2809](https://github.com/JedWatson/react-select/pull/2809), thanks [Vynlar](https://github.com/Vynlar) for this.
-* Added fix to support IME inputs. [#2767](https://github.com/JedWatson/react-select/pull/2767), thanks [shamabe](https://github.com/shamabe)
-* Removed primitives, and normalise multi-value components to be in line with existing component customisation patterns. [#2821](https://github.com/JedWatson/react-select/pull/2821)
-* Normalised isOptionDisabled to be inline with its sibling prop isOptionSelected. [#2821](https://github.com/JedWatson/react-select/pull/2695) Thanks [SimeonC](https://github.com/SimeonC)
-* [#2814](https://github.com/JedWatson/react-select/pull/2814) Added memoization to custom components within Select.js as well as in the exported makeAnimated factory method. Thanks to [Alex Reardon's](https://github.com/alexreardon) [memoize-one](https://github.com/alexreardon/memoize-one)
-* [#2652](https://github.com/JedWatson/react-select/pull/2652), Async Select now re-evaluates defaultOptions on componentWillReceiveProps. Thanks [jesstelford](https://github.com/jesstelford)
-
-## v2.0.0-beta.7 / 2018-07-03
-
-* Removed old aria-attributes in Option, MenuList and other components in favor of an aria-live-region implementation. `screenReaderStatus` prop is still at the moment untouched, and `aria-labelledby` and `aria-label` props are still available and retain their functionality. See [#2581](https://github.com/JedWatson/react-select/pull/2581).
-* Internal ref `input` is now `inputRef` for consistency.
-* Internal ref `menuRef` is now `menuListRef` for consistency.
-* Fixed bug with MultiValueRemove interaction not working in mobile [#2762](https://github.com/JedWatson/react-select/pull/2762), thanks [chuckbergeron](https://github.com/chuckbergeron).
-* Added makeAnimated function export, that takes passed in components and wraps them in higher order components that expose animated functionality. [#2724](https://github.com/JedWatson/react-select/pull/2724)
-* Added functionality to not render the menu if `noOptionsMessage` or `loadingMessage` are set to null. [#2754](https://github.com/JedWatson/react-select/pull/2754)
-* Fixed bug with mobile menu being blocked when `menuShouldBlockScroll` is true.
-[#2756](https://github.com/JedWatson/react-select/pull/2756)
-* Enabled hideSelectedOptions functionality for single-select as well. Changed logic so that if isMulti is true and hideSelectedOptions is not defined, we will hide selected options by default. Explicitly setting hideSelectedOptions will override this behaviour. https://github.com/JedWatson/react-select/pull/2753
-* Updates to flow types, thanks [mike1808](https://github.com/mike1808), [himerus](https://github.com/himerus),
-[teamable-software](https://github.com/teamable-software) and
-* Bumped internal flow-bin dependency to 0.72.0, [#2646](https://github.com/JedWatson/react-select/pull/2646) thanks [lunij](https://github.com/lunij)
-* Fixed [#2701](https://github.com/JedWatson/react-select/issues/2701), use of un-polyfilled array.includes() in Select.js, this has now been subbed out for a IE compatible implementation.
-* [#2733](https://github.com/JedWatson/react-select/issues/2733), fixed classname bug to do with prefixing classes with modifiers.
-* [#2723](https://github.com/JedWatson/react-select/issues/2732), fixed emotion compilation bug blocking loadingDot rendering.
-* [#2749](https://github.com/JedWatson/react-select/pull/2749) fixed typo in docs. thanks [JuhQ](https://github.com/juhq)
-* [#2717](https://github.com/JedWatson/react-select/pull/2717) added selected value to onChange to accommodate multi-select, thanks [SimeonC](https://github.com/simeonc)
-
-## v2.0.0-beta.6 / 2018-05-23
-
-* Fixed bug with `css` attribute being wrongly applied to a DOM element in SingleValue. Thanks [guigs](http://github.com/guigs)
-* Added `removedValue` to the `actionMeta` of the `remove-value` action that's passed into the `onChange` prop.
-* Reverted previous change of `innerRef` in `innerProps` of custom Components to `ref`. The property is now once again named `innerRef`. This is mostly to resolve issues with styled-components not passing `ref` down to wrapped dom elements, however this is also a safer pattern to apply as it requires users providing their own custom components to explicitly associate the passed down ref with the requisite dom element.
-* selectValue now filters items based on the getOptionValue method. Thanks (inv8der)[http://github.com/inv8der]
-* Added `createOptionPosition` to creatable select to allow users to specify where the createOption element appears in the menu.
-* Added touch handling logic to detect user intent to scroll the page when interacting with the select control.
-
-## v2.0.0-beta.5 / 2018-05-18
-
-* Added `controlShouldRenderValue` prop, defaults to true. Setting it to false disables rendering values in the control. Thanks[Joss Mackison](http://github.com/jossmac)
-
-## v2.0.0-beta.4 / 2018-05-15
-* Fixed bug where transition props were being spread onto the DummyInput causing react warnings in the console. Thanks [Mike Gardner](https://github.com/MikeLimeRocket)
-
-## v2.0.0-beta.3 / 2018-05-14
-
-**Note**: There is an important change in this release to the behaviour of `className`.
-
-Previously, `className` would control the class names applied to internal components
-as well as the containing element. Now, the `className` prop only controls the class
-name of the containing element, and the new prop `classNamePrefix` controls classes
-applies to internal components.
-
-Until 2.0.0 final is released, we have added backwards compatibility and a deprecation
-warning to cover this change.
-
-* Added `classNamePrefix` prop, which now controls the class names applied to internal components
-* Refactored cx internal implementation to reduce specificity of css-in-jss base styles.
-* `maxValueHeight` prop removed
-* Added `--is-disabled` className modifier to Option component, thanks [eemeli](https://github.com/eemeli)
-* Fixed various IE11 issues, see [#2583](https://github.com/JedWatson/react-select/issues/2583)
-* Added multi-value keyboard navigation using left and right arrows.
-* Simplified flow distribution, thanks [falconmick](https://github.com/falconmick)
-* Added fix to ensure focus is on the Input when the menu opens
-
-## v2.0.0-beta.2 / 2018-04-25
-
-* Switched from glam to [emotion](https://emotion.sh) for css-in-js
-* Input colour can now be changed
-* Use of React 16 Fragment removed, 2.0.0 should work with React 15
-* SSR support improved
-* Indicator icons are now exported
-
-## v2.0.0-beta.1 / 2018-04-20
-
-* Added `tabIndex` prop
-* Added `classNames` prop
-* Added upgrade guide from v1 --> v2
-* Fixed bug with overflowing long values in the control
-* Fixed ie11 bug to do with absolutely positioned children in flex parent.
-* Documentation ie11, styling and copy improvements
-
-## v2.0.0-alpha.11 / 2018-04-12
-
-Minor fix since last alpha:
-
-* Fixed a flow type issue that was causing issues for consumers
-
-## v2.0.0-alpha.10 / 2018-04-10
-
-Minor fix since last alpha:
-
-* Fixed an issue with `dist/react-select.es.js` where `babelHelpers` weren't defined
-
-## v2.0.0-alpha.9 / 2018-04-10
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Added `openMenuOnClick` and `openMenuOnFocus` props
-* Significant test coverage and documentation improvements
-* Added `onMenuScrollToTop` and `onMenuScrollToBottom` event props
-* `scrollMenuIntoView` prop renamed `menuShouldScrollIntoView`
-* `onKeyDown` now based on event.key not event.keyCode
-* Component ids no longer have double separators
-* Fixed a Firefox bug with `position: absolute` and `display: flex`
-* Added support for fixed position menu and scroll blocking
-* Fixed issue with transition group props being passed to child components
-* Fixed issue with portalled menu display when `menuPlacement="top"`
-
-## v2.0.0-alpha.8 / 2018-02-20
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Made `focus` and `blur` methods work consistently when composing HOCs
-* Added `menuPortalTarget` prop which portals the menu, with a `MenuPortal` component and `menuPortal` style key
-* Allow the `MultiValueRemove` component children to be changed
-* Lots of new tests, updates to documentation and examples
-
-## v2.0.0-alpha.7 / 2018-02-14
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Significantly improved touch and mobile support
-* New positioning behaviour for the Menu
-* Added `scrollMenuIntoView` prop, which does exactly what you'd expect
-* Added action meta to the `onInputChange` event handler arguments
-* `Creatable` Component Added
-* `AsyncCreatable` Component Added
-* Fixed an issue with the layout that would trigger a Firefox repaint bug
-* Improved behaviour when the `isDisabled` prop value is changed
-* The `IndicatorSeparator` isn't rendered when there is no `DropdownIndicator`
-* Converted `StateManager` to a higher order component
-* New website, docs, and more tests! (still WIP)
-* Examples can now be launched in CodeSandbox, thanks to [Ben Conolly](https://github.com/noviny)
-
-## v2.0.0-alpha.6 / 2018-02-14
-
-Ongoing rewrite. Major changes since last alpha:
-
-* `menuIsOpen`, `inputValue` and `value` are now controllable props that default to internal state
-* Fixed missing loading indicator
-* Added "open in code sandbox" to all examples
-* Switched menu rendering from li to div tags for better screen reader usability
-* Removed unused primitives and simplified indicator components
-* Improved accessibility of groups and options, cleaned up Group implementation
-* Fixed some input alignment issues
-* Added right-to-left support with `isRtl` prop
-* Support blocking page scroll at menu boundaries with `captureMenuScroll` prop
-* Added automatic menu flipping at window boundaries with `menuPlacement` and `menuShouldFlip` props
-* Added `isSearchable` prop to support simple (not searchable) select inputs
-* Added `pageSize` prop
-
-## v2.0.0-alpha.5 / 2018-02-07
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Fixed an issue where animated values would show ellipsis while leaving
-* Long single values are now also correctly truncated
-
-## v2.0.0-alpha.4 / 2018-02-06
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Added support for Promises in the Async component
-* Added `setValue` method on the Select class
-* More consistent use of `innerProps` for internal components
-* Internal components are now provided a consistent set of props and API
-* Improved handling of keyboard and mouse interaction for options in the menu
-* Default filtering behaviour now has parity with v1
-* New `createFilter` method lets you customise the filter options
-* Some unnecessary components have been removed for better performance
-* Long values are now truncated
-
-## v2.0.0-alpha.3 / 2018-02-02
-
-Ongoing rewrite. Major changes since last alpha:
-
-* Added `getOptionValue`, `getOptionLabel` and `formatOptionLabel` props
-* Added `isOptionSelected` and `isOptionDisabled` props
-* Added `name` and `delimiter` props to support hidden html inputs for forms
-* Added `loadingMessage`, `noOptionsMessage` and `screenReaderStatus` props so messages can be customised
-* Customisable components are now passed `innerProps` for simpler implementation
-* Cleaned up internal Components and made sure they can all be styled
-* Implemented customisable filtering function with support for case and diacritics
-* Fixed various css bugs and vendor prefixing issues
-* Accessibility improvements
-
-## v2.0.0-alpha.2 / 2018-01-25
-
-Ongoing rewrite. Major changes since last alpha:
-
-* `Async` component added
-* `styles` prop added to Select component
-* `isLoading` prop to Select component and new indicator added
-* Support added for disabled options
-* Internal components cleaned up
-* Cypress tests added
-* CSS class names added to default components
-* Accessibility improvements
-
-## v2.0.0-alpha.1 / 2018-01-12
-
-Complete rewrite, docs and upgrade notes on changes from v1 to come later.
-
-## v1.2.1 / 2018-01-13
-
-* Fixed blocking the Del key when deleteRemoves is false, thanks [Nachtigall, Jens (init)](https://github.com/jnachtigall) - [see PR](https://github.com/JedWatson/react-select/pull/2291)
-* Fixed inline-block rendering for arrowRenderer without autosize, thanks [Harry Kao](https://github.com/harrykao) - [see PR](https://github.com/JedWatson/react-select/pull/2276)
-* Fixed dropdown menu positioning issues in IE 11, thanks [jharris4](https://github.com/jharris4) - [see PR](https://github.com/JedWatson/react-select/pull/2273)
-* Added missing rule to the `scss` stylesheet, thanks [Jordan Whitfield](https://github.com/mantissa7) - [see PR](https://github.com/JedWatson/react-select/pull/2280)
->>>>>>> master
-
-## v1.2.0 / 2018-01-08
-
-* Source cleanup, thanks to [Yuri S](https://github.com/yuri-sakharov) and
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2262)
-* Switched from babel-preset-es2015 to babel-preset-env, thanks
- [Rambabu Yadlapalli](https://github.com/RamYadlapalli) -
- [see PR](https://github.com/JedWatson/react-select/pull/2254)
-* Fixed focused option. Issue #2237, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2245)
-* Fix onSelectResetsInput bug from keyboard navigation, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2259)
-* Fixed all warnings on running tests, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2231)
-* Added missing tests for Option.js and refactored Option-test.js., thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2249)
-* Added missing tests for Async.js, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2250)
-* Fixed console error in GitHub users example, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2244)
-* Fixed readme example. Issue #2235, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2246)
-* Regression fix for single select with onSelectResetsInput=false, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2226)
-* Pass placeholder prop to ValueComponent, thanks
- [Aravind Srivatsan](https://github.com/aravindsrivats) -
- [see PR](https://github.com/JedWatson/react-select/pull/2225)
-* Refactored handleKeyDown switch, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2228)
-* onSelectResetsInput regression fixed, thanks
- [Jed Watson](https://github.com/dehamilton) -
- [see PR](https://github.com/JedWatson/react-select/pull/2215)
-* Don't open drop down menu when clear values, thanks
- [Jed Watson](https://github.com/Chopinsky) -
- [see PR](https://github.com/JedWatson/react-select/pull/2198)
-* Clear input value on receiving props with another value., thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2183)
-* Fix/is option unique crash, thanks [Jacob Zuo](https://github.com/Chopinsky) -
- [see PR](https://github.com/JedWatson/react-select/pull/2185)
-* Use react-input-autosize v2.1.2 for guard against undefined window, thanks
- [DStyleZ](https://github.com/sximba) -
- [see PR](https://github.com/JedWatson/react-select/pull/2187)
-* Fix issue #2182, thanks [Kurt Hoyt](https://github.com/kurtinatlanta) -
- [see PR](https://github.com/JedWatson/react-select/pull/2213)
-* Documenting behavior of onBlurResetsInput in the readme., thanks
- [hobbsl](https://github.com/levininja) -
- [see PR](https://github.com/JedWatson/react-select/pull/2212)
-* Use onSelectResetsInput for single select, thanks
- [lachiet](https://github.com/lachiet) -
- [see PR](https://github.com/JedWatson/react-select/pull/2205)
-* Fix state value in README example, thanks
- [Srishan Bhattarai](https://github.com/srishanbhattarai) -
- [see PR](https://github.com/JedWatson/react-select/pull/2192)
-* document breaking change of removing getInputValue, thanks
- [Turadg Aleahmad](https://github.com/turadg) -
- [see PR](https://github.com/JedWatson/react-select/pull/2195)
-* Fixed search for invalid label and/or value, thanks
- [Yuri S](https://github.com/yuri-sakharov) -
- [see PR](https://github.com/JedWatson/react-select/pull/2179)
-
-## v1.1.0 / 2017-11-28
-
-* added; more props are passed to the Option component: `focusOption`,
- `inputValue`, `selectValue`, `removeValue`
-* added; the `inputValue` is passed as the third argument to the
- `optionRenderer`
-* fixed; issues opening the menu correctly for multiselect when
- `autosize={false}`
-* fixed; removed `event.stopPropagation()` from Select's `clearValue` and
- `onClick` handlers, thanks [Thomas Burke](https://github.com/etburke)
-* fixed; `handleMouseDownOnArrow` when `openOnClick={false}`, thanks
- [elias ghali](https://github.com/elghali)
-* fixed; conditional scrolling into view of focused option, thanks
- [Michael Lewis](https://github.com/mtlewis)
-
-## v1.0.1 / 2017-11-24
-
-* reintroduced source files for scss and less stylesheets into the npm package
-
-## v1.0.0 / 2017-11-23
-
-* breaking; removed `getInputValue` function -
- [see PR](https://github.com/JedWatson/react-select/pull/2108)
-* reverted spacebar-selects-option behaviour for searchable selects, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2163)
-* fixed behaviour where async doesn't handle onInputChange returning a value,
- thanks [Anton](https://github.com/tehbi4) -
- [see PR](https://github.com/JedWatson/react-select/pull/2133)
-* fixed Creatable bug where the first enter keypress is ignored when
- `promptTextCreator` returns only the label, thanks
- [George Karagkiaouris](https://github.com/karaggeorge) -
- [see PR](https://github.com/JedWatson/react-select/pull/2140)
-* Utility functions are now exported from the es6 build, thanks
- [Deiru](https://github.com/Deiru2k) -
- [see PR](https://github.com/JedWatson/react-select/pull/2154)
-* Update aria-only class to have absolute positioning, thanks
- [Jacob Hilker](https://github.com/JHilker) -
- [see PR](https://github.com/JedWatson/react-select/pull/1243)
-* gives possibility to use ref property for Creatable, thanks
- [blacktemplar](https://github.com/blacktemplar) -
- [see PR](https://github.com/JedWatson/react-select/pull/1646)
-* Adds lint and test pre-commit hooks, thanks
- [carymcpoland](https://github.com/mcpolandc) -
- [see PR](https://github.com/JedWatson/react-select/pull/2077)
-* Disable some browser-specific behaviours that break the input, thanks
- [Jed Watson](https://github.com/JedWatson) -
- [see PR](https://github.com/JedWatson/react-select/pull/2101)
-* onOpen: run after dom has rendered, thanks
- [Karl-Aksel Puulmann](https://github.com/macobo) -
- [see PR](https://github.com/JedWatson/react-select/pull/#1756)
-* fix not clearing when given invalid values, from #1756, thanks
- [Mário][https://github.com/ticklemynausea] -
- [see PR](https://github.com/JedWatson/react-select/pull/2100)
-* Exports Option Component, thanks
- [Erkelens, Jan Paul](https://github.com/jperkelens) -
- [see PR](https://github.com/JedWatson/react-select/pull/2097)
-* Fix/numeric multi select, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2086)
-* removeSelected prop (round 2), for optionally keeping selected values in
- dropdown, thanks [Jed Watson](https://github.com/banderson) -
- [see PR](https://github.com/JedWatson/react-select/pull/1891)
-* pass removeValue() and always pass valueArray, thanks
- [kcliu](https://github.com/kcliu) -
- [see PR](https://github.com/JedWatson/react-select/pull/1850)
-* Accessibility Enhancements - Aria tags, Space/Enter keys, thanks
- [sushmabadam](https://github.com/sushmabadam) -
- [see PR](https://github.com/JedWatson/react-select/pull/1428)
-* added rtl support, thanks [Dekel](https://github.com/dekelb) -
- [see PR](https://github.com/JedWatson/react-select/pull/1613)
-* Add inputValue to menuRenderer, thanks
- [headcanon](https://github.com/chronick) -
- [see PR](https://github.com/JedWatson/react-select/pull/1732)
-* fix typo in handleKeyDown method, thanks
- [jasonchangxo](https://github.com/jasonchangxo) -
- [see PR](https://github.com/JedWatson/react-select/pull/2088)
-* Fix/numeric multi select, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2086)
-* expose children in AsyncCreatable.js, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2084)
-* replace trim fn loop with regex, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2085)
-* Trim search text from beginning and the end. (fixes #1861), thanks
- [Serkan Ozer](https://github.com/serkanozer) -
- [see PR](https://github.com/JedWatson/react-select/pull/1862)
-* Add variable for focused input background, thanks
- [Aron Strandberg](https://github.com/aronstrandberg) -
- [see PR](https://github.com/JedWatson/react-select/pull/1998)
-* Added id in the input select, thanks
- [thecreazy](https://github.com/thecreazy) -
- [see PR](https://github.com/JedWatson/react-select/pull/2027)
-* adding a nvmrc file and adding coverage to eslintignore, thanks
- [Dave Birch](https://github.com/uxtx) -
- [see PR](https://github.com/JedWatson/react-select/pull/1137)
-* Updated the comment for the deleteRemoves option., thanks
- [Abul Dider](https://github.com/dider7) -
- [see PR](https://github.com/JedWatson/react-select/pull/2078)
-* implemented optional rendering of arrow, thanks
- [rolandjohann](https://github.com/rolandjohann) -
- [see PR](https://github.com/JedWatson/react-select/pull/1761)
-* Skip rendering arrow wrapper when custom arrow renderer returns falsy value,
- thanks [Mike Lewis](https://github.com/mtlewis) -
- [see PR](https://github.com/JedWatson/react-select/pull/2055)
-* do not show clear button if value is an empty string, thanks
- [Marie Godon](https://github.com/mariegodon) -
- [see PR](https://github.com/JedWatson/react-select/pull/2074)
-* Set isLoading to false if cache hit, thanks
- [timhwang21](https://github.com/timhwang21) -
- [see PR](https://github.com/JedWatson/react-select/pull/2042)
-* Add aria-labels to Options, thanks
- [jasonchangxo](https://github.com/jasonchangxo) -
- [see PR](https://github.com/JedWatson/react-select/pull/2036)
-* Adds source links to each example, thanks
- [Damon Bauer](https://github.com/damonbauer) -
- [see PR](https://github.com/JedWatson/react-select/pull/2051)
-* Issue #2056: onInputChange should return modified value, thanks
- [Caleb Scholze](https://github.com/cscholze) -
- [see PR](https://github.com/JedWatson/react-select/pull/2057)
-* Remove option `addLabelText` from README and propTypes, thanks
- [Jannes Jeising](https://github.com/jjeising) -
- [see PR](https://github.com/JedWatson/react-select/pull/2040)
-* GitHub has a capital H, thanks
- [David Baumgold](https://github.com/singingwolfboy) -
- [see PR](https://github.com/JedWatson/react-select/pull/2053)
-* refactor componentWillUnmount(), thanks
- [riophae](https://github.com/riophae) -
- [see PR](https://github.com/JedWatson/react-select/pull/2064)
-* Slim down NPM package, thanks [Valentin Agachi](https://github.com/avaly) -
- [see PR](https://github.com/JedWatson/react-select/pull/2062)
-* Update contributing doc, thanks [Gregg Brewster](https://github.com/greggb) -
- [see PR](https://github.com/JedWatson/react-select/pull/2059)
-* strip proptypes in production build (fixes #1882), thanks
- [Jochen Berger](https://github.com/jochenberger) -
- [see PR](https://github.com/JedWatson/react-select/pull/2003)
-* Support Webpack 2, Webpack 3, rollup., thanks
- [Matthew Schnee](https://github.com/mschnee) -
- [see PR](https://github.com/JedWatson/react-select/pull/2020)
-* Add missing semicolon, thanks
- [jochenberger](https://github.com/jochenberger) -
- [see PR](https://github.com/JedWatson/react-select/pull/2018)
-* autofocus --> autoFocus, thanks
- [Charles Lee](https://github.com/gwyneplaine) -
- [see PR](https://github.com/JedWatson/react-select/pull/2002)
-* Async> cache async response regardless of req order, thanks
- [Timothy Hwang](https://github.com/timhwang21) -
- [see PR](https://github.com/JedWatson/react-select/pull/2012)
-* Make this work in preact., thanks [liaoxuezhi](https://github.com/2betop) -
- [see PR](https://github.com/JedWatson/react-select/pull/2013)
-* Correct release candidate version on README, thanks
- [Damon Aw](https://github.com/daemonsy) -
- [see PR](https://github.com/JedWatson/react-select/pull/2017)
-* Fix test name, thanks [jochenberger](https://github.com/jochenberger) -
- [see PR](https://github.com/JedWatson/react-select/pull/2005)
-* Fixing css states to be scoped with Select selector, closes #1951., thanks
- [Adam Girton](https://github.com/agirton) -
- [see PR](https://github.com/JedWatson/react-select/pull/2000)
-* fix typo, thanks [jochenberger](https://github.com/jochenberger) -
- [see PR](https://github.com/JedWatson/react-select/pull/1999)
-
-## v1.0.0-rc.10 / 2017-09-13
-
-* changed; `openAfterFocus` prop has been renamed to `openOnClick`, and now
- defaults to `true`
-* fixed; React.PropTypes deprecation warning, thanks
- [Jeremy Liberman](https://github.com/MrLeebo)
-* improved; scrolling behaviour when navigating the menu with the keyboard,
- thanks [boatkorachal](https://github.com/boatkorachal)
-* fixed; error with the `Async` cache when you type `"hasOwnProperty"`, thanks
- [SuhushinAS](https://github.com/SuhushinAS)
-
-## v1.0.0-rc.9 / 2017-09-13
-
-* fixed; clearable padding style, thanks
- [Minori Miyauchi](https://github.com/mmiyauchi)
-* fixed; removed use of `Object.assign`, fixes IE compatibility
-* added; new `closeOnSelect` prop (defaults to `true`) that controls whether the
- menu is closed when an option is selected, thanks to
- [Michael Elgar](https://github.com/melgar) for the original idea
-* changed; by default, the menu for multi-selects now closes when an option is
- selected
-* changed; `Async` component no longer always clears options when one is
- selected (although the menu is now closed by default). Use
- `closeOnSelect={false} onSelectResetsInput={false}` to leave the menu open.
-* fixed; `Async` component always called `onChange` even when it wasn't provided
-* fixed; input lag for the `Async` component when results are returned from
- cache
-* fixed; required was not being updated without an onChange handler
-* fixed; peer dependencies for `prop-types`, thanks
- [Michaël De Boey](https://github.com/MichaelDeBoey)
-* fixed; internal optimisations, thanks
- [Kieran Boyle](https://github.com/dysfunc)
-* added; `Value` component is now exported, thanks
- [Prof Gra](https://github.com/Grahack)
-* fixed; callback fired after `Async` component unmounts, thanks
- [Andrew Russell](https://github.com/DeadHeadRussell)
-* fixed; wrapping on Firefox in SCSS files, thanks
- [Michael Williamson](https://github.com/mwilliamson)
-
-## v1.0.0-rc.8 / 2017-09-12
-
-* fixed; `onMenuScrollToBottom` does not work in chrome 58.0, thanks
- [Simon Hartcher](https://github.com/deevus)
-* fixed; missing es6 module build for `js:next` entrypoint
-* updated; `react-input-autosize@2.0.0` including several fixes for react-select
- (see
- [changes](https://github.com/JedWatson/react-input-autosize/blob/master/HISTORY.md))
-
-## v1.0.0-rc.7 / 2017-09-11
-
-* fixed; issue with `lib` build preventing use in ES2015 environments
-
-## v1.0.0-rc.6 / 2017-09-10
-
-* fixed; changing `required` prop from `true` to `false` now works as expected,
- thanks [George Karagkiaouris](https://github.com/karaggeorge)
-* added; new prop `onSelectResetsInput` controls whether the input value is
- cleared when options are selected, thanks
- [David Roeca](https://github.com/davidroeca) and
- [Alexander Nosov](https://github.com/nosovsh)
-* fixed; tabindex parent bug fix for Edge, thanks
- [George Payne](https://github.com/George-A-Payne)
-* fixed; update selectize link in README.md, thanks
- [kerumen](https://github.com/kerumen)
-* added; standard issue template, thanks [agirton](https://github.com/agirton)
-* added; new build process using rollup and webpack. Removed grunt. thanks
- [gwyneplaine](https://github.com/gwyneplaine)
-* fixed; updated contributor docs with the correct node version reference
- [gwyneplaine](https://github.com/gwyneplaine)
-* fixed; missing method binds in Option, thanks
- [agirton](https://github.com/agirton)
-* fixed; converted components to use es6 classes, thanks
- [jochenberger](https://github.com/jochenberger)
-* fixed; console.log example in usage docs, thanks
- [rohmanhm](https://github.com/rohmanhm)
-* fixed; hide create option after closing menu, thanks
- [andreme](https://github.com/andreme)
-* fixed; remove circular reference, thanks [agirton](https://github.com/agirton)
-* fixed; readme typo, thanks [ieldanr](https:/github.com/ieldanr)
-* fixed; add missing function binds in Option component, thanks
- [agirton](https://github.com/agirton) and
- [blacktemplar](https://github.com/blacktemplar)
-* fixed; re-added fix to
- [#1580](https://github.com/JedWatson/react-select/issues/1580), thanks
- [agirton](https://github.com/agirton)
-* fixed; avoid mutating user inputs when ignoring case/accents, thanks
- [not-an-aardvark](https://github.com/not-an-aardvark)
-* fixed; issues synchronising options props in `Async`, thanks
- [cbergmiller](https://github.com/cbergmiller)
-* fixed; backspace handling for non-multi select controls, thanks
- [Jeremy Liberman](https://github.com/MrLeebo)
-
-## v1.0.0-rc.5 / 2017-05-25
-
-* fixed; Allow `falsey` values to be clearable, thanks
- [Simon Gaestel](https://github.com/sgaestel)
-* fixed; issue where Firefox would crash due to incorrect use of `aria-owns`
- attribute, thanks [Max Hubenthal](https://github.com/mhubenthal)
-* fixed; regression where options not using the value key couldn't be focused,
- thanks [Benjamin Piouffle](https://github.com/Betree)
-
-## v1.0.0-rc.4 / 2017-05-14
-
-* fixed; no more warning when using React 15.5, thanks
- [Adam Girton](https://github.com/agirton)
-* fixed; issue comparing objects in `getFocusableOptionIndex`, thanks
- [rndm2](https://github.com/rndm2)
-* fixed; missing .focus() method in `Creatable`, thanks
- [Anton Alexandrenok](https://github.com/the-spyke)
-* added; support for `aria-describedby` attribute, thanks
- [Eric Lee](https://github.com/ericj17)
-* added; `.is-clearable` className when clearable is true, thanks
- [Dan Diaz](https://github.com/dan-diaz)
-
-## v1.0.0-rc.3 / 2017-02-01
-
-* added; `arrowRenderer` prop, thanks [Brian Vaughn](https://github.com/bvaughn)
-* added; child-function support to `Async` and `Creatable` components so that
- they can compose each other (or future HOCs), thanks
- [Brian Vaughn](https://github.com/bvaughn)
-* added; `asyncCreatable` HOC that combines `Async` and `Creatable` so they can
- be used together, thanks [Brian Vaughn](https://github.com/bvaughn)
-* added; undocumented arguments for `menuRenderer`, thanks
- [Julian Krispel-Samsel](https://github.com/juliankrispel)
-* fixed; Do not focus and open menu when disabled, thanks
- [nhducit](https://github.com/nhducit)
-* fixed; Scrolling with arrow-keys is not working correctly, thanks
- [Damian Pieczynski](https://github.com/piecyk)
-* added; "select all text" functionality `Shift+Home|Del`, thanks
- [Damian Pieczynski](https://github.com/piecyk)
-* added; support for `boolean` values, thanks
- [Aaron Hardy](https://github.com/Aaronius)
-* fixed; Remove duplicated `promptTextCreator` field from readme, thanks
- [Jih-Chi Lee](https://github.com/jihchi)
-* fixed; Adding back ref that was removed in rc2, thanks
- [Martin Jujou](https://github.com/jooj123)
-* fixed; `Creatable` component doesn't allow input key down handling, thanks
- [Ivan Leonenko](https://github.com/IvanLeonenko)
-* added; Allow react nodes to be passed as loadingPlaceholder, thanks
- [Daniel Heath](https://github.com/DanielHeath)
-* fixed; IE8 compatibility issues, thanks
- [Kirill Mesnyankin](https://github.com/strayiker)
-* improved; Allow users to specify noResultsText, thanks
- [Daniel Heath](https://github.com/DanielHeath)
-* added; Only remove options if a loading placeholder is available, thanks
- [Daniel Heath](https://github.com/DanielHeath)
-* fixed; firefox display items in two rows due to reflow, thanks
- [Daniel Heath](https://github.com/DanielHeath)
-* fixed; `Creatable` readme typo, thanks [Ben](https://github.com/rockingskier)
-* fixed; explain way to implement `allowCreate` functionality with `Creatable`
- to readme, thanks [mayerwin](https://github.com/mayerwin)
-* added; delete key removes an item when there is no input, thanks
- [forum-is](https://github.com/forum-is)
-* added; `onNewOptionClick` handler for `Creatable`, thanks
- [Lee Siong Chan](https://github.com/leesiongchan)
-* fixed; `onInputChange` consistent for `Creatable`, thanks
- [Lee Siong Chan](https://github.com/leesiongchan)
-* fixed; `menuRenderer` is treated consistently between `Creatable` and
- `Select`, thanks [Brian Vaughn](https://github.com/bvaughn)
-* fixed; `asyncCreatable` options parsing will not parse undefined values into
- props, thanks [Romain Dardour](https://github.com/unity)
-* added; pass `inputProps` to `inputRenderer`, thanks
- [Alec Winograd](https://github.com/awinograd)
-* fixed; no exception when clearing an Async field that is not set to multi,
- thanks [Patrik Stutz](https://github.com/VanCoding)
-* added; allow rendering a custom clear component, thanks
- [Conor Hastings](https://github.com/conorhastings)
-* fixed; document `ignoreAccents`, thanks
- [Domenico Matteo](https://github.com/dmatteo)
-* fixed; arrowing up or down in `Select` with 0 options does not throw type
- error, thanks [Alex Howard](https://github.com/thezanke)
-* fixed; `Creatable` handles null children prop, thanks
- [Jack Coulter](https://github.com/jscinoz)
-* added; provide `isOpen` to arrowRenderer, thanks
- [Kuan](https://github.com/khankuan)
-* fixed; re-added the `focus()` method on `Select.Async`, thanks,
- [Maarten Claes](https://github.com/mcls)
-* fixed; focus the next available option after a selection, not the top option,
- thanks [Nicolas Raynaud](https://github.com/nraynaud)
-
-Note there has also been a breaking change to the props for the `Async`
-component: both `minimumInput` and `searchingText` have been removed. See #1226
-for more details. Apologies for doing this in an RC release, but we had to trade
-off between resolving some important bugs and breaking the API, and figured it
-was better to do this before declaring 1.0.0 stable.
-
-## v1.0.0-rc.1 / 2016-09-04
-
-* fixed; reset value to `[]` when `multi=true`, thanks
- [Michael Williamson](https://github.com/mwilliamson)
-* added; pass index to `renderLabel` method, thanks
- [nhducit](https://github.com/nhducit)
-* fixed; uncontrolled to controlled component warning in React 15.3
-* fixed; props cleanup, thanks
- [Forbes Lindesay](https://github.com/ForbesLindesay)
-* fixed; issue where a value of the number `0` would be assumed to be no value,
- thanks [Hanwen Cheng](https://github.com/hanwencheng)
-* fixed; internal refs converted to callbacks instead of strings, thanks
- [Johnny Nguyen](https://github.com/gojohnnygo)
-* added; optional `instanceId` prop for server-side rendering, thanks
- [Jevin Anderson](https://github.com/JevinAnderson)
-* added; `onCloseResetsInput` prop, thanks
- [Frankie](https://github.com/frankievx)
-* added; `Creatable` component, replaces pre-1.0 `allowCreate` prop, thanks
- [Brian Vaughn](https://github.com/bvaughn)
-
-## v1.0.0-beta14 / 2016-07-17
-
-* fixed; `react-input-autosize` has been udpated to `1.1.0`, which includes
- fixes for the new warnings that React 15.2 logs
-* fixed; "Unknown prop `inputClassName` on
tag" warning, thanks
- [Max Stoiber](https://github.com/mxstbr)
-* fixed; Removed unnecessary `onUnfocus`, thanks
- [Johnny Nguyen](https://github.com/gojohnnygo)
-* added; Support for react components in `searchPromptText`, thanks
- [Matt](https://github.com/hellaeon)
-* fixed; focus bug on iOS, thanks
- [Tony deCatanzaro](https://github.com/tonydecat)
-* fixed; Async bugs with Promises, thanks
- [Vladimir](https://github.com/VladimirPal) and
- [Ian Firkin](https://github.com/lobsteropteryx)
-* fixed; `searchingText` bug, thanks
- [Tony deCatanzaro](https://github.com/tonydecat)
-* improved; More antive-like input behaviour, thanks
- [Johnny Nguyen](https://github.com/gojohnnygo)
-* fixed; Added missing unit (px) to `minWidth` attribute, thanks
- [Ian Witherow](https://github.com/ianwitherow)
-* added; Support for assistive technologies, thanks
- [Dave Brotherstone](https://github.com/bruderstein)
-* fixed; React error if `onChange` callback causes a root component to unmount,
- thanks [Nathan Norton](https://github.com/Xesued)
-* fixed; Open menu is now closed if `disabled` becomes true, thanks
- [Jason Moon](https://github.com/jsnmoon)
-* fixed; Prevent `getFocusableOptionIndex` from returning a disabled option,
- thanks [Brian Powers](https://github.com/brianspowers)
-* added; Home, End, Page Up/Down support, thanks
- [Jason Kadrmas](https://github.com/blackjk3)
-* fixed; Don't render `backspaceToRemoveMessage` if `backspaceRemoves` is set to
- false, thanks [Ryan Zec](https://github.com/ryanzec)
-* fixed; Issue with an outline appearing on the auto sized input, thanks
- [Ryan Zec](https://github.com/ryanzec)
-* fixed; Events don't propagate when `esc` is pressed, thanks
- [Yoshihide Jimbo](https://github.com/jmblog)
-* fixed; Update `required` prop based on nextProps on update, thanks
- [Matt Shwery](https://github.com/mshwery)
-* fixed; On focus check whether input ref is a real input or an input component,
- thanks [Peter Brant](https://github.com/pbrant) and
- [Greg Poole](https://github.com/gpoole)
-
-Also a big thanks to [Brian Vaughn](https://github.com/bvaughn) for his help
-triaging issues for this release!
-
-## v1.0.0-beta13 / 2016-05-30
-
-* added; `inputRenderer` prop, allows you to override the input component,
- thanks [Sean Burke](https://github.com/leftmostcat)
-* added; `openOnFocus` prop, causes the menu to always open when the select
- control is focused, thanks
- [HuysentruytRuben](https://github.com/HuysentruytRuben)
-* added; `react-virtualised-select` HOC example, thanks
- [Brian Vaughn](https://github.com/bvaughn)
-* added; `tabSelectsValue` prop can be set to false to prevent selection of
- focused option when tab is pressed, thanks
- [Byron Anderson](https://github.com/byronanderson)
-* added; ability to override `resetValue` when clearing the control, thanks
- [Alexander Luberg](https://github.com/LubergAlexander)
-* added; input can be updated with `onInputChange`, thanks
- [Brett DeWoody](https://github.com/brettdewoody)
-* added; Styles for .is-selected class, thanks
- [Danny Herran](https://github.com/dherran)
-* fixed; `noResultsText` prop type is now `stringOrNode` for Async component,
- thanks [Michael Groeneman](https://github.com/mgroeneman)
-* fixed; `onInputChange` is wrapped by Async component, thanks
- [Eric O'Connell](https://github.com/drd)
-* fixed; `scrollMenuIntoView` behaviour in IE10, thanks
- [Ivan Jager](https://github.com/aij)
-* fixed; isEqualNode replaced with strict equality check, thanks
- [Alexandre Balhier](https://github.com/abalhier)
-* fixed; issue with value object not being passed to `handleRequired`, thanks
- [Andrew Hite](https://github.com/andyhite)
-* fixed; the menu-outer container is no longer rendered when it does not contain
- anything, thanks [Kuan](https://github.com/khankuan)
-* improved; better support for IE8 in styles, thanks
- [Rockallite Wulf](https://github.com/rockallite)
-
-## v1.0.0-beta12 / 2016-04-02
-
-* added; `menuRenderer` method and example for effeciently rendering thousands
- of options, thanks [Brian Vaughn](https://github.com/bvaughn)
-* added; `optionClassName` prop, thanks [Max Tyler](https://github.com/iam4x)
-
-## v1.0.0-beta11 / 2016-03-09
-
-* updated dependencies to allow use with React 15.x
-* changed; multiple selected values are now submitted using multiple inputs,
- thanks [Trinh Hoang Nhu](https://github.com/james4388)
-* added; `joinValues` prop to revert the above change and submit multiple values
- in a single field with the delimiter
-
-## v1.0.0-beta10 / 2016-02-23
-
-* fixed build issues with v1.0.0-beta9
-
-## v1.0.0-beta9 / 2016-02-12
-
-* added; onBlurResetsInput prop, thanks
- [Sly Bridges](https://github.com/slybridges)
-* changed; Enter selects and retains focus, Tab selects and shifts focus, thanks
- [RDX](https://github.com/rdsubhas)
-* fixed; Hide noResultsText when value is falsy, thanks
- [Fernando Alex Helwanger](https://github.com/fhelwanger)
-* added; `required` prop, adds HTML5 required attribute, thanks
- [Domenico Matteo](https://github.com/dmatteo)
-* fixed; Touch drag behaviour, thanks
- [Pavel Tarnopolsky](https://github.com/Paveltarno)
-* added; `onOpen` and `onClose` event props, thanks
- [Jacob Page](https://github.com/DullReferenceException)
-* fixed; Pressing Enter on open Select should stop propagation, thanks
- [Jeremy Liberman](https://github.com/MrLeebo)
-* fixed; Missing handleMouseDownOnMenu, thanks
- [Jeremy Liberman](https://github.com/MrLeebo)
-* added; Ensures the selected option is immediately visible when the menu is
- open, thanks [Martin Jujou](https://github.com/jooj123)
-* added; `autoBlur` prop, blurs the input when a value is selected, thanks
- [Pavel Tarnopolsky](https://github.com/Paveltarno)
-* fixed; Several isFocused checks weren't working properly
-
-## v1.0.0-beta8 / 2015-12-20
-
-* fixed; input focus bug when toggling `disabled` prop, thanks
- [Davide Curletti](https://github.com/dcurletti)
-* fixed; `focus()` is now exposed on the `Async` component, thanks
- [AugustinLF](https://github.com/AugustinLF)
-
-## v1.0.0-beta7 / 2015-12-15
-
-* You can now use React elements for placeholders and the text props, thanks
- [kromit](https://github.com/kromit) and
- [Alyssa Biasi](https://github.com/alyssaBiasi)
-* Fixed a problem where the border doesn't show when the element is inside a
- table, thanks [Rodrigo Boratto](https://github.com/rwrz)
-* New prop `scrollMenuIntoView` scrolls the viewport to display the menu, thanks
- [Alexander Zaharakis](https://github.com/azaharakis)
-* New LESS / SCSS variable `select-option-bg` lets you control the menu option
- background color, thanks [Evan Goldenberg](https://github.com/Naveg)
-* Fixed an error in the blur handler on IE when the menu is not visible, thanks
- [Gaston Sanchez](https://github.com/gaastonsr)
-* Added support for a `clearableValue` option property in `multi` mode, thanks
- [Sly Bridges](https://github.com/slybridges)
-
-## v1.0.0-beta6 / 2015-11-29
-
-* Test suite complete and passing, with a couple of minor fixes thanks to
- @bruderstein
-
-## v1.0.0-beta5 / 2015-11-08
-
-* Fixes issues relating to serializing simple values into the hidden field
-
-## v1.0.0-beta4 / 2015-11-08
-
-* New default styles that match [Elemental UI](http://elemental-ui.com) and look
- right at home in the new [KeystoneJS Admin UI](http://keystonejs.com)
-
-We're potentially going to ship some theme stylesheets in the future, shout out
-on GitHub if this interests you.
-
-## v1.0.0-beta3 / 2015-11-08
-
-* The selected value populated in the hidden field has been fixed (was `"[object Object]"` before)
-* Added new `autofocus` prop
-* Fixed duplicate key error for options and values with duplicate `value`
- properties
-* SCSS variables now have `!default` so you can override them
-
-## v1.0.0-beta2 / 2015-11-06
-
-Changed since beta 1:
-
-* Async options cache works again
-* New style props for custom styling the component without modifying css
- classes: `style` `wrapperStyle` `menuStyle` `menuContainerStyle`
-* The menu opens and closes correctly when `searchable={false}`, there is still
- some work to do on this use-case
-
-## v1.0.0-beta1 / 2015-11-06
-
-This is a complete rewrite. Major changes include:
-
-* Everything is simpler (I'm nearly done and the source code is only 60% of the
- size of the last version)
-* No more timeouts or weird handlers, the restructuring has let me make
- everything more straight-forward
-* The options array is no longer preprocessed into state, just retrieved from
- props
-* The values array is now initialised in the Options array during render, and
- not stored in state, which along with the change to options makes the
- component more reliable and fixes issues with props not updating correctly
-* The component no longer stores its own value in state (ever) - it needs to be
- passed as a prop and handled with `onChange`.
-* Complex values are now enabled by default (so you're passed the option object,
- not its value); you can enable the legacy mode with a prop
-* The Value and Option components have been cleaned up as well for consistency
-* The hidden `` field is now optional and the component is better suited
- to use in a rich React.js app than it was
-* You can disable options filtering to do the filtering externally with
- `onInputChange`
-* Accents on characters can now be ignored
-* The `asyncOptions` prop has been replaced by a new wrapper component:
- `Select.Async`
-
-Note that "Tag mode" (creating options on the fly) isn't reimplemented yet.
-
-A full guide to the breaking changes and new features will be written up soon.
-In the meantime please see the new examples.
-
-## v0.9.1 / 2015-11-01
-
-* added; new Contributors example w/ async options loading and custom value /
- label keys
-* fixed; several issues with custom `valueKey` and `labelKey` props
-* fixed; autoload now loads options with no search input
-
-## v0.9.0 / 2015-10-29
-
-* added; SCSS stylesheets!
-* improved; Options rendering should be more performant
-* breaking change; Custom `Option` components now need to pass their `option`
- prop to event handlers; see
- [this commit](https://github.com/JedWatson/react-select/commit/89af12a80a972794222b193a767f44234bbe9817)
- for an example of the required change.
-
-## v0.8.4 / 2015-10-27
-
-* fixed; LESS math operations now work with --strict-math=on, thanks
- [Vincent Fretin](https://github.com/vincentfretin)
-
-## v0.8.3 / 2015-10-27
-
-* fixed; IE issue where clicking the scrollbar would close the menu, thanks
- [Pete Nykänen](https://github.com/petetnt)
-
-## v0.8.2 / 2015-10-22
-
-* added; Promise support for `loadAsyncOptions`, thanks
- [Domenico Matteo](https://github.com/dmatteo)
-
-## v0.8.1 / 2015-10-20
-
-* fixed; `loadAsyncOptions` raises TypeError in setup, see #439 for details,
- thanks [Pancham Mehrunkar](https://github.com/pancham348)
-
-## v0.8.0 / 2015-10-19
-
-This release contains significant DOM structure and CSS improvements by
-@jossmac, including:
-
-* no more `position: absolute` for inner controls
-* `display: table` is used for layout, which works in IE8 and above, and
- [all other modern browsers](http://caniuse.com/#feat=css-table)
-* less "magic numbers" used for layout, should fix various browser-specific
- alignment issues
-* clear "x" control now animates in
-* clearer `.Select--multi` className replaces `.Select.is-multi`
-* new height & theme variables
-* "dropdown" indicator chevron is no longer displayed for multi-select controls
-
-There are no functional changes, but if you've forked the LESS / CSS to create
-your own theme you'll want to pay close attention to PR #527 when upgrading to
-this version.
-
-## v0.7.0 / 2015-10-10
-
-React Select is updated for React 0.14. If you're still using React 0.13, please
-continue to use `react-select@0.6.x`. There are no functional differences
-between v0.7.0 and v0.6.12.
-
-Additionally, our tests now require Node.js 4.x. If you are developing
-`react-select`, please make sure you are running the latest version of node.
-
-Thanks to @bruderstein, @dmatteo and @hull for their help getting these updates
-shipped!
-
-## v0.6.12 / 2015-10-02
-
-* added; `labelKey` and `valueKey` props, so you can now use different keys in
- `option` objects for the label and value
-* fixed; additional `isMounted()` checks in timeouts
-* fixed; componentDidUpdate timeout is reset correctly, see #208 and #434,
- thanks [Petr Gladkikh](https://github.com/PetrGlad)
-* fixed; mousedown event on scrollbar in menu no longer hides it, thanks
- [Yishai Burt](https://github.com/burtyish)
-
-## v0.6.11 / 2015-09-28
-
-* added; `isLoading` prop, allows indication of async options loading in
- situations where more control is required, thanks
- [Jon Gautsch](https://github.com/jgautsch)
-
-## v0.6.10 / 2015-09-24
-
-* fixed; a build issue with the previous release that prevented the stylesheet
- being generated / included
-* fixed; a LESS syntax issue, thanks [Bob Cardenas](https://github.com/bcardi)
-
-## v0.6.9 / 2015-09-19
-
-* added; `style` key for package.json, thanks
- [Stephen Wan](https://github.com/stephen)
-* added; `onInputChange` handler that returns the current input value, thanks
- [Tom Leslie](https://github.com/lomteslie)
-* fixed; simplifying handleKey function & preventDefault behaviour, thanks
- [davidpene](https://github.com/davidpene)
-* fixed; Display spinner while auto-loading initial data, thanks
- [Ben Jenkinson](https://github.com/BenJenkinson)
-* fixed; better support for touch events, thanks
- [Montlouis-Calixte Stéphane](https://github.com/bulby97)
-* fixed; prevent value splitting on non-multi-value select, thanks
- [Alan R. Soares](https://github.com/alanrsoares)
-
-## v0.6.8 / 2015-09-16
-
-* fixed; broader range of allowed prereleases for React 0.14, including rc1
-* fixed; preventing backspace from navigating back in the browser history,
- thanks [davidpene](https://github.com/davidpene)
-
-## v0.6.7 / 2015-08-28
-
-* fixed; missing styles for `.Select-search-prompt` and `.Select-searching`
- issues, thanks [Jaak Erisalu](https://github.com/jaakerisalu) and
- [davidpene](https://github.com/davidpene)
-
-## v0.6.6 / 2015-08-26
-
-* fixed; issue in Chrome where clicking the scrollbar would close the menu,
- thanks [Vladimir Matsola](https://github.com/vomchik)
-
-## v0.6.5 / 2015-08-24
-
-* fixed; completely ignores clicks on disabled items, unless the target of the
- click is a link, thanks [Ben Stahl](https://github.com/bhstahl)
-
-## v0.6.4 / 2015-08-24
-
-This release includes a huge improvement to the examples / website thanks to
-@jossmac. Also:
-
-* added; support for React 0.14 beta3
-* fixed; disabled options after searching, thanks @bruderstein
-* added; support for "Searching..." text (w/ prop) while loading async results,
- thanks @bruderstein and @johnomalley
-* added; `className`, `style` and `title` keys are now supported in option
- properties, thanks @bruderstein
-
-## v0.6.3 / 2015-08-18
-
-Otherwise known as "the real 0.6.2" this includes the updated build for the last
-version; sorry about that!
-
-## v0.6.2 / 2015-08-13
-
-* changed; if the `searchable` prop is `false`, the menu is opened _or closed_
- on click, more like a standard Select input. thanks
- [MaaikeB](https://github.com/MaaikeB)
-
-## v0.6.1 / 2015-08-09
-
-* added; Support for options with numeric values, thanks
- [Dave Brotherstone](https://github.com/bruderstein)
-* changed; Disabled options now appear in the search results , thanks
- [Dave Brotherstone](https://github.com/bruderstein)
-* fixed; asyncOptions are reloaded on componentWillReceiveProps when the value
- has changed, thanks [Francis Cote](https://github.com/drfeelgoud)
-* added; `cacheAsyncResults` prop (default `true`) now controls whether the
- internal cache is used for `asyncOptions`
-
-## v0.6.0 / 2015-08-05
-
-* improved; option, value and single value have been split out into their own
- components, and can be customised with props. see
- [#328](https://github.com/JedWatson/react-select/pull/328) for more details.
-* improved; Near-complete test coverage thanks to the awesome work of
- [Dave Brotherstone](https://github.com/bruderstein)
-* improved; Support all alpha/beta/rc's of React 0.14.0, thanks
- [Sébastien Lorber](https://github.com/slorber)
-* fixed; Close multi-select menu when tabbing away, thanks
- [Ben Alpert](https://github.com/spicyj)
-* fixed; Bug where Select shows the value instead of the label (reapplying fix)
-* fixed; `valueRenderer` now works when `multi={false}`, thanks
- [Chris Portela](https://github.com/0xCMP)
-* added; New property `backspaceRemoves` (default `true`), allows the default
- behaviour of removing values with backspace when `multi={true}`, thanks
- [Leo Lehikoinen](https://github.com/lehikol2)
-
-## v0.5.6 / 2015-07-27
-
-* fixed; Allow entering of commas when allowCreate is on but multi is off,
- thanks [Angelo DiNardi](https://github.com/adinardi)
-* fixed; Times (clear) character is now rendered from string unicode character
- for consistent output, thanks [Nibbles](https://github.com/Siliconrob)
-* fixed; allowCreate bug, thanks [goodzsq](https://github.com/goodzsq)
-* fixed; changes to props.placeholder weren't being reflected correctly, thanks
- [alesn](https://github.com/alesn)
-* fixed; error when escape is pressedn where `clearValue` was not passed the
- event, thanks [Mikhail Kotelnikov](https://github.com/mkotelnikov)
-* added; More tests, thanks [Dave Brotherstone](https://github.com/bruderstein)
-
-## v0.5.5 / 2015-07-12
-
-* fixed; replaced usage of `component.getDOMNode()` with
- `React.findDOMNode(component)` for compatibility with React 0.14
-
-## v0.5.4 / 2015-07-06
-
-* fixed; regression in 0.5.3 that broke componentWillMount, sorry everyone!
-* added; `addLabelText` prop for customising the "add {label}?" text when in
- tags mode, thanks [Fenn](https://github.com/Fenntasy)
-
-## v0.5.3 / 2015-07-05
-
-* fixed; autoload issues, thanks [Maxime Tyler](https://github.com/iam4x)
-* fixed; style incompatibilities with Foundation framework, thanks
- [Timothy Kempf](https://github.com/Fauntleroy)
-
-## v0.5.2 / 2015-06-28
-
-* fixed; bug where Select shows the value instead of the label, thanks
- [Stephen Demjanenko](https://github.com/sdemjanenko)
-* added; 'is-selected' classname is added to the selected option, thanks
- [Alexey Volodkin](https://github.com/miraks)
-* fixed; async options are now loaded with the initial value, thanks
- [Pokai Chang](https://github.com/Neson)
-* fixed; `react-input-autosize` now correctly escapes ampersands (&), not
- actually a fix in react-select but worth noting here because it would have
- been causing a problem in `react-select` as well.
-
-## v0.5.1 / 2015-06-21
-
-* added; custom option and value rendering capability, thanks
- [Brian Reavis](https://github.com/brianreavis)
-* fixed; collapsing issue when single-select or empty multi-select fields are
- disabled
-* fixed; issue where an empty value would be left after clearing all values in a
- multi-select field
-
-## v0.5.0 / 2015-06-20
-
-* fixed; `esc` key incorrectly created empty options, thanks
- [rgrzelak](https://github.com/rgrzelak)
-* adeed; New feature to allow option creation ("tags mode"), enable with
- `allowCreate` prop, thanks [Florent Vilmart](https://github.com/flovilmart)
- and [Brian Reavis](https://github.com/brianreavis)
-* fixed; IE8 compatibility fallback for `addEventListener/removeEventListener`,
- which don't exist in IE8, thanks
- [Stefan Billiet](https://github.com/StefanBilliet)
-* fixed; Undefined values when using asyncOptions, thanks
- [bannaN](https://github.com/bannaN)
-* fixed; Prevent add the last focused value when the drop down menu is closed /
- Pushing enter without dropdown open adds a value, thanks
- [Giuseppe](https://github.com/giuse88)
-* fixed; Callback context is undefined, thanks
- [Giuseppe](https://github.com/giuse88)
-* fixed; Issue with event being swallowed on Enter `keydown`, thanks
- [Kevin Burke](https://github.com/kembuco)
-* added; Support for case-insensitive filtering when `matchPos="start"`, thanks
- [wesrage](https://github.com/wesrage)
-* added; Support for customizable background color, thanks
- [John Morales](https://github.com/JohnMorales)
-* fixed; Updated ESLint and cleared up warnings, thanks
- [Alexander Shemetovsky](https://github.com/AlexKVal)
-* fixed; Close dropdown when clicking on select, thanks
- [Nik Butenko](https://github.com/nkbt)
-* added; Tests, and mocha test framework, thanks
- [Craig Dallimore](https://github.com/craigdallimore)
-* fixed; You can now start the example server and watch for changes with `npm start`
-
-## v0.4.9 / 2015-05-11
-
-* fixed; focus was being grabbed by the select when `autoload` and
- `asyncOptions` were set
-* added; `focus` method on the component
-* added; support for disabled options, thanks
- [Pasha Palangpour](https://github.com/pashap)
-* improved; more closures, less binds, for better performance, thanks
- [Daniel Cousens](https://github.com/dcousens)
-
-## v0.4.8 / 2015-05-02
-
-* fixed; restored `dist/default.css`
-* fixed; standalone example works again
-* fixed; clarified dependency documentation and added dependencies for Bower
-* fixed; Scoping issues in `_bindCloseMenuIfClickedOutside`, thanks
- [bannaN](https://github.com/bannaN)
-* fixed; Doesnt try to set focus afterupdate if component is disabled, thanks
- [bannaN](https://github.com/bannaN)
-
-## v0.4.7 / 2015-04-21
-
-* improved; lodash is no longer a dependency, thanks
- [Daniel Lo Nigro](https://github.com/Daniel15)
-
-## v0.4.6 / 2015-04-06
-
-* updated; dependencies, build process and input-autosize component
-
-## v0.4.5 / 2015-03-28
-
-* fixed; issue with long options overlapping arrow and clear icons, thanks
- [Rohit Kalkur](https://github.com/rovolution)
-
-## v0.4.4 / 2015-03-26
-
-* fixed; error handling click events when the menu is closed, thanks
- [Ilya Petrov](https://github.com/muromec)
-* fixed; issue where options will not be filtered in certain conditions, thanks
- [G. Kay Lee](https://github.com/gsklee)
-
-## v0.4.3 / 2015-03-25
-
-* added tests and updated dependencies
-
-## v0.4.2 / 2015-03-23
-
-* added; ESLint and contributing guide
-* fixed; incorrect `classnames` variable assignment in window scope
-* fixed; all ESLint errors and warnings (except invalid JSX undefined/unused
- vars due to ESLint bug)
-* fixed; first option is now focused correctly, thanks
- [Eivind Siqveland Larsen](https://github.com/esiqveland)
-
-## v0.4.1 / 2015-03-20
-
-* fixed; IE11 issue: clicking on scrollbar within menu no longer closes menu,
- thanks [Rohit Kalkur](https://github.com/rovolution)
-
-## v0.4.0 / 2015-03-12
-
-* updated; compatible with React 0.13
-
-## v0.3.5 / 2015-03-09
-
-* improved; less/no repaint on scroll for performance wins, thanks
- [jsmunich](https://github.com/jsmunich)
-* added; `onBlur` and `onFocus` event handlers, thanks
- [Jonas Budelmann](https://github.com/cloudkite)
-* added; support for `inputProps` prop, passed to the `` component,
- thanks [Yann Plantevin](https://github.com/YannPl)
-* changed; now using
- [react-component-gulp-tasks](https://github.com/JedWatson/react-component-gulp-tasks)
- for build
-* fixed; issue w/ remote callbacks overriding cached options, thanks
- [Corey McMahon](https://github.com/coreymcmahon)
-* fixed; if not `this.props.multi`, menu doesn't need handleMouseDown, thanks
- [wenbing](https://github.com/wenbing)
-
-## v0.3.4 / 2015-02-23
-
-* fixed; issues with the underscore/lodash dependency change, thanks
- [Aaron Powell](https://github.com/aaronpowell)
-
-## v0.3.3 / 2015-02-22
-
-* added; `disabled` prop, thanks [Danny Shaw](https://github.com/dannyshaw)
-* added; `searchable` prop - set to `false` to disable the search box, thanks
- [Julen Ruiz Aizpuru](https://github.com/julen)
-* added; `onOptionLabelClick` prop - see
- [#66](https://github.com/JedWatson/react-select/pull/66) for docs, thanks
- [Dmitry Smirnov](https://github.com/dmitry-smirnov)
-* fixed; `text-overflow: ellipsis;` typo, thanks
- [Andru Vallance](https://github.com/andru)
-
-## v0.3.2 / 2015-01-30
-
-* fixed; issue adding undefined values to multiselect, thanks
- [Tejas Dinkar](https://github.com/gja)
-
-## v0.3.1 / 2015-01-20
-
-* fixed; missing `var` statement
-
-## v0.3.0 / 2015-01-20
-
-* added; node compatible build now available in `/lib`
-
-## v0.2.14 / 2015-01-07
-
-* added; `searchPromptText` property that is displayed when `asyncOptions` is
- set and there are (a) no options loaded, and (b) no input entered to search
- on, thanks [Anton Fedchenko](https://github.com/kompot)
-* added; `clearable` property (defaults to `true`) to control whether the
- "clear" control is available, thanks
- [Anton Fedchenko](https://github.com/kompot)
-
-## v0.2.13 / 2015-01-05
-
-* fixed; height issues in Safari, thanks
- [Joss Mackison](https://github.com/jossmac)
-* added; Option to specify "Clear value" label as prop for i18n
-
-## v0.2.12 / 2015-01-04
-
-* fixed; UI now responds to touch events, and works on mobile devices! thanks
- [Fraser Xu](https://github.com/fraserxu)
-
-## v0.2.11 / 2015-01-04
-
-* fixed; Options in the dropdown now scroll into view when they are focused,
- thanks [Adam](https://github.com/fmovlex)
-* improved; Example dist is now excluded from the npm package
-
-## v0.2.10 / 2015-01-01
-
-* fixed; More specific mixin name to avoid conflicts (css)
-* fixed; Example CSS now correctly rebuilds on changes in development
-* fixed; Values are now expanded correctly when options change (see #28)
-* added; Option to specify "No results found" label as prop for i18n, thanks
- [Julen Ruiz Aizpuru](https://github.com/julen)
-
-## v0.2.9 / 2014-12-09
-
-* added; `filterOption` and `filterOptions` props for more control over
- filtering
-
-## v0.2.8 / 2014-12-08
-
-* added; `matchPos` option to control whether to match the `start` or `any`
- position in the string when filtering options (default: `any`)
-* added; `matchProp` option to control whether to match the `value`, `label` or
- `any` property of each option when filtering (default: `any`)
-
-## v0.2.7 / 2014-12-01
-
-* fixed; screen-readers will now read "clear value" instead of "times" for the
- clear button
-* fixed; non-left-click mousedown events aren't blocked by the control
-
-## v0.2.6 / 2014-11-30
-
-* improved; better comparison of changes to [options] in `willReceiveProps`
-* fixed; now focuses the first option correctly when in multiselect mode
-* fixed; fixed focused option behaviour on value change
-* fixed; when filtering, there is always a focused option (#19)
-* changed; using ^ in package.json to compare dependencies
-
-## v0.2.5 / 2014-11-20
-
-* fixed; compatibility with case-sensitive file systems
-
-## v0.2.4 / 2014-11-20
-
-* fixed; package.json pointed at the right file
-
-## v0.2.3 / 2014-11-17
-
-* fixed; Updating state correctly when props change
-* improved; Build tasks and docs
-* added; Working standalone build
-* added; Minified dist version
-* added; Publised to Bower
-
-## v0.2.2 / 2014-11-15
-
-* fixed; backspace event being incorrectly cancelled
-
-## v0.2.1 / 2014-11-15
-
-* fixed; issue where backspace incorrectly clears the value (#14)
-
-## v0.2.0 / 2014-11-15
-
-* changed; Major rewrite to improve focus handling and internal state management
-* added; Support for `multi` prop, enable multiselect mode
-
-## v0.1.1 / 2014-11-03
-
-* added; Support for `onChange` event
-* added; `propTypes` are defined by the `Select` component now
-* added; `className` property, sets the `className` on the outer `div` element
-* fixed; Removed deprecated `React.DOM.x` calls
-
-## v0.1.0 / 2014-11-01
-
-* updated; React to 0.12.0
-
-## v0.0.6 / 2014-10-14
-
-* fixed; Error keeping value when using Async Options
diff --git a/LICENSE b/LICENSE
index 4117bfae03..85460a0885 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2018 Jed Watson
+Copyright (c) 2021 Jed Watson
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/README.md b/README.md
index b850d7b69a..0ae4e1ddb0 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
[![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select)
-[![Build Status](https://travis-ci.org/JedWatson/react-select.svg?branch=v2)](https://travis-ci.org/JedWatson/react-select)
-[![Coverage Status](https://coveralls.io/repos/JedWatson/react-select/badge.svg?branch=v2&service=github)](https://coveralls.io/github/JedWatson/react-select?branch=v2)
+[![CircleCI](https://circleci.com/gh/JedWatson/react-select/tree/master.svg?style=shield)](https://circleci.com/gh/JedWatson/react-select/tree/master)
+[![Coverage Status](https://coveralls.io/repos/JedWatson/react-select/badge.svg?branch=master&service=github)](https://coveralls.io/github/JedWatson/react-select?branch=master)
[![Supported by Thinkmill](https://thinkmill.github.io/badge/heart.svg)](http://thinkmill.com.au/?utm_source=github&utm_medium=badge&utm_campaign=react-select)
# React-Select
@@ -9,23 +9,23 @@ The Select control for [React](https://reactjs.com). Initially built for use in
See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs.
-## Version 2 🎉
+React Select is funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
-React Select v2.0.0 is a complete rewrite, funded by [Thinkmill](https://www.thinkmill.com.au) and [Atlassian](https://atlaskit.atlassian.com). It represents a whole new approach to developing powerful React.js components that _just work_ out of the box, while being extremely customisable.
+For the story behind this component, watch Jed's talk at React Conf 2019 - [building React Select](https://youtu.be/yS0jUnmBujE)
-Improvements include:
+Features include:
-* Flexible approach to data, with customisable functions
-* Extensible styling API with [emotion](https://emotion.sh)
-* Component Injection API for complete control over the UI behaviour
-* Controllable state props and modular architecture
-* Long-requested features like option groups, portal support, animation, and more
+- Flexible approach to data, with customisable functions
+- Extensible styling API with [emotion](https://emotion.sh)
+- Component Injection API for complete control over the UI behaviour
+- Controllable state props and modular architecture
+- Long-requested features like option groups, portal support, animation, and more
-If you're interested in the background, watch Jed's [talk on React Select](https://youtu.be/Eb2wy-HNGMo) at ReactNYC in March 2018.
+## Using an older version?
-See our [upgrade guide](https://react-select.com/upgrade-guide) for a breakdown on how to upgrade from v1 to v2.
-
-The old docs and examples will continue to be available at [v1.react-select.com](https://v1.react-select.com).
+- [v2 to v3 upgrade guide](https://github.com/JedWatson/react-select/issues/3585)
+- [v1 to v2 upgrade guide](https://react-select.com/upgrade-guide)
+- React Select v1 documentation and examples are available at [v1.react-select.com](https://v1.react-select.com)
# Installation and usage
@@ -36,7 +36,7 @@ yarn add react-select
```
Then use it in your app:
-
+#### With React Component
```js
import React from 'react';
import Select from 'react-select';
@@ -44,17 +44,19 @@ import Select from 'react-select';
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' },
- { value: 'vanilla', label: 'Vanilla' }
+ { value: 'vanilla', label: 'Vanilla' },
];
class App extends React.Component {
state = {
selectedOption: null,
- }
- handleChange = (selectedOption) => {
- this.setState({ selectedOption });
- console.log(`Option selected:`, selectedOption);
- }
+ };
+ handleChange = selectedOption => {
+ this.setState(
+ { selectedOption },
+ () => console.log(`Option selected:`, this.state.selectedOption)
+ );
+ };
render() {
const { selectedOption } = this.state;
@@ -69,21 +71,48 @@ class App extends React.Component {
}
```
+#### With React Hooks
+```js
+import React, { useState } from "react";
+import Select from "react-select";
+
+const options = [
+ { value: 'chocolate', label: 'Chocolate' },
+ { value: 'strawberry', label: 'Strawberry' },
+ { value: 'vanilla', label: 'Vanilla' },
+];
+
+export default function App() {
+ const [selectedOption, setSelectedOption] = useState(null);
+
+ return (
+
+
+
+ );
+}
+```
+
## Props
Common props you may want to specify include:
-* `autoFocus` - focus the control when it mounts
-* `className` - apply a className to the control
-* `classNamePrefix` - apply classNames to inner elements with the given prefix
-* `isDisabled` - disable the control
-* `isMulti` - allow the user to select multiple values
-* `isSearchable` - allow the user to search for matching options
-* `name` - generate an HTML input with this name, containing the current value
-* `onChange` - subscribe to change events
-* `options` - specify the options the user can select from
-* `placeholder` - change the text displayed when no option is selected
-* `value` - control the current value
+- `autoFocus` - focus the control when it mounts
+- `className` - apply a className to the control
+- `classNamePrefix` - apply classNames to inner elements with the given prefix
+- `isDisabled` - disable the control
+- `isMulti` - allow the user to select multiple values
+- `isSearchable` - allow the user to search for matching options
+- `name` - generate an HTML input with this name, containing the current value
+- `onChange` - subscribe to change events
+- `options` - specify the options the user can select from
+- `placeholder` - change the text displayed when no option is selected
+- `noOptionsMessage` - ({ inputValue: string }) => string | null - Text to display when there are no options
+- `value` - control the current value
See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports.
@@ -91,42 +120,42 @@ See the [props documentation](https://www.react-select.com/props) for complete d
You can control the following props by providing values for them. If you don't, react-select will manage them for you.
-* `value` / `onChange` - specify the current value of the control
-* `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
-* `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
+- `value` / `onChange` - specify the current value of the control
+- `menuIsOpen` / `onMenuOpen` / `onMenuClose` - control whether the menu is open
+- `inputValue` / `onInputChange` - control the value of the search input (changing this will update the available options)
If you don't provide these props, you can set the initial value of the state they control:
-* `defaultValue` - set the initial value of the control
-* `defaultMenuIsOpen` - set the initial open value of the menu
-* `defaultInputValue` - set the initial value of the search input
+- `defaultValue` - set the initial value of the control
+- `defaultMenuIsOpen` - set the initial open value of the menu
+- `defaultInputValue` - set the initial value of the search input
## Methods
React-select exposes two public methods:
-* `focus()` - focus the control programatically
-* `blur()` - blur the control programatically
+- `focus()` - focus the control programatically
+- `blur()` - blur the control programatically
## Customisation
Check the docs for more information on:
-* [Customising the styles](https://www.react-select.com/styles)
-* [Using custom components](https://www.react-select.com/components)
-* [Using the built-in animated components](https://www.react-select.com/home#animated-components)
-* [Creating an async select](https://www.react-select.com/async)
-* [Allowing users to create new options](https://www.react-select.com/creatable)
-* [Advanced use-cases](https://www.react-select.com/advanced)
+- [Customising the styles](https://www.react-select.com/styles)
+- [Using custom components](https://www.react-select.com/components)
+- [Using the built-in animated components](https://www.react-select.com/home#animated-components)
+- [Creating an async select](https://www.react-select.com/async)
+- [Allowing users to create new options](https://www.react-select.com/creatable)
+- [Advanced use-cases](https://www.react-select.com/advanced)
# Thanks
Thank you to everyone who has contributed to this project. It's been a wild ride.
-If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)
+If you like React Select, you should [follow me on twitter](https://twitter.com/jedwatson)!
-Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the Atlassian Design System team ❤️
+Shout out to [Joss Mackison](https://github.com/jossmac), [Charles Lee](https://github.com/gwyneplaine), [Ben Conolly](https://github.com/Noviny), [Tom Walker](https://github.com/bladey), [Nathan Bierema](https://github.com/Methuselah96), [Eric Bonow](https://github.com/ebonow), [Mitchell Hamilton](https://github.com/mitchellhamilton), [Dave Brotherstone](https://github.com/bruderstein), [Brian Vaughn](https://github.com/bvaughn), and the [Atlassian Design System](https://atlassian.design) team who along with many other contributors have made this possible ❤️
## License
-MIT Licensed. Copyright (c) Jed Watson 2018.
+MIT Licensed. Copyright (c) Jed Watson 2021.
diff --git a/babel.config.js b/babel.config.js
new file mode 100644
index 0000000000..be16f9c219
--- /dev/null
+++ b/babel.config.js
@@ -0,0 +1,8 @@
+module.exports = {
+ plugins: [
+ '@emotion/babel-plugin',
+ ['@babel/plugin-proposal-class-properties', { loose: true }],
+ '@babel/plugin-transform-runtime',
+ ],
+ presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-flow'],
+};
diff --git a/cypress.json b/cypress.json
index af007c01b8..db4974eedf 100644
--- a/cypress.json
+++ b/cypress.json
@@ -1,5 +1,4 @@
{
"baseUrl": "http://localhost:8000/cypress-tests",
- "screenshotOnHeadlessFailure": false,
- "videoRecording": false
+ "video": false
}
diff --git a/cypress/fixtures/selectors.json b/cypress/fixtures/selectors.json
index f17d90bbcf..9c6ecbdaba 100644
--- a/cypress/fixtures/selectors.json
+++ b/cypress/fixtures/selectors.json
@@ -4,27 +4,24 @@
"singleClearable": "#cypress-single-clearable",
"singleClearableSelect": "#clearable-select-single",
"singleGroupedSelect": "#grouped-options-single",
-
"checkboxDisable": ".disable-checkbox",
"checkboxEscapeClearsValue": ".escape-clears-value-checkbox",
-
"groupHeading": ".react-select__group-heading",
"indicatorClear": ".react-select__clear-indicator",
"indicatorDropdown": ".react-select__dropdown-indicator",
"menu": ".react-select__menu",
- "menuOption": "[role='option']",
+ "menuOption": ".react-select__option",
"noOptionsValue": ".react-select__menu-notice--no-options",
"placeholder": ".react-select__placeholder",
"singleValue": ".react-select__single-value",
-
"menuSingle": "#basic-select-single .react-select__menu",
"singleSelectSingleInput": "#react-select-basic-select-single-input",
"toggleMenuSingle": "#basic-select-single .react-select__dropdown-indicator",
-
"firstMultiValueRemove": "#multi-select .react-select__multi-value__remove:first",
"menuMulti": "#multi-select .react-select__menu",
"multiSelectDefaultValues": "#multi-select .react-select__multi-value",
"multiSelectInput": "#react-select-multi-select-input",
"placeHolderMulti": "#multi-select .react-select__placeholder",
- "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator"
+ "toggleMenuMulti": "#multi-select .react-select__dropdown-indicator",
+ "focusedOption": ".react-select__option--is-focused"
}
diff --git a/cypress/integration/multi-select.spec.js b/cypress/integration/multi-select.spec.js
new file mode 100644
index 0000000000..2180576112
--- /dev/null
+++ b/cypress/integration/multi-select.spec.js
@@ -0,0 +1,87 @@
+const selector = require('../fixtures/selectors.json');
+const baseUrl = require('../../cypress.json').baseUrl;
+
+const setup = [
+ { width: 1440, height: 900, viewport: 'macbook-15', device: 'Laptop' },
+ { width: 375, height: 667, viewport: 'iphone-6', device: 'Mobile' },
+ { width: 768, height: 1024, viewport: 'ipad-2', device: 'Tablet' },
+];
+
+describe('Multi Select', () => {
+ before(() => {
+ cy.visit(baseUrl);
+ cy.title().should('equal', 'React-Select');
+ cy.get('h1').should('contain', 'Test Page for Cypress');
+ });
+ beforeEach(() => {
+ cy.reload();
+ });
+
+ for (let config of setup) {
+ const { viewport } = config;
+ it(`Should display several default values that can be removed in view: ${viewport}`, () => {
+ cy.get(selector.multiSelectDefaultValues).then(function($defaultValue) {
+ expect($defaultValue).to.have.length(2);
+ expect($defaultValue.eq(0)).to.contain('Purple');
+ expect($defaultValue.eq(1)).to.contain('Red');
+ });
+
+ cy.get(selector.firstMultiValueRemove)
+ .click()
+ .get(selector.multiSelectDefaultValues)
+ .then(function($defaultValue) {
+ expect($defaultValue).to.have.length(1);
+ expect($defaultValue.eq(0)).to.contain('Red');
+ })
+ .get(selector.menuMulti)
+ .should('not.be.visible');
+ });
+
+ it(`Should be able to remove values on keyboard actions in view: ${viewport}`, () => {
+ cy.get(selector.multiSelectInput)
+ .click()
+ .type('{backspace}', { force: true })
+ .get(selector.multiSelectDefaultValues)
+ .then(function($defaultValue) {
+ expect($defaultValue).to.have.length(1);
+ expect($defaultValue.eq(0)).to.contain('Purple');
+ })
+ .get(selector.multiSelectInput)
+ .type('{backspace}', { force: true })
+ .get(selector.placeHolderMulti)
+ .should('contain', 'Select...');
+ });
+
+ it(`Should select different options using - click and enter in view: ${viewport}`, () => {
+ cy.get(selector.menuMulti)
+ .should('not.exist')
+ .get(selector.toggleMenuMulti)
+ .click()
+ .get(selector.menuMulti)
+ .should('exist')
+ .get(selector.menuMulti)
+ .should('be.visible')
+ .get(selector.menuOption)
+ .contains('Orange')
+ .click()
+ .get(selector.toggleMenuMulti)
+ .click()
+ .get(selector.menuOption)
+ .contains('Yellow')
+ .click()
+ .get(selector.multiSelectInput)
+ .click({ force: true })
+ .type('Slate', { force: true })
+ .type('{enter}', { force: true })
+ .get(selector.multiSelectDefaultValues)
+ .then(function($defaultValue) {
+ expect($defaultValue).to.have.length(5);
+ expect($defaultValue.eq(0)).to.contain('Purple');
+ expect($defaultValue.eq(1)).to.contain('Red');
+ expect($defaultValue.eq(2)).to.contain('Orange');
+ expect($defaultValue.eq(3)).to.contain('Yellow');
+ expect($defaultValue.eq(4)).to.contain('Slate');
+ });
+ });
+ }
+});
diff --git a/cypress/integration/select_spec.js b/cypress/integration/select_spec.js
deleted file mode 100644
index a31b7bb6ef..0000000000
--- a/cypress/integration/select_spec.js
+++ /dev/null
@@ -1,381 +0,0 @@
-const selector = require('../fixtures/selectors.json');
-
-const viewport = ['macbook-15', 'iphone-6'];
-
-describe('New Select', function() {
- before(function() {
- cy.visit('http://localhost:8000/cypress-tests');
- cy.title().should('equal', 'React-Select');
- cy.get('h1').should('contain', 'Test Page for Cypress');
- });
-
- describe('Single Select', function() {
- beforeEach(function() {
- cy.reload();
- });
-
- viewport.forEach(view => {
- before(function() {
- cy.viewport(view);
- });
-
- // This test seems to fail when cypress tab is focused.
- // Also, manual testing does not confirm the desired behavior
- it.skip(
- 'Should not display the options menu when touched and dragged ' + view,
- function() {
- cy
- .get(selector.toggleMenuSingle)
- .click()
- .click()
- .get(selector.menuSingle)
- .should('not.be.visible')
- // to be sure it says focus and the menu is closed
- .get(selector.singleSelectSingleInput)
- .trigger('mousedown')
- .get(selector.menuSingle)
- .should('not.be.visible');
- }
- );
- });
-
- describe('Basic', function() {
- viewport.forEach(view => {
- before(function() {
- cy.viewport(view);
- });
-
- it('Should display a default value ' + view, function() {
- cy
- .get(selector.singleBasicSelect)
- .find(selector.singleValue)
- .should('contain', 'Ocean');
- });
-
- it('Should expand the menu when expand icon is clicked ' + view, function() {
- cy
- // Menu is not yet open
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('not.exist')
- // A dropdown icon is shown
- .get(selector.singleBasicSelect)
- .find(selector.indicatorDropdown)
- .should('be.visible')
- // Click the icon to open the menu
- .click()
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('exist')
- .should('be.visible')
- .contains('Green');
- });
-
- it('Should close the menu after selecting an option', function() {
- cy
- .get(selector.singleBasicSelect)
- .find(selector.indicatorDropdown)
- .click()
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('contain', 'Green')
- .contains('Green')
- .click()
- // Value has updated
- .get(selector.singleBasicSelect)
- .find(selector.singleValue)
- .should('contain', 'Green')
- // Menu has closed
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('not.exist');
- });
-
- it('Should be disabled once disabled is checked ' + view, function() {
- cy
- // Does not start out disabled
- .get(selector.singleBasicSelect)
- // .click()
- .find('input')
- .should('exist')
- .should('not.be.disabled')
- // Disable the select component
- .get(selector.singleBasic)
- .find(selector.checkboxDisable)
- .click()
- // Now the input should be disabled
- .get(selector.singleBasicSelect)
- .click({ force: true })
- .find('input')
- .should('exist')
- .should('be.disabled');
- });
-
- it('Should filter options when searching ' + view, function() {
- cy
- .get(selector.singleBasicSelect)
- .click()
- .find('input')
- .type('For', { force: true })
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('contain', 'Forest')
- .find(selector.menuOption)
- .should('have.length', 1);
- });
-
- it('Should show "No options" if searched value is not found ' + view, function() {
- cy
- .get(selector.singleBasicSelect)
- .click()
- .find('input')
- .type('/', { force: true })
- .get(selector.noOptionsValue)
- .should('contain', 'No options');
- });
-
- it('Should not clear the value when backspace is pressed ' + view, function() {
- cy
- .get(selector.singleBasicSelect)
- .click()
- .find('input')
- .type('{backspace}', { force: true })
- .get(selector.singleBasicSelect)
- .find(selector.placeholder)
- .should('not.be.visible');
- });
- });
- });
-
- describe('Grouped', function() {
- viewport.forEach(view => {
- before(function() {
- cy.viewport(view);
- });
-
- it('Should display a default value ' + view, function() {
- cy
- .get(selector.singleGroupedSelect)
- .find(selector.singleValue)
- .should('contain', 'Blue');
- });
-
- it('Should display group headings in the menu ' + view, function() {
- cy
- .get(selector.singleGroupedSelect)
- .find(selector.indicatorDropdown)
- .click()
- .get(selector.singleGroupedSelect)
- .find(selector.menu)
- .should('be.visible')
- .find(selector.groupHeading)
- .should('have.length', 2);
- });
- });
- });
-
- describe('Clearable', function() {
- viewport.forEach(view => {
- before(function() {
- cy.viewport(view);
- });
-
- it('Should display a default value ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .find(selector.singleValue)
- .should('contain', 'Blue');
- });
-
- it('Should display a clear indicator ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .find(selector.indicatorClear)
- .should('be.visible');
- });
-
- it('Should clear the default value when clear is clicked ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .find(selector.indicatorClear)
- .click()
- .get(selector.singleClearableSelect)
- .find(selector.placeholder)
- .should('be.visible')
- .should('contain', 'Select...');
- });
-
- // 'backspaceRemovesValue' is true by default
- it('Should clear the value when backspace is pressed ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .click()
- .find('input')
- .type('{backspace}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.placeholder)
- .should('be.visible')
- .should('contain', 'Select...');
- });
-
- // 'backspaceRemovesValue' is true by default, and delete is included
- it('Should clear the value when delete is pressed ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .click()
- .find('input')
- .type('{del}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.placeholder)
- .should('be.visible')
- .should('contain', 'Select...');
- });
-
- it('Should not open the menu when a value is cleared with backspace ' + view, function() {
- cy
- .get(selector.singleClearableSelect)
- .click()
- .find('input')
- // Close the menu, but leave focused
- .type('{esc}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.menu)
- .should('not.be.visible')
- // Clear the value, verify menu doesn't pop
- .get(selector.singleClearableSelect)
- .find('input')
- .type('{backspace}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.menu)
- .should('not.be.visible');
- });
-
- it('Should clear the value when escape is pressed if escapeClearsValue and menu is closed ' + view, function() {
- cy
- // nothing happens if escapeClearsValue is false
- .get(selector.singleClearableSelect)
- .click()
- .find('input')
- // Escape once to close the menu
- .type('{esc}', { force: true })
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('not.be.visible')
- // Escape again to verify value is not cleared
- .get(selector.singleClearableSelect)
- .find('input')
- .type('{esc}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.placeholder)
- .should('not.be.visible')
- // Enable escapeClearsValue and try again, it should clear the value
- .get(selector.singleClearable)
- .find(selector.checkboxEscapeClearsValue)
- .click()
- .get(selector.singleClearableSelect)
- .click()
- .find('input')
- // Escape once to close the menu
- .type('{esc}', { force: true })
- .get(selector.singleBasicSelect)
- .find(selector.menu)
- .should('not.be.visible')
- // Escape again to clear value
- .get(selector.singleClearableSelect)
- .find('input')
- .type('{esc}', { force: true })
- .get(selector.singleClearableSelect)
- .find(selector.placeholder)
- .should('be.visible');
- });
- });
- });
- });
-
- describe('Multi Select ', function() {
- viewport.forEach(view => {
- before(function() {
- cy.viewport(view);
- });
- beforeEach(function() {
- cy.reload();
- });
- it(
- 'Should display several default values that can be removed ' + view,
- function() {
- cy
- .get(selector.multiSelectDefaultValues)
- .then(function($defaultValue) {
- expect($defaultValue).to.have.length(2);
- expect($defaultValue.eq(0)).to.contain('Purple');
- expect($defaultValue.eq(1)).to.contain('Red');
- });
-
- cy
- .get(selector.firstMultiValueRemove)
- .click()
- .get(selector.multiSelectDefaultValues)
- .then(function($defaultValue) {
- expect($defaultValue).to.have.length(1);
- expect($defaultValue.eq(0)).to.contain('Red');
- })
- .get(selector.menuMulti)
- .should('not.be.visible');
- }
- );
- it(
- 'Should be able to remove values on keyboard actions ' + view,
- function() {
- cy
- .get(selector.multiSelectInput)
- .click()
- .type('{backspace}', { force: true })
- .get(selector.multiSelectDefaultValues)
- .then(function($defaultValue) {
- expect($defaultValue).to.have.length(1);
- expect($defaultValue.eq(0)).to.contain('Purple');
- })
- .get(selector.multiSelectInput)
- .type('{backspace}', { force: true })
- .get(selector.placeHolderMulti)
- .should('contain', 'Select...');
- }
- );
- it(
- 'Should select different options using - click and enter ' + view,
- function() {
- cy
- .get(selector.menuMulti)
- .should('not.exist')
- .get(selector.toggleMenuMulti)
- .click()
- .get(selector.menuMulti)
- .should('exist')
- .get(selector.menuMulti)
- .should('be.visible')
- .get(selector.menuOption)
- .contains('Orange')
- .click()
- .get(selector.toggleMenuMulti)
- .click()
- .get(selector.menuOption)
- .contains('Yellow')
- .click()
- .get(selector.multiSelectInput)
- .click({ force: true })
- .type('Slate', { force: true })
- .type('{enter}', { force: true })
- .get(selector.multiSelectDefaultValues)
- .then(function($defaultValue) {
- expect($defaultValue).to.have.length(5);
- expect($defaultValue.eq(0)).to.contain('Purple');
- expect($defaultValue.eq(1)).to.contain('Red');
- expect($defaultValue.eq(2)).to.contain('Orange');
- expect($defaultValue.eq(3)).to.contain('Yellow');
- expect($defaultValue.eq(4)).to.contain('Slate');
- });
- }
- );
- });
- });
-});
diff --git a/cypress/integration/single-select.spec.js b/cypress/integration/single-select.spec.js
new file mode 100644
index 0000000000..905d660a7a
--- /dev/null
+++ b/cypress/integration/single-select.spec.js
@@ -0,0 +1,299 @@
+const selector = require('../fixtures/selectors.json');
+const baseUrl = require('../../cypress.json').baseUrl;
+
+const setup = [
+ { width: 1440, height: 900, viewport: 'macbook-15', device: 'Laptop' },
+ { width: 375, height: 667, viewport: 'iphone-6', device: 'Mobile' },
+ { width: 768, height: 1024, viewport: 'ipad-2', device: 'Tablet' },
+];
+
+describe('Single Select', () => {
+ before(() => {
+ cy.visit(baseUrl);
+ cy.title().should('equal', 'React-Select');
+ cy.get('h1').should('contain', 'Test Page for Cypress');
+ });
+
+ for (let config of setup) {
+ const { viewport } = config;
+
+ context(`Basic in view: ${viewport}`, () => {
+ before(() => {
+ cy.viewport(viewport);
+ });
+
+ beforeEach(() => {
+ cy.reload();
+ });
+
+ // TODO:
+ // This test seems to fail when cypress tab is focused.
+ // Also, manual testing does not confirm the desired behavior.
+ it.skip(`Should not display the options menu when touched and dragged in view: ${viewport}`, () => {
+ cy.get(selector.toggleMenuSingle)
+ .click()
+ .click()
+ .get(selector.menuSingle)
+ .should('not.be.visible')
+ // to be sure it says focus and the menu is closed
+ .get(selector.singleSelectSingleInput)
+ .trigger('mousedown')
+ .get(selector.menuSingle)
+ .should('not.be.visible');
+ });
+ it(`Should display a default value in view: ${viewport}`, () => {
+ cy.get(selector.singleBasicSelect)
+ .find(selector.singleValue)
+ .should('contain', 'Ocean');
+ });
+
+ it(`Should expand the menu when expand icon is clicked in view: ${viewport}`, () => {
+ cy
+ // Menu is not yet open
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('not.exist')
+ // A dropdown icon is shown
+ .get(selector.singleBasicSelect)
+ .find(selector.indicatorDropdown)
+ .should('be.visible')
+ // Click the icon to open the menu
+ .click()
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('exist')
+ .should('be.visible')
+ .contains('Green');
+ });
+
+ it(`Should close the menu after selecting an option in view: ${viewport}`, () => {
+ cy.get(selector.singleBasicSelect)
+ .find(selector.indicatorDropdown)
+ .click()
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('contain', 'Green')
+ .contains('Green')
+ .click()
+ // Value has updated
+ .get(selector.singleBasicSelect)
+ .find(selector.singleValue)
+ .should('contain', 'Green')
+ // Menu has closed
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('not.exist');
+ });
+
+ it(`Should be disabled once disabled is checked in view: ${viewport}`, () => {
+ cy
+ // Does not start out disabled
+ .get(selector.singleBasicSelect)
+ // .click()
+ .find('input')
+ .should('exist')
+ .should('not.be.disabled')
+ // Disable the select component
+ .get(selector.singleBasic)
+ .find(selector.checkboxDisable)
+ .click()
+ // Now the input should be disabled
+ .get(selector.singleBasicSelect)
+ .click({ force: true })
+ .find('input')
+ .should('exist')
+ .should('be.disabled');
+ });
+
+ it(`Should filter options when searching in view: ${viewport}`, () => {
+ cy.get(selector.singleBasicSelect)
+ .click()
+ .find('input')
+ .type('For', { force: true })
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('contain', 'Forest')
+ .find(selector.menuOption)
+ .should('have.length', 1);
+ });
+
+ it(`Should show "No options" if searched value is not found in view: ${viewport}`, () => {
+ cy.get(selector.singleBasicSelect)
+ .click()
+ .find('input')
+ .type('/', { force: true })
+ .get(selector.noOptionsValue)
+ .should('contain', 'No options');
+ });
+
+ it(`Should not clear the value when backspace is pressed in view: ${viewport}`, () => {
+ cy.get(selector.singleBasicSelect)
+ .click()
+ .find('input')
+ .type('{backspace}', { force: true })
+ .get(selector.singleBasicSelect)
+ .find(selector.placeholder)
+ .should('not.be.visible');
+ });
+ });
+
+ context(`Grouped in view: ${viewport}`, () => {
+ before(() => {
+ cy.viewport(viewport);
+ });
+
+ beforeEach(() => {
+ cy.reload();
+ });
+
+ it(`Should display a default value in view: ${viewport}`, () => {
+ cy.get(selector.singleGroupedSelect)
+ .find(selector.singleValue)
+ .should('contain', 'Blue');
+ });
+
+ it(`Should display group headings in the menu in view: ${viewport}`, () => {
+ cy.get(selector.singleGroupedSelect)
+ .find(selector.indicatorDropdown)
+ .click()
+ .get(selector.singleGroupedSelect)
+ .find(selector.menu)
+ .should('be.visible')
+ .find(selector.groupHeading)
+ .should('have.length', 2);
+ });
+
+ it(`Should focus next option on down arrow key press: ${viewport}`, () => {
+ cy.get(selector.singleGroupedSelect)
+ .click()
+ .find('input')
+ .type('{downarrow}', { force: true })
+ .get(selector.focusedOption)
+ .should('exist');
+ });
+
+ it(`Should focus next option on down arrow key press after filtering: ${viewport}`, () => {
+ cy.get(selector.singleGroupedSelect)
+ .click()
+ .find('input')
+ .type('o', { force: true })
+ .type('{downarrow}', { force: true })
+ .get(selector.focusedOption)
+ .should('exist');
+ });
+ });
+
+ context(`Clearable in view: ${viewport}`, () => {
+ before(() => {
+ cy.viewport(viewport);
+ });
+
+ beforeEach(() => {
+ cy.reload();
+ });
+
+ it(`Should display a default value in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .find(selector.singleValue)
+ .should('contain', 'Blue');
+ });
+
+ it(`Should display a clear indicator in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .find(selector.indicatorClear)
+ .should('be.visible');
+ });
+
+ it(`Should clear the default value when clear is clicked in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .find(selector.indicatorClear)
+ .click()
+ .get(selector.singleClearableSelect)
+ .find(selector.placeholder)
+ .should('be.visible')
+ .should('contain', 'Select...');
+ });
+
+ // 'backspaceRemovesValue' is true by default
+ it(`Should clear the value when backspace is pressed in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .click()
+ .find('input')
+ .type('{backspace}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.placeholder)
+ .should('be.visible')
+ .should('contain', 'Select...');
+ });
+
+ // 'backspaceRemovesValue' is true by default, and delete is included
+ it(`Should clear the value when delete is pressed in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .click()
+ .find('input')
+ .type('{del}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.placeholder)
+ .should('be.visible')
+ .should('contain', 'Select...');
+ });
+
+ it(`Should not open the menu when a value is cleared with backspace in view: ${viewport}`, () => {
+ cy.get(selector.singleClearableSelect)
+ .click()
+ .find('input')
+ // Close the menu, but leave focused
+ .type('{esc}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.menu)
+ .should('not.be.visible')
+ // Clear the value, verify menu doesn't pop
+ .get(selector.singleClearableSelect)
+ .find('input')
+ .type('{backspace}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.menu)
+ .should('not.be.visible');
+ });
+
+ it(`Should clear the value when escape is pressed if escapeClearsValue and menu is closed in view: ${viewport}`, () => {
+ cy
+ // nothing happens if escapeClearsValue is false
+ .get(selector.singleClearableSelect)
+ .click()
+ .find('input')
+ // Escape once to close the menu
+ .type('{esc}', { force: true })
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('not.be.visible')
+ // Escape again to verify value is not cleared
+ .get(selector.singleClearableSelect)
+ .find('input')
+ .type('{esc}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.placeholder)
+ .should('not.be.visible')
+ // Enable escapeClearsValue and try again, it should clear the value
+ .get(selector.singleClearable)
+ .find(selector.checkboxEscapeClearsValue)
+ .click()
+ .get(selector.singleClearableSelect)
+ .click()
+ .find('input')
+ // Escape once to close the menu
+ .type('{esc}', { force: true })
+ .get(selector.singleBasicSelect)
+ .find(selector.menu)
+ .should('not.be.visible')
+ // Escape again to clear value
+ .get(selector.singleClearableSelect)
+ .find('input')
+ .type('{esc}', { force: true })
+ .get(selector.singleClearableSelect)
+ .find(selector.placeholder)
+ .should('be.visible');
+ });
+ });
+ }
+});
diff --git a/docs/App/Footer.js b/docs/App/Footer.js
index d50ed6da5f..816c0e92fc 100644
--- a/docs/App/Footer.js
+++ b/docs/App/Footer.js
@@ -1,6 +1,7 @@
// @flow
-
-import React from 'react';
+/** @jsx jsx */
+import { type Node } from 'react';
+import { jsx } from '@emotion/react';
// const smallDevice = '@media (max-width: 769px)';
const largeDevice = '@media (min-width: 770px)';
@@ -45,6 +46,9 @@ const A = props => (
color: '#505F79',
textDecoration: 'none',
+ ':visited': {
+ color: '#505F79',
+ },
':hover': {
textDecoration: 'underline',
},
@@ -53,11 +57,14 @@ const A = props => (
/>
);
-export default function Footer() {
+export default function Footer(): Node {
return (
-