diff --git a/.babelrc b/.babelrc deleted file mode 100644 index e34a89d36d..0000000000 --- a/.babelrc +++ /dev/null @@ -1,9 +0,0 @@ -{ - "ignore": ["node-modules/**", "src/index.umd.js"], - "presets": [ "env", "stage-0", "react"], - "env": { - "test": { - "plugins": ["istanbul"], - }, - } -} diff --git a/.browserslistrc b/.browserslistrc new file mode 100644 index 0000000000..93cda006dd --- /dev/null +++ b/.browserslistrc @@ -0,0 +1,3 @@ +> 0.25% +ie 11 +not op_mini all 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/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 new file mode 100644 index 0000000000..1a75fe2e1e --- /dev/null +++ b/.circleci/config.yml @@ -0,0 +1,75 @@ +version: 2 + +docker_defaults: &docker_defaults + docker: + - image: cypress/browsers:node12.18.0-chrome83-ff77 + environment: + TERM: xterm + working_directory: ~/project/repo + +attach_workspace: &attach_workspace + attach_workspace: + at: ~/project + +install_steps: &install_steps + steps: + - checkout + - restore_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 + - save_cache: + name: Save node_modules cache + key: dependency-cache-{{ .Branch }}-{{ checksum "package.json" }} + paths: + - ~/.cache + - persist_to_workspace: + root: ~/project + paths: + - repo + +workflows: + version: 2 + build_pipeline: + jobs: + - build + - unit_test: + requires: + - build + - end_to_end: + requires: + - build +jobs: + build: + <<: *docker_defaults + <<: *install_steps + unit_test: + <<: *docker_defaults + steps: + - *attach_workspace + - run: + 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 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/.editorconfig b/.editorconfig index 2d16f58976..f83c0c4d6b 100644 --- a/.editorconfig +++ b/.editorconfig @@ -7,16 +7,11 @@ end_of_line = lf charset = utf-8 trim_trailing_whitespace = true insert_final_newline = true -indent_style = tab -translate_tabs_to_spaces = false - -[*.json] -indent_style = space -indent_size = 2 - -[*.yml] indent_style = space indent_size = 2 [*.md] trim_trailing_whitespace = false + +[.circleci/config.yml] +indent_size = 4 diff --git a/.eslintignore b/.eslintignore index 756c5aabf9..6db96945f0 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,6 +1,8 @@ -lib/* -dist/* coverage/* -examples/dist/* +cypress/plugins/* +cypress/support/* +**/dist/* +flow-typed/* +lib/* node_modules/* -bower_components/* +**/node_modules/* diff --git a/.eslintrc.js b/.eslintrc.js index 0dacb6aa99..3172aa03a5 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,41 +1,43 @@ module.exports = { - parserOptions: { - ecmaVersion: 6, - sourceType: 'module', - ecmaFeatures: { - experimentalObjectRestSpread: true, - jsx: true, - }, - }, - env: { - browser: true, - es6: true, - node: true, - }, - plugins: ['react'], - rules: { - 'curly': [2, 'multi-line'], - 'jsx-quotes': 1, - 'no-shadow': 0, - 'no-trailing-spaces': 0, - 'no-underscore-dangle': 0, - 'no-unused-expressions': 0, - 'object-curly-spacing': [1, 'always'], - 'quotes': [2, 'single', 'avoid-escape'], - 'react/jsx-boolean-value': 1, - 'react/jsx-no-undef': 1, - 'react/jsx-uses-react': 1, - 'react/jsx-uses-vars': 1, - 'react/jsx-wrap-multilines': 1, - 'react/no-did-mount-set-state': 1, - 'react/no-did-update-set-state': 1, - 'react/no-unknown-property': 1, - 'react/prop-types': 1, - 'react/react-in-jsx-scope': 1, - 'react/self-closing-comp': 1, - 'react/sort-comp': 1, - 'react/sort-prop-types': 1, - 'semi': 2, - 'strict': 0, - }, + extends: ['plugin:react-hooks/recommended'], + parser: 'babel-eslint', + env: { + browser: true, + es6: true, + node: true, + }, + plugins: ['react'], + rules: { + 'no-unused-vars': [ + 'error', + { + args: 'after-used', + argsIgnorePattern: '^event$', + ignoreRestSiblings: true, + vars: 'all', + varsIgnorePattern: 'jsx|emotionJSX', + }, + ], + curly: [2, 'multi-line'], + 'jsx-quotes': 1, + 'no-shadow': 1, + 'no-trailing-spaces': 1, + 'no-underscore-dangle': 1, + 'no-unused-expressions': 1, + 'object-curly-spacing': [1, 'always'], + quotes: [2, 'single', 'avoid-escape'], + 'react/jsx-boolean-value': 1, + 'react/jsx-no-undef': 1, + 'react/jsx-uses-react': 1, + 'react/jsx-uses-vars': 1, + 'react/jsx-wrap-multilines': 1, + 'react/no-did-mount-set-state': 1, + 'react/no-did-update-set-state': 1, + 'react/no-unknown-property': 1, + 'react/react-in-jsx-scope': 1, + 'react/self-closing-comp': 1, + 'react/sort-prop-types': 1, + semi: 2, + strict: 0, + }, }; diff --git a/.flowconfig b/.flowconfig new file mode 100644 index 0000000000..39bc0d7107 --- /dev/null +++ b/.flowconfig @@ -0,0 +1,23 @@ +[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' + +[strict] 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/.gitattributes b/.gitattributes deleted file mode 100644 index f3f4a7c2d7..0000000000 --- a/.gitattributes +++ /dev/null @@ -1,3 +0,0 @@ -dist/* binary -examples/dist/* binary -lib/* binary diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md new file mode 100644 index 0000000000..1ae6e5d899 --- /dev/null +++ b/.github/CONTRIBUTING.md @@ -0,0 +1,30 @@ +# 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 (+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 demonstrating its use. +* Be careful to follow the code style of the project. Run `yarn lint` after +your changes and ensure you do not introduce any new errors or warnings. +* This repository uses `flow`, please run `yarn flow` after your changes to ensure +that you do not introduce any new type errors. + +* 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 adding it to the queue. +* 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 or @JedWatson +* Run `yarn coveralls` to check that the coverage hasn't dropped, and look at the +report (under the generated `coverage` directory) to check that your changes are +covered diff --git a/ISSUE_TEMPLATE.md b/.github/ISSUE_TEMPLATE.md similarity index 61% rename from ISSUE_TEMPLATE.md rename to .github/ISSUE_TEMPLATE.md index fb96d21b44..1a70f05a29 100644 --- a/ISSUE_TEMPLATE.md +++ b/.github/ISSUE_TEMPLATE.md @@ -3,15 +3,26 @@ 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. -Here is a Plunker you can fork that has react-select loaded and supports JSX syntax: -https://plnkr.co/edit/dHygFMWWqVwaRAfpEmbn?p=preview +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 + +To report bugs against react-select v1 please fork the following code-sandbox: +https://codesandbox.io/s/n34mq0743j You may also find the [online Babel tool](https://babeljs.io/repl/) quite helpful if you wish to use ES6/ES7 syntax not yet supported by the browser you are using. 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/.gitignore b/.gitignore index 8330851ec1..3e3336a114 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,9 @@ +# Build +lib +dist +docs/dist +.env + # Logs logs *.log @@ -12,6 +18,12 @@ lib-cov coverage .nyc_output +# Cypress +cypress/videos +cypress/screenshots +cypress/support +cypress/plugins + # Dependency directory node_modules bower_components @@ -19,14 +31,13 @@ bower_components # Publish directory .publish -# Editor artifacts +# Editor artefacts .idea # Other .DS_Store .env -yarn.lock +package-lock.json -# v2 ignores +# Notes .NOTES.md -.TODO.md 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 new file mode 100644 index 0000000000..6db96945f0 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,8 @@ +coverage/* +cypress/plugins/* +cypress/support/* +**/dist/* +flow-typed/* +lib/* +node_modules/* +**/node_modules/* diff --git a/.prettierrc.js b/.prettierrc.js new file mode 100644 index 0000000000..a425d3f761 --- /dev/null +++ b/.prettierrc.js @@ -0,0 +1,4 @@ +module.exports = { + singleQuote: true, + trailingComma: 'es5', +}; 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/.travis.yml b/.travis.yml deleted file mode 100644 index ac23f398e8..0000000000 --- a/.travis.yml +++ /dev/null @@ -1,8 +0,0 @@ -sudo: false -language: node_js -node_js: - - "v4" -script: - - npm run lint - - npm run test - - npm run coveralls diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md index b8dff4be6c..b9c862838a 100644 --- a/CONTRIBUTING.md +++ b/CONTRIBUTING.md @@ -3,52 +3,23 @@ Thanks for your interest in React-Select. All forms of contribution are welcome, from issue reports to PRs and documentation / write-ups. -* We use node.js v4+ for development and testing. Due to incompatibilities with -JSDOM and older versions of node.js, you'll need to use node 4 and above to run the -tests. If you can't install node v4 or above as your "default" node installation, you -could try using [nvm](https://github.com/creationix/nvm) to install multiple -versions concurrently. -* If you're upgrading your node.js 0.x environment, it's sometimes necessary -to remove the node_modules directory under react-select, and run npm install -again, in order to ensure all the correct dependencies for the new version -of node.js (as a minimum, you'll need to remove the `jsdom` module, and -reinstall that). - Before you open a PR: -* If you're planning to add or change a major feature in a PR, please ensure -the change is aligned with the project roadmap by opening an issue first, -especially if you're going to spend a lot of time on it. -* In development, run `npm start` to build (+watch) the project source, and run +* 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 demonstrating its use. -* Please **do not** commit the build files. Make sure **only** your changes to -`/src/`, `/less/` and `/examples/src` are included in your PR. -* Be careful to follow the code style of the project. Run `npm run lint` after -your changes and ensure you do not introduce any new errors or warnings. - +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 adding it to the queue. -* Make sure you do not add regressions by running `npm test`. +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 @bruderstein -* Run `npm run cover` to check that the coverage hasn't dropped, and look at the -report (under the generated `coverage` directory) to check that your changes are -covered +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) -* You can also run `npm run lint` - our linter is a WIP -but please ensure there are not more violations than before your changes. -* All new features and changes need documentation. We have three translations, -please read our [Documentation Guidelines](https://github.com/keystonejs/keystone/wiki/Documentation-Translation-Guidelines). - -* _Make sure you revert your build before submitting a PR_ to reduce the chance -of conflicts. `npm run build` is run after PRs are merged and before any -releases are made. +* All new features and changes need documentation. diff --git a/HISTORY.md b/HISTORY.md deleted file mode 100644 index c106ee42d6..0000000000 --- a/HISTORY.md +++ /dev/null @@ -1,1131 +0,0 @@ -# React-Select - -## 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) - -## 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 70feb3bae8..0ae4e1ddb0 100644 --- a/README.md +++ b/README.md @@ -1,461 +1,161 @@ [![NPM](https://img.shields.io/npm/v/react-select.svg)](https://www.npmjs.com/package/react-select) -[![CDNJS](https://img.shields.io/cdnjs/v/react-select.svg)](https://cdnjs.com/libraries/react-select) -[![Build Status](https://travis-ci.org/JedWatson/react-select.svg?branch=master)](https://travis-ci.org/JedWatson/react-select) +[![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 -============ +# React-Select -A Select control built with and for [React](http://facebook.github.io/react/index.html). Initially built for use in [KeystoneJS](http://www.keystonejs.com). +The Select control for [React](https://reactjs.com). Initially built for use in [KeystoneJS](http://www.keystonejs.com). -## Demo & Examples +See [react-select.com](https://www.react-select.com) for live demos and comprehensive docs. -Live demo: [jedwatson.github.io/react-select](http://jedwatson.github.io/react-select/) +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. +For the story behind this component, watch Jed's talk at React Conf 2019 - [building React Select](https://youtu.be/yS0jUnmBujE) -## Installation +Features include: -The easiest way to use react-select is to install it from npm and build it into your app with Webpack. - -```js -yarn add react-select -``` +- 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 -You can then import react-select and its styles in your application as follows: +## Using an older version? -```js -import Select from 'react-select'; -import 'react-select/dist/react-select.css'; -``` +- [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) -You can also use the standalone UMD build by including `dist/react-select.js` and `dist/react-select.css` in your page. If you do this you'll also need to include the dependencies. For example: +# Installation and usage -```html - - - - - - +The easiest way to use react-select is to install it from npm and build it into your app with Webpack. - +``` +yarn add react-select ``` - -## Usage - -React-Select generates a hidden text field containing the selected value, so you can submit it as part of a standard form. You can also listen for changes with the `onChange` event property. - -Options should be provided as an `Array` of `Object`s, each with a `value` and `label` property for rendering and searching. You can use a `disabled` property to indicate whether the option is disabled or not. - -The `value` property of each option should be either a string or a number. - -When the value is changed, `onChange(selectedValueOrValues)` will fire. Note that (as of 1.0) you **must** handle the change and pass the updated `value` to the Select. - +Then use it in your app: +#### With React Component ```js import React from 'react'; import Select from 'react-select'; +const options = [ + { value: 'chocolate', label: 'Chocolate' }, + { value: 'strawberry', label: 'Strawberry' }, + { value: 'vanilla', label: 'Vanilla' }, +]; + class App extends React.Component { state = { - selectedOption: '', - } - handleChange = (selectedOption) => { - this.setState({ selectedOption }); - console.log(`Selected: ${selectedOption.label}`); - } + selectedOption: null, + }; + handleChange = selectedOption => { + this.setState( + { selectedOption }, + () => console.log(`Option selected:`, this.state.selectedOption) + ); + }; render() { - const { selectedOption } = this.state; - const value = selectedOption && selectedOption.value; + const { selectedOption } = this.state; return ( ` component, which will be added to the base `.Select` className for the outer container. - -The built-in Options renderer also support custom classNames, just add a `className` property to objects in the `options` array. - -### Multiselect options - -You can enable multi-value selection by setting `multi={true}`. In this mode: - -* Selected options will be removed from the dropdown menu by default. If you want them to remain in the list, set `removeSelected={false}` -* The selected values are submitted in multiple `` fields, use the `joinValues` prop to submit joined values in a single field instead -* The values of the selected items are joined using the `delimiter` prop to create the input value when `joinValues` is true -* A simple value, if provided, will be split using the `delimiter` prop -* The `onChange` event provides an array of selected options _or_ a comma-separated string of values (eg `"1,2,3"`) if `simpleValue` is true -* By default, only options in the `options` array can be selected. Use the `Creatable` Component (which wraps `Select`) to allow new options to be created if they do not already exist. Hitting comma (','), ENTER or TAB will add a new option. Versions `0.9.x` and below provided a boolean attribute on the `Select` Component (`allowCreate`) to achieve the same functionality. It is no longer available starting with version `1.0.0`. -* By default, selected options can be cleared. To disable the possibility of clearing a particular option, add `clearableValue: false` to that option: -```js -var options = [ - { value: 'one', label: 'One' }, - { value: 'two', label: 'Two', clearableValue: false } -]; -``` -Note: the `clearable` prop of the Select component should also be set to `false` to prevent allowing clearing all fields at once - -#### Accessibility Note - -Selected values aren't focus targets, which means keyboard users can't tab to them, and are restricted to removing them using backspace in order. This isn't ideal and I'm looking at other options for the future; in the meantime if you want to use a custom `valueComponent` that implements tabIndex and keyboard event handling, see #2098 for an example. - -### Async options - -If you want to load options asynchronously, use the `Async` export and provide a `loadOptions` Function. - -The function takes two arguments `String input, Function callback`and will be called when the input text is changed. - -When your async process finishes getting the options, pass them to `callback(err, data)` in a Object `{ options: [] }`. - -The select control will intelligently cache options for input strings that have already been fetched. The cached result set will be filtered as more specific searches are input, so if your async process would only return a smaller set of results for a more specific query, also pass `complete: true` in the callback object. Caching can be disabled by setting `cache` to `false` (Note that `complete: true` will then have no effect). - -Unless you specify the property `autoload={false}` the control will automatically load the default set of options (i.e. for `input: ''`) when it is mounted. - -```js -import { Async } from 'react-select'; - -const getOptions = (input, callback) => { - setTimeout(() => { - callback(null, { - options: [ - { value: 'one', label: 'One' }, - { value: 'two', label: 'Two' } - ], - // CAREFUL! Only set this to true when there are no more options, - // or more specific queries will not be sent to the server. - complete: true - }); - }, 500); -}; - - -``` - -#### Note about filtering async options - -The `Async` component doesn't change the default behaviour for filtering the options based on user input, but if you're already filtering the options server-side you may want to customise or disable this feature (see [filtering options](#filtering-options) below). For example, if you would like to completely disable client side filtering, you can do so with: - -```js -filterOptions={(options, filter, currentValues) => { - // Do no filtering, just return all options - return options; -}} -``` - -### Async options with Promises - -`loadOptions` supports Promises, which can be used in very much the same way as callbacks. - -Everything that applies to `loadOptions` with callbacks still applies to the Promises approach (e.g. caching, autoload, ...) - -An example using the `fetch` API and ES6 syntax, with an API that returns an object like: - -```js -import { Async } from 'react-select'; - -/* - * assuming the API returns something like this: - * const json = [ - * { value: 'one', label: 'One' }, - * { value: 'two', label: 'Two' } - * ] - */ - -const getOptions = (input) => { - return fetch(`/users/${input}.json`) - .then((response) => { - return response.json(); - }).then((json) => { - return { options: json }; - }); -} - - -``` - -### Async options loaded externally - -If you want to load options asynchronously externally from the `Select` component, you can have the `Select` component show a loading spinner by passing in the `isLoading` prop set to `true`. - +#### With React Hooks ```js -import Select from 'react-select'; - -let isLoadingExternally = true; - - +
); } ``` -### Filtering options - -You can control how options are filtered with the following props: - -* `matchPos`: `"start"` or `"any"`: whether to match the text entered at the start or any position in the option value -* `matchProp`: `"label"`, `"value"` or `"any"`: whether to match the value, label or both values of each option when filtering -* `ignoreCase`: `Boolean`: whether to ignore case or match the text exactly when filtering -* `ignoreAccents`: `Boolean`: whether to ignore accents on characters like ø or å - -`matchProp` and `matchPos` both default to `"any"`. -`ignoreCase` defaults to `true`. -`ignoreAccents` defaults to `true`. - -#### Advanced filters +## Props -You can also completely replace the method used to filter either a single option, or the entire options array (allowing custom sort mechanisms, etc.) +Common props you may want to specify include: -* `filterOption`: `function(Object option, String filter)` returns `Boolean`. Will override `matchPos`, `matchProp`, `ignoreCase` and `ignoreAccents` options. -* `filterOptions`: `function(Array options, String filter, Array currentValues)` returns `Array filteredOptions`. Will override `filterOption`, `matchPos`, `matchProp`, `ignoreCase` and `ignoreAccents` options. +- `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 -For multi-select inputs, when providing a custom `filterOptions` method, remember to exclude current values from the returned array of options. +See the [props documentation](https://www.react-select.com/props) for complete documentation on the props react-select supports. -#### Filtering large lists +## Controllable Props -The default `filterOptions` method scans the options array for matches each time the filter text changes. -This works well but can get slow as the options array grows to several hundred objects. -For larger options lists a custom filter function like [`react-select-fast-filter-options`](https://github.com/bvaughn/react-select-fast-filter-options) will produce better results. +You can control the following props by providing values for them. If you don't, react-select will manage them for you. -### Efficiently rendering large lists with windowing +- `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) -The `menuRenderer` property can be used to override the default drop-down list of options. -This should be done when the list is large (hundreds or thousands of items) for faster rendering. -Windowing libraries like [`react-virtualized`](https://github.com/bvaughn/react-virtualized) can then be used to more efficiently render the drop-down menu like so. -The easiest way to do this is with the [`react-virtualized-select`](https://github.com/bvaughn/react-virtualized-select/) HOC. -This component decorates a `Select` and uses the react-virtualized `VirtualScroll` component to render options. -Demo and documentation for this component are available [here](https://bvaughn.github.io/react-virtualized-select/). +If you don't provide these props, you can set the initial value of the state they control: -You can also specify your own custom renderer. -The custom `menuRenderer` property accepts the following named parameters: +- `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 -| Parameter | Type | Description | -|:---|:---|:---| -| focusedOption | `Object` | The currently focused option; should be visible in the menu by default. | -| focusOption | `Function` | Callback to focus a new option; receives the option as a parameter. | -| labelKey | `String` | Option labels are accessible with this string key. | -| optionClassName | `String` | The className that gets used for options | -| optionComponent | `ReactClass` | The react component that gets used for rendering an option | -| optionRenderer | `Function` | The function that gets used to render the content of an option | -| options | `Array` | Ordered array of options to render. | -| selectValue | `Function` | Callback to select a new option; receives the option as a parameter. | -| valueArray | `Array` | Array of currently selected options. | +## Methods -### Updating input values with onInputChange +React-select exposes two public methods: -You can manipulate the input by providing a `onInputChange` callback that returns a new value. -**Please note:** When you want to use `onInputChange` only to listen to the input updates, you still have to return the unchanged value! +- `focus()` - focus the control programatically +- `blur()` - blur the control programatically -```js -function cleanInput(inputValue) { - // Strip all non-number characters from the input - return inputValue.replace(/[^0-9]/g, ""); -} - - -``` - -### Select Props - -| Property | Type | Default | Description | -|:---|:---|:---|:---| -| `aria`-describedby | string | undefined | HTML ID(s) of element(s) that should be used to describe this input (for assistive tech) | -| `aria`-label | string | undefined | Aria label (for assistive tech) | -| `aria`-labelledby | string | undefined | HTML ID of an element that should be used as the label (for assistive tech) | -| `arrowRenderer` | function | undefined | Renders a custom drop-down arrow to be shown in the right-hand side of the select: `arrowRenderer({ onMouseDown, isOpen })`. Won't render when set to `null` -| `autoBlur` | boolean | false | Blurs the input element after a selection has been made. Handy for lowering the keyboard on mobile devices | -| `autofocus` | boolean | undefined | deprecated; use the autoFocus prop instead | -| `autoFocus` | boolean | undefined | autofocus the component on mount | -| `autoload` | boolean | true | whether to auto-load the default async options set | -| `autosize` | boolean | true | If enabled, the input will expand as the length of its value increases | -| `backspaceRemoves` | boolean | true | whether pressing backspace removes the last item when there is no input value | -| `backspaceToRemoveMessage` | string | 'Press backspace to remove {last label}' | prompt shown in input when at least one option in a multiselect is shown, set to '' to clear | -| `className` | string | undefined | className for the outer element | -| `clearable` | boolean | true | should it be possible to reset value | -| `clearAllText` | string | 'Clear all' | title for the "clear" control when `multi` is true | -| `clearRenderer` | function | undefined | Renders a custom clear to be shown in the right-hand side of the select when clearable true: `clearRenderer()` | -| `clearValueText` | string | 'Clear value' | title for the "clear" control | -| `closeOnSelect` | boolean | true | whether to close the menu when a value is selected -| `deleteRemoves` | boolean | true | whether pressing delete key removes the last item when there is no input value | -| `delimiter` | string | ',' | delimiter to use to join multiple values | -| `disabled` | boolean | false | whether the Select is disabled or not | -| `escapeClearsValue` | boolean | true | whether escape clears the value when the menu is closed | -| `filterOption` | function | undefined | method to filter a single option `(option, filterString) => boolean` | -| `filterOptions` | boolean or function | undefined | boolean to enable default filtering or function to filter the options array `([options], filterString, [values]) => [options]` | -| `id` | string | undefined | html id to set on the input element for accessibility or tests -| `ignoreAccents` | boolean | true | whether to strip accents when filtering | -| `ignoreCase` | boolean | true | whether to perform case-insensitive filtering | -| `inputProps` | object | undefined | custom attributes for the Input (in the Select-control) e.g: `{'data-foo': 'bar'}` | -| `inputRenderer` | function | undefined | renders a custom input component | -| `instanceId` | string | increment | instance ID used internally to set html ids on elements for accessibility, specify for universal rendering | -| `isLoading` | boolean | false | whether the Select is loading externally or not (such as options being loaded) | -| `joinValues` | boolean | false | join multiple values into a single hidden input using the `delimiter` | -| `labelKey` | string | 'label' | the option property to use for the label | -| `matchPos` | string | 'any' | (any, start) match the start or entire string when filtering | -| `matchProp` | string | 'any' | (any, label, value) which option property to filter on | -| `menuBuffer` | number | 0 | buffer of px between the base of the dropdown and the viewport to shift if menu doesnt fit in viewport | -| `menuContainerStyle` | object | undefined | optional style to apply to the menu container | -| `menuRenderer` | function | undefined | Renders a custom menu with options; accepts the following named parameters: `menuRenderer({ focusedOption, focusOption, options, selectValue, valueArray })` | -| `menuStyle` | object | undefined | optional style to apply to the menu | -| `multi` | boolean | undefined | multi-value input | -| `name` | string | undefined | field name, for hidden `` tag | -| `noResultsText` | string | 'No results found' | placeholder displayed when there are no matching search results or a falsy value to hide it (can also be a react component) | -| `onBlur` | function | undefined | onBlur handler: `function(event) {}` | -| `onBlurResetsInput` | boolean | true | Whether to clear input on blur or not. If set to false, it only works if onCloseResetsInput is false as well. | -| `onChange` | function | undefined | onChange handler: `function(newOption) {}` | -| `onClose` | function | undefined | handler for when the menu closes: `function () {}` | -| `onCloseResetsInput` | boolean | true | whether to clear input when closing the menu through the arrow | -| `onFocus` | function | undefined | onFocus handler: `function(event) {}` | -| `onInputChange` | function | undefined | onInputChange handler/interceptor: `function(inputValue: string): string` | -| `onInputKeyDown` | function | undefined | input keyDown handler; call `event.preventDefault()` to override default `Select` behaviour: `function(event) {}` | -| `onMenuScrollToBottom` | function | undefined | called when the menu is scrolled to the bottom | -| `onOpen` | function | undefined | handler for when the menu opens: `function () {}` | -| `onSelectResetsInput` | boolean | true | whether the input value should be reset when options are selected. Also input value will be set to empty if 'onSelectResetsInput=true' and Select will get new value that not equal previous value. | -| `onValueClick` | function | undefined | onClick handler for value labels: `function (value, event) {}` | -| `openOnClick` | boolean | true | open the options menu when the control is clicked (requires searchable = true) | -| `openOnFocus` | boolean | false | open the options menu when the control gets focus | -| `optionClassName`: string | undefined | additional class(es) to apply to the