The Select Component for React.js

Related tags

react-select
Overview

NPM CircleCI Coverage Status Supported by Thinkmill

React-Select

The Select control for React. Initially built for use in KeystoneJS.

See react-select.com for live demos and comprehensive docs.

React Select is funded by Thinkmill and Atlassian. 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

Features include:

  • Flexible approach to data, with customisable functions
  • Extensible styling API with emotion
  • 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

Using an older version?

Installation and usage

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

Then use it in your app:

With React Component

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: null,
  };
  handleChange = selectedOption => {
    this.setState(
      { selectedOption },
      () => console.log(`Option selected:`, this.state.selectedOption)
    );
  };
  render() {
    const { selectedOption } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
      />
    );
  }
}

With React Hooks

import React, { useState } from "react";
import Select from "react-select";

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

export default function App() {
  const [selectedOption, setSelectedOption] = useState(null);
  
  return (
    <div className="App">
      <Select
        defaultValue={selectedOption}
        onChange={setSelectedOption}
        options={options}
      />
    </div>
  );
}

Props

Common props you may want to specify include:

  • autoFocus - focus the control when it mounts
  • className - apply a className to the control
  • classNamePrefix - apply classNames to inner elements with the given prefix
  • isDisabled - disable the control
  • isMulti - allow the user to select multiple values
  • isSearchable - allow the user to search for matching options
  • name - generate an HTML input with this name, containing the current value
  • onChange - subscribe to change events
  • options - specify the options the user can select from
  • placeholder - change the text displayed when no option is selected
  • noOptionsMessage - ({ inputValue: string }) => string | null - Text to display when there are no options
  • value - control the current value

See the props documentation for complete documentation on the props react-select supports.

Controllable Props

You can control the following props by providing values for them. If you don't, react-select will manage them for you.

  • value / onChange - specify the current value of the control
  • menuIsOpen / onMenuOpen / onMenuClose - control whether the menu is open
  • inputValue / onInputChange - control the value of the search input (changing this will update the available options)

If you don't provide these props, you can set the initial value of the state they control:

  • defaultValue - set the initial value of the control
  • defaultMenuIsOpen - set the initial open value of the menu
  • defaultInputValue - set the initial value of the search input

Methods

React-select exposes two public methods:

  • focus() - focus the control programatically
  • blur() - blur the control programatically

Customisation

Check the docs for more information on:

Thanks

Thank you to everyone who has contributed to this project. It's been a wild ride.

If you like React Select, you should follow me on twitter!

Shout out to Joss Mackison, Charles Lee, Ben Conolly, Tom Walker, Nathan Bierema, Eric Bonow, Mitchell Hamilton, Dave Brotherstone, Brian Vaughn, and the Atlassian Design System team who along with many other contributors have made this possible ❤️

License

MIT Licensed. Copyright (c) Jed Watson 2021.

Issues
  • optgroups

    optgroups

    Is there a way of having option groups, like the standard optgroup element in html select?

    opened by kopancek 95
  • feat(pagination): add async pagination

    feat(pagination): add async pagination

    This checks the first box in this list for v1.0.0 and closes #644

    This adds a new pagination prop to the Select.Aync component. It is a boolean which is false by default (false: things act as they did before it was added). When pagination is true loadOptions is given an additional argument; page. page tells the user's loadOptions function which page to load (they can use to when building their request). Additional page results are appended to the options list. Changing the input value will reset the page back to 1. loadOptions is called when the user scrolls to the bottom of the menu list, trigger the next page of results to be appended. Caching is used! (Cache all the things!). If a user scrolls down enough to load additional pages, then changes the input (triggering new requests), then enters the original input, all of the pages for the original input will be loaded back and when the user scroll to the bottom again, it will pick up on the page it left off on.

    Documentation has been updated to reflect the new prop and how it affects loadOptions' signature.

    EDIT: async-pagination

    opened by TheSharpieOne 68
  • positioning the component in containers that have `overflow: scroll;`

    positioning the component in containers that have `overflow: scroll;`

    I recently ran into this issue when using react-select components in a modal. For mobile the contents of the modal are scrollable. In this particular case, the Select was at the bottom of the content. Activating the Select made the container overflow and scrollable.

    Maybe the container notion of http://react-bootstrap.github.io/react-overlays/examples/ might make sense? Alternatively, maybe make use of https://github.com/souporserious/react-tether?

    pr/needs-review 
    opened by ksmth 64
  • Add validation support

    Add validation support

    Hi,

    Please add validation support as it is a very important part.

    issue/enhancement issue/reviewed 
    opened by jsingh27 60
  • Implemented allowCreate and more flexible add item on comma functionality

    Implemented allowCreate and more flexible add item on comma functionality

    I took the pull request #660 (which relates to #658 and #586) and re-did it as this is a huge show stopper for me on using this library and that implementation seemed a bit broken (and the 0.9.1 does not have some of the functionality that I also need the 1.0.0-beta does).

    This adds back in the allowCreate functionality with the tests reworked to pass (I also fixed an existing failing test as it seemed to be using the old setPropselectorChild method instead of setPropsForChild)

    UPDATE:

    I added another commit here to add a more flexible solution to the old add item on comma when allowCreate and mutli are enabled. My solution allows you to specific the keyCode to use to add a new item (set with the addItemOnKeyCode prop). While comma is pretty common, it is not always the best option and making it flexible like this it not that much difference in the implementation. This also allows you to turn off this feature which was not possible in the older implementation which i think is not completely uncommon. By default the addItemOnKeyCode prop is set to null so that the user need to explicitly enable this functionality.

    Also, I have no idea what the @coveralls messages mean. I did run coverage reports before and after and the coverage did not go down after my src / test updates (they actually went up on 1 or 2 src files but only marginally).

    If I could get an update if this will be an acceptable PR (or if any changes are needed to get this merged) and included into a npm tagged beta release relatively soon that would be great. Without these changes, using this library is a show stopper. Since 0.9.1 is also missing functionality the 1.x beta version has, using that version is also a show stopper. If these features are not going to be able to be consumable through npm relatively soon, I am going to have to publish my own version to be able to move forward with this library which I would prefer not to do.

    opened by ryanzec 60
  • Control opening direction up/down

    Control opening direction up/down

    Hi! Is there a way to control the opening direction programmatically? kinda like the native select tag behavior, opens up or down (when there is not enough space for the dropdown to open up ). thanks!

    opened by BenGedi 55
  • Z-Index Problems?

    Z-Index Problems?

    image

    I had this problem with a default install of react-select ? I can't seem to figure it out, I have spent hours on this. It appears near impossible to get the dropdown to be above everything... perhaps some sort of portal solution should be used for this ?

    opened by bradennapier 55
  • onChange returns the selected value, not the complete event

    onChange returns the selected value, not the complete event

    onChange simply returns the new value and label and not the whole event.

    I understand we can use the hidden input field to fire an onChange but this does not happen automatically and while we can manually fire an onChange for hidden input field, we can also wrap an event around the Select. Here is how I am doing it following #520:

    <Select
      name="form-field-name"
      value={val}
      options={options}
      onChange={(val)=> {onChangeFunc({target: { name:'revision_id', value: val.value }})}}
    />
    

    Creating an object myself and passing it to my onChange handler. Is this the right way to do it or you can suggest a better way around it?

    opened by OsamaShabrez 46
  • Support inline-block / sizes

    Support inline-block / sizes

    react-select only seems to work as a full-width block component. It would be nice if it would also support use as an inline-block component (like a standard <select>) with either an auto-calculated width or a specified width.

    opened by dantman 40
  • allowCreate={true} does not work in in 1.0.0

    allowCreate={true} does not work in in 1.0.0

    Is allowCreate={true} planned to be added, or is it a bug? If latter, when would this be added?

    opened by jimbojetlag 40
  • Not able to import /async, /creatable, .etc from an ES module

    Not able to import /async, /creatable, .etc from an ES module

    Minimal repro

    If placed in an .mjs file, the following code results in an error.

    import AsyncSelect from "react-select/async";
    
    console.log(AsyncSelect);
    
    internal/process/esm_loader.js:74
        internalBinding('errors').triggerUncaughtException(
                                  ^
    
    Error [ERR_UNSUPPORTED_DIR_IMPORT]: Directory import 'C:\Projects\OSS\Bugs\react-select-esm-repro\node_modules\react-select\async' is not supported resolving ES modules imported from C:\Projects\OSS\Bugs\react-select-esm-repro\index.mjs
    Did you mean to import react-select-esm-repro/node_modules/react-select/async/dist/react-select.cjs.js?
        at finalizeResolution (internal/modules/esm/resolve.js:281:17)
        at moduleResolve (internal/modules/esm/resolve.js:708:10)
        at Loader.defaultResolve [as _resolve] (internal/modules/esm/resolve.js:819:11)
        at Loader.resolve (internal/modules/esm/loader.js:89:40)
        at Loader.getModuleJob (internal/modules/esm/loader.js:242:28)
        at ModuleWrap.<anonymous> (internal/modules/esm/module_job.js:73:40)
        at link (internal/modules/esm/module_job.js:72:36) {
      code: 'ERR_UNSUPPORTED_DIR_IMPORT',
      url: 'file:///C:/Projects/OSS/Bugs/react-select-esm-repro/node_modules/react-select/async'
    }
    

    While this reproduction uses Node, the issue also occurs when using Webpack 5 which follows Node's handling of ES module imports. Here's the Webpack error for Googleability:

    Module not found: Error: Can't resolve 'react-select/async' in 'C:\Projects\ITI\iti-react\iti-react\dist'
    Did you mean 'react-select.esm.js'?
    BREAKING CHANGE: The request 'react-select/async' failed to resolve only because it was resolved as fully specified
    (probably because the origin is strict EcmaScript Module, e. g. a module with javascript mimetype, a '*.mjs' file, or a '*.js' file where the package.json contains '"type": "module"').
    The extension in the request is mandatory for it to be fully specified.
    Add the extension to the request.
    

    Suggested Solution

    Utilize the exports field in package.json as described in the Node documentation.

    Additional Context

    • react-select version: 5.1.0
    • Node version: 14.17.6
    issue/bug-unconfirmed 
    opened by srmagura 3
  • state not updating on mobie

    state not updating on mobie

    state is not getting updated when in mobile screen. Works for desktop. Don't know why.

    React : v17.0.2 React-select : v5.1.0

    issue/bug-unconfirmed awaiting-author-response 
    opened by mayowadabiri 10
  • fix: input doesn't auto size on safari in development env

    fix: input doesn't auto size on safari in development env

    This fixes issue #4839 . The bug comes from @emotion when start react-select in development env.

    This fix will recompute the css of input container whenever value changes. To not break the layout, I just add transform property. I've checked the profiler and the number of re-render times was the same as rea[email protected]

    opened by mikunpham 4
  • 'animatedComponents' is not behave as before in version 5

    'animatedComponents' is not behave as before in version 5

    Clearing animation in version 5, producing a gap in the Input field. Same result with disabled custom styles.

    React 17.0.2 Microsoft Edge 96.0.1032.0 / Windows 11 Mozila Firefox 93.0 / WSL Ubuntu

    Version 4.3.1

    4.3.1

    Version 5.1.0

    5.1.0

    issue/bug-confirmed 
    opened by Soberia 1
  • Clicking on the same option twice clear the selected value

    Clicking on the same option twice clear the selected value

    Clicking on the same option twice, clear the select value, also the onChange send a null as the value not sure if it's a bug, if not, How can i disable this behavior?

    issue/bug-unconfirmed awaiting-author-response 
    opened by yoni-salt 1
  • Typescript error: 'jsx' is declared but its value is never read.  TS6133

    Typescript error: 'jsx' is declared but its value is never read. TS6133

    Hi.

    React-select 5 is triggering this typescript error for me:

    TypeScript error in /Users/{...}/node_modules/react-select/src/components/containers.tsx(3,1):
    'jsx' is declared but its value is never read.  TS6133
    
        1 | /** @jsx jsx */
        2 | import { ReactNode } from 'react';
      > 3 | import { jsx } from '@emotion/react';
          | ^
        4 | import {
        5 |   CommonPropsAndClassName,
        6 |   CSSObjectWithLabel,
    
    

    I believe you just have to clean up / lint the code, as it is complaining that there is an unused var.

    issue/bug-unconfirmed awaiting-author-response 
    opened by NunoCardoso 2
  • Letters is not showing at all in Safari on iOS when using react-select 5.1.0

    Letters is not showing at all in Safari on iOS when using react-select 5.1.0

    Letters it not showing at all in Safari on iOS when using react-select 5.1.0. The written text "AA" doesn't show at all in the attached image. I'm using an iPhone 12 Pro Max with iOS 14.3. No other CSS where imported when creating the screenshot. It works correctly on desktop in macOS.

    missing-letters issue/bug-confirmed 
    opened by patrikhultgren 6
  • React-Select v5 Bug of 2 elements in SingleValue

    React-Select v5 Bug of 2 elements in SingleValue

    Hello,

    This is to report a specific bug only exists in v5. Same code shows differently between these two versions. No matter I do in terms of CSS, I cannot fix it. I currently reverted back to v4.3.1 so don't have as much concern but unless this bug is fixed, React-Select will be a package that I and many other experiencing same bug cannot upgrade. v5 v4 3 1

    SingleValue = (props) => {
       return (
         <>
           <IconButton
             onClick={this.favoritePressed}
           >
             <FavoriteFilled />
           </IconButton>
           <input
             type="text"
           />
         </>
       );
     };
    

    In a nutshell, I have icon for favoriting items listed in input list so user can favorite them. No matter what I do, second item go below first item. I wrap them with DIV and gave whole bunch of CSS properties still no help.

    awaiting-author-response 
    opened by BarishSarac 1
  • Accessibility issue with combobox

    Accessibility issue with combobox

    Getting below accessibility issue while using combo box component.

    Issue: The 'id' "react-select-5-listbox, react-select-5-listbox" specified for the ARIA property 'aria-controls, aria-owns' value is not valid

    Above issue can be replicated with react-select samples https://codesandbox.io/s/codesandboxer-example-forked-vcdjt

    opened by sanjaykc 0
  • Axe is reporting 'Elements must have sufficient color contrast' for input

    Axe is reporting 'Elements must have sufficient color contrast' for input

    Axe is reporting Elements must have sufficient color contrast with comment: Element's background color could not be determined because it is overlapped by another element.

    This is because <input> element is covered by placeholder element thus not letting axe to calculate contrast. This can block axe from catching violations like a too low contrast.

    Steps to reproduce:

    • Enter page: https://798fh.csb.app/
    • Run axe check

    Workaround:

    Use custom CSS that will render input in front of absolutely positioned placeholder:

    div.placeholder {
      & + div {
        position: relative;
    
        input {
            cursor: pointer;
        }
      }
    }
    
    opened by Kretajak 0
  • [email protected](Oct 5, 2021)

    Minor Changes

    Patch Changes

    • fdd01e66 #4833 Thanks @ebonow! - Value container display property should be grid when isMulti and has no value so the Placeholder component is positioned correctly with the Input

    • 0937604f #4823 Thanks @mikunpham! - Fix the issue where input contents are moved to the left due to multiple space characters.

    • ec80b577 #4803 Thanks @Methuselah96! - Import CSSObject from @emotion/react instead of @emotion/serialize

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 23, 2021)

    Upgrade Guide

    Summary

    • Convert to TypeScript (#4489) - TypeScript types now come packaged with react-select so you no longer need to have @types/react-select installed; we no longer include Flow types
    • Drop IE11 support (#4625, #4720, #4634) - this allows us to make changes to our CSS that we've wanted to make for a long time as well as remove unnecessary JS solutions (those changes are noted below)
    • Use forwardRef for all wrapped components (#4489) - this means that if you were accessing anything on the Select instance using a ref, the ref will now reference the internal Select directly (see below for how to upgrade)
    • Replace HOCs with hooks (#4489) - if you were using our HOCs to create custom Selects (i.e., makeCreatableSelect, mangeState, makeAsyncSelect) these have now been replaced by hooks (i.e., useCreatable, useStateManager, useAsync)
    • Remove dependency on AutosizeInput (#4625) - our new solution uses CSS grid which IE11 does not fully support; also .prefix__input now targets the input and NOT the container
    • Improve screen reader experience (#4676) - this isn't a breaking change in the API but it does change the screen reader announcements
    • Use CSS grid for single value layout (#4720) - this also isn't a breaking change in the API but is it a change in the styles since it switches to using CSS grid (not fully supported by IE11) for single-value Selects
    • Remove readonly attribute on our DummyInput (#4634) - this results in better accessibility but uses caret-color which is not available on IE11

    Details

    Convert to TypeScript

    We've rewritten react-select in TypeScript which means you can remove any dependencies on @types/react-select. If you were using the Flow types than look into contributing types for v5 to flow-typed.

    Here are the most notable changes when replacing @types/react-select with our packaged types:

    | @types/react-select | react-select | Notes | |--|--|--| | OptinTypeBase | no replacement | Options can be any type (if using getOptionValue and getOptionLabel) so there's no longer a base type for options | OptionsType | Options | | | GroupTypeBase | GroupBase | | | GroupedOptionsType | no replacement | This is equivalent to ReadonlyArray<Group> | | ValueType | OnChangeValue | | | InputActionTypes | InputAction | | | NamedProps | Props | | | Select (the ref type) | SelectInstance | See "Use forwardRef for all wrapped components" for more details | | AsyncSelect (the ref type) | SelectInstance | See "Use forwardRef for all wrapped components" for more details | | CreatableSelect (the ref type) | SelectInstance | See "Use forwardRef for all wrapped components" for more details | | AsyncCreatableSelect (the ref type) | SelectInstance | See "Use forwardRef for all wrapped components" for more details |

    If you were previously importing a type from the src directory when using @types/react-select:

    import { ... } from 'react-select/src/...';
    

    These should now be imported from the dist/declarations/src directory:

    import { ... } from 'react-select/dist/declarations/src/...';
    

    We export any types from the main entry point that we think might be useful to the user. If you are using a type that is not exported from the main entry point please open a PR or issue so that we can add it.

    Drop IE11 support

    This allows us to use modern CSS in order to improve the quality of react-select and remove excessive JavaScript code to work around not having the ability to use modern CSS. If you need IE11 support either:

    1. Stay on v4.
    2. Attempt to use our Styles API and/or Components API to override styles and/or components that don't support IE11. The only change that might be hard to override is "Remove readonly attribute on our DummyInput" since you can't override the DummyInput component with the Styles or Components API.
    3. If there are simple changes that make react-select compatible with IE11, open a PR. We are unlikely to provide official support for IE11 since supporting IE11 makes maintaining react-select a lot more difficult and holds us back from changes we want to make, but we also are glad to accept simple changes if they make your life easier.

    Use forwardRef for all wrapped components

    NOTE: Accessing any of the internals of the Select component using refs is not part of our public API. The internals of the Select component can change at any time (including in minor and patch releases). The only methods on the Select component that are part of the public API are the focus() and blur() methods.

    react-select exports five components: BaseSelect, CreatableSelect, Select (the default export), AsyncSelect, AsyncCreatableSelect. The last four components are wrappers around the BaseSelect. Previously the ref for each of these components was pointing to itself, but now we use forwardRef which means that the refs for all five components now point to BaseSelect.

    The focus() and blur() methods are untouched by this change. However if you were accessing the internals of the BaseSelect component, you will need to update how you were accessing the BaseSelect. Here is how to update access to the BaseSelect component:

    | Component | v4 | v5 | |--|--|--| | BaseSelect | ref | ref | | CreatableSelect | ref.select.select | ref | | Select | ref.select | ref | | AsyncSelect | ref.select.select | ref | | AsyncCreatableSelect | ref.select.select.select | ref |

    Replace HOCs with hooks

    The primary reason for this change is that hooks combined with generic components are easier to type in TypeScript than HOCs combined with generic components. These HOCs/hooks are considered advanced usage.

    If you were using the HOCs, it shouldn't be too hard to replace them with its corresponding hook (i.e., useStateManager, useCreatable, or useAsync). As an example, here is how the state managed Select (the default export) used to be constructed with the mangeState HOC:

    const Select = manageState(SelectBase);
    

    With hooks it is now constructed like this:

    const Select = (props) => {
      const baseSelectProps = useStateManager(props);
      return <SelectBase {...baseSelectProps} />;
    }
    

    Consult the source code for how the other components are constructed.

    Remove dependency on AutosizeInput

    This is an exciting change because we get to drop our dependency on react-input-autosize. We now use a pure CSS solution to auto-size the input, however this means that we have to drop support for IE11 since IE11 does not fully support CSS grid. As part of this refactor the .prefix__input CSS class now targets the input itself and NOT the container. See #4625 for more details.

    Improve screen reader experience

    The following improvements have been made for screen reader users:

    • NVDA now announces the context text when initially focused
    • Selected option(s) (single and multi) are now announced when initially focused
    • VoiceOver now announces the context text when re-focusing
    • The clear action is now announced
    • Placeholder text is now announced
    • Mobile VoiceOver is now able to remove selected multi options

    Also we've added the role of combobox and the required ARIA attributes to the Input and DummyInput components to allow JAWS support and a better screen reader experience overall. See #4695 for more details.

    Use CSS grid for single value layout

    Previously the absolution positioning of both the value and the placeholder pulled them out of the flow, and thus the component itself collapsed down when used as a flex child. To solve this we are now using CSS grid for the single value layout.

    before-after

    Remove readonly attribute on our DummyInput

    Previously we added the readonly attribute to the DummyInput (when isSearchable is set to false) in order to hide the flashing cursor and prevent devices from showing a virtual keyboard. However the readonly attribute causes the DummyInput to be removed from the tab order in iOS Safari. In order to solve this we're replacing the readonly attribute with setting the caret-color CSS prop (which IE11 does not support) to transparent and setting the inputMode attribute on the <input> to none.

    Changelog

    Major Changes

    • ef87c3ac #4683 Thanks @Methuselah96! - React-Select has been converted from Flow to TypeScript.

      Other changes for v5 include usage of forwardRef, new hooks for stateManager, async and creatable components, and more reliable filtering implementaion with new options in the creatable variant.

    Patch Changes

    • 10225290 #4720 - Updated the layout for the singleValue input/placeholder/container so that it works better when used in flex layouts.

    • 53f1972b #4731 Thanks @JedWatson! - MultiValue key now includes a hyphen between the value and the index to prevent edge cases where you could get a duplicate key error

    • b41f4ceb #4704 Thanks @Rall3n! - Fix findDOMNode deprecation by adding refs to transition components

    • 4b028829 #4634 - The readonly attribute has been removed from the DummyInput to improve accessibility

    • 7fcec537 #4697 - Add the role of combobox and the required ARIA attributes to the Input and DummyInput components to allow JAWS support and a better screen reader experience overall.

    • ca2c0e5b #4756 Thanks @fdcds! - Add option field to type of CreateOptionActionMeta

    • 9e82aadc #4676 - The following improvements have been made for screen reader users:

      • NVDA now announces the context text when initially focused
      • Selected option/s (single and multi) are now announced when initially focused
      • VoiceOver now announces the context text when re-focusing
      • The clear action is now announced
      • Placeholder text is now announced
      • Mobile VoiceOver is now able to remove selected multi options
    • 638f5455 #4702 Thanks @Methuselah96! - The Option generic is no longer required to extend the OptionBase type

    • 23cea0b5 #4782 Thanks @Methuselah96! - Fix type of loadingMessage prop to allow it to return any ReactNode

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Sep 3, 2021)

    Patch Changes

    • 10225290 #4720 - Updated the layout for the singleValue input/placeholder/container so that it works better when used in flex layouts.

    • 53f1972b #4731 Thanks @JedWatson! - MultiValue key now includes a hyphen between the value and the index to prevent edge cases where you could get a duplicate key error

    • b41f4ceb #4704 Thanks @Rall3n! - Fix findDOMNode deprecation by adding refs to transition components

    • 7fcec537 #4697 - Add the role of combobox and the required ARIA attributes to the Input and DummyInput components to allow JAWS support and a better screen reader experience overall.

    • 9e82aadc #4676 - The following improvements have been made for screen reader users:

      • NVDA now announces the context text when initially focused
      • Selected option/s (single and multi) are now announced when initially focused
      • VoiceOver now announces the context text when re-focusing
      • The clear action is now announced
      • Placeholder text is now announced
      • Mobile VoiceOver is now able to remove selected multi options
    • 638f5455 #4702 Thanks @Methuselah96! - The Option generic is no longer required to extend the OptionBase type

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jul 9, 2021)

    Major Changes

    • ef87c3ac #4489 Thanks @Methuselah96! - React-Select has been converted from Flow to TypeScript.

      Other changes for v5 include usage of forwardRef, new hooks for stateManager, async and creatable components, and more reliable filtering implementaion with new options in the creatable variant.

    • #4625 Thanks @ebonow! - Remove dependency on AutoSizeInput

      • BREAKING CHANGES:
        • IE11 no longer works as it does not fully support CSS grid
        • Renaming the .prefix__input now targets the input and NOT the container. Unfortunate but overdue and perhaps opens the door to completely decoupling the input from needing a container if autosizing is not important.

    Patch Changes

    • 4b028829 #4634 - The readonly attribute has been removed from the DummyInput to improve accessibility

    Source code(tar.gz)
    Source code(zip)
  • [email protected](May 13, 2021)

  • [email protected](Mar 19, 2021)

    Minor Changes

    • 035294f4 #3360 Thanks @sunniejai!
      • focusedOption is now passed to the MenuList Component as a prop

    Patch Changes

    • 7a414a7c #3262 Thanks @torkelo!
      • The Menu bottom is no longer scrolled into view when menuShouldScrollIntoView=false

    Documentation Updates

    • #4109 Thanks @manvydasu
      • Replaced componentWillReceiveProps with componentDidUpdate in docs
    Source code(tar.gz)
    Source code(zip)
  • [email protected](Mar 5, 2021)

  • [email protected](Mar 5, 2021)

    Minor Changes

    • 2ffed9c6 #4444 Thanks @Rall3n! - Use accessor props to get value and label in compareOption

    • 2baf5a9d #4414 Thanks @ebonow! - Add ariaLiveMessages prop for internationalization and other customizations, add aria-live prop, and other accessibility fixes. Inspired heavily from the work done by @Kashkovsky, @radegran, @Malgalad, and @TheHollidayInn - thanks to them, @bozdoz for the thorough testing and recommendations, and for everyone who contributed constructive feedback towards a better accessibility experience.

    • 7cdb8a6b #4391 Thanks @ebonow! - Pass and sanitize CommonProps passed to Group and Input components

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Feb 7, 2021)

    Minor Changes

    • b5f9b0c5 #4342 Thanks @Methuselah96! - Standardized innerProps and className props on customizable components

    • 19b76342 #3911 Thanks @eugenet8k! - Add removedValues to onChange event meta when the action is clear (when the user clears the value in the Select)

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jan 22, 2021)

  • [email protected](Jan 22, 2021)

  • [email protected](Jan 22, 2021)

    Upgrade Guide

    Summary

    • Standardize value passed to onChange (https://github.com/JedWatson/react-select/pull/4339) - the onChange handler is now always passed an array of options if isMulti is set to true
    • Emotion 11 (https://github.com/JedWatson/react-select/pull/4283) - should only affect you if you're using the NonceProvider component
    • Remove usage of UNSAFE React methods (https://github.com/JedWatson/react-select/pull/4313) - shouldn't affect you except now you won't see those warning messages in the console anymore

    Details

    Standardize value passed to onChange

    This change makes it so that the first parameter passed to the onChange callback will now always be an array of options if isMulti is set to true and will always be a single option or null if isMulti is set to false. Previously the first parameter of onChange could be an array or null when isMulti was set to true.

    That means if you were previously using nullish coalescing in order to handle null for isMulti:

    <Select
      isMulti
      onChange={(newValues) =>  setValues(newValues ?? [])}
    />
    

    You can now remove the nullish coalescing because onChange will always be an array when isMulti is set to true:

    <Select
      isMulti
      onChange={(newValues) =>  setValues(newValues)}
    />
    

    Emotion 11

    The NonceProvider component now requires a cacheKey prop that corresponds to the newly required key prop for the Emotion cache. This won't affect you if you aren't using NonceProvider. See #4283 for more details.

    Remove usage of UNSAFE React methods

    This isn't necessarily a breaking change, but it required a large refactor in order to accomplish so we released this in a major upgrade in case it has some unintended consequences.

    Changelog

    Major Changes

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Jan 13, 2021)

    Minor Changes

    • c615e93d #4084 Thanks @JedWatson! - Changed the cx and getValue props that are passed to components into instance properties, which means they now pass a referential equality check on subsequent renders.

      This is helpful, for example, when you're optimising the performance of rendering custom Option components - see #3055

    • 72f6036f #4306 Thanks @bladey! - Remove duplicate prop createOptionPosition

    Patch Changes

    • ee638d46 #4275 Thanks @Methuselah96! - Adds react ^17.0.0 to peer dependencies for React 17 support

    • a0133f19 #4154 Thanks @brenshanny! - Creatable: Fixed removing MultiValues that have identical values. See issue #4137 for details.

    • d1e660c6 #4213 Thanks @eythort! - Added a guard to the ScrollCaptor component to check that el exists before calling removeEventListener, fixes intermittent errors

    • a1e1db25 #4373 Thanks @Methuselah96! - Fixed value passed to onChange when clearing value

    • 2ad29d61 #4136 Thanks @Methuselah96! - Base aria-live message on tabSelectsValue prop

    • ad890f27 #4326 Thanks @Methuselah96! - Updated react-input-autosize to v3.0.0

    • b28d9922 #3990 Thanks @nikitaindik! - Fixed onCreateOption is not always called for Creatable

    • 24ba8702 #4289 Thanks @slimklim! - Added innerProps prop to the built-in MenuList component to reduce the need for additional DOM nodes or forking internal code when passing additional props to the DOM element the MenuList component is rendering.

      See issue #4265 for an explanation.

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Nov 23, 2020)

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Mar 22, 2020)

    Minor Changes

    Patch Changes

    Source code(tar.gz)
    Source code(zip)
  • [email protected](Oct 2, 2019)

    Patch Changes

    • a575a3c4 #3727 Thanks @tonytangau! - Adding an index prop to MultiValue components
    • 916f0d2c #3644 Thanks @TrySound! - Remove usage of raf package and replace with window.requestAnimationFrame because React already depends on requestAnimationFrame
    • cba15309 #3676 Thanks @wiesys! - Fix loadingMessage and noOptionsMessage properties in Styles flow type
    • 32f9475e #3790 Thanks @JedWatson! - Remove unnecessary dependency on classnames package
    • 1731175d #3733 Thanks @ddc67cd! - Pass name to onChange meta in Creatable to make it consistent with onChange in standard Select
    Source code(tar.gz)
    Source code(zip)
  • [email protected](May 27, 2019)

    The core motivation behind 3.0.0 is to set us up to leverage new tools to make react-select better. As such we've made the following changes:

    Breaking Changes

    • Upgrade from Emotion 9 to Emotion 10
    • UMD builds deprecated
    • Multiple Entrypoints
    • React 16.8 required as peer dependencies
    • Normalized Values #3416

    What this means for you

    Emotion 10

    Moving to the latest major version of emotion affords us zero-config SSR and enabling easier CSP support. Unfortunately this will be a breaking change for consumers who are currently leveraging emotion to build custom components for react-select. For example, you'd previously create an custom Option component with emotion like so:

    import { css } from 'emotion'
    
    const customOption = ({ cx, className, getStyles, _ }) => 
      <div 
         classNames={cx(
           css(getStyles('option', props)), 
           {
             'option': true,
             'option--is-disabled': isDisabled,
             'option--is-focused': isFocused,
             'option--is-selected': isSelected,
            },
            className
         )}
         {...}
      >
    

    With react-select 3.0.0, and emotion 10 it would be the following:

    /** @jsx jsx */
    import { jsx } from '@emotion/core';
    
    const customOption = ({ cx, className, getStyles, _ }) => 
      <div 
        css={getStyles('option', props)}
        classNames={cx(
         {
           'option': true,
           'option--is-disabled': isDisabled,
           'option--is-focused': isFocused,
           'option--is-selected': isSelected,
          },
          className
        )} 
        {...}
      >
    

    Multiple Entrypoints:

    v3.0.0 separates removes the following components from the main entry point, and instead exports them as separate entrypoints:

    • Async (now exported from react-select/async)
    • Creatable (now exported from react-select/creatable)
    • Async Creatable (now exported from react-select/async-creatable)
    • makeAnimated and default animated components (now exported from react-select/animated)

    Where you’d previously import them as such

    	import { Async } from 'react-select'  
    

    Or as:

    	import Async from 'react-select/lib/Async'
    

    Now imports look like this:

    	import AsyncSelect from 'react-select/async'
    

    This should have no bundle-size impact on react-select consumers currently leveraging tree-shaking. However for consumers who aren’t leveraging tree-shaking, this should help alleviate some of the bundle-weight.

    UMD Builds

    UMD builds have been removed as of react-select v3.

    Peer dependency on React 16.8

    We've decided on requiring 16.8 as a peer dependency for react-select 3.0.0. This is motivated by our commitment to leveraging the improvements in recent versions of React such as hooks to make react-select even better.

    Normalized Values

    At the moment, if no value is specified by the consumer, it's instantiated as a null value, regardless of whether the select isMulti or not.

    When isMulti is false this is fine. On selection of an option, the value becomes an object, and on clearing of said value, it returns to being null. (null --> {} --> null)

    However when isMulti is true, this becomes more inconsistent. On selection of options, the value becomes an array of options, removing values extricates them from this array, removing the last selected value results in an empty array, instead of the initial base state of null. (null --> [{}] --> [])

    We rectify this in 3.0.0, on removal of all selected values in an isMulti Select, the value passed to onChange is null and not []. normalize-value

    • Remove base entrypoint to fix rollup dependency resolution issue in 3.0.3
    • See #3585 for a detailed list of changes in 3.0.0
    Source code(tar.gz)
    Source code(zip)
  • v2.4.1(Mar 11, 2019)

  • v2.4.2(Mar 11, 2019)

    Bug fixes

    • #3446 Fix bug with select input value not being selectable. Thanks @kangweichan
    • #3445 Fix accessibility bug. Disabled options are now focusable and announced by screen-readers but not selectable. Thanks @sarahbethfederman

    Updates

    • Fixed typo in style docs. Thanks thiagodebastos.
    • #3460 Added description for actionTypes to docs. Thanks @mikekellyio
    Source code(tar.gz)
    Source code(zip)
  • v2.4.0(Feb 15, 2019)

    Bug fixes

    • #3427 remove focusOption() invocation on ENTER press if the menu is not open.
    • #3402 fix menu scroll being reset on focus of a select with an open menu in ie11. See #3342 for details. Thanks timothypage
    • #3420 fixed select menu being opened on click, when openMenuOnClick is false. Thanks caleb and rscotten
    • #3419 fixed bug with ScrollCaptor operating on an undefined scrollTarget. Thanks iulian-radu-at
    • #3411 fix bug where Enter key press on select with a closed menu wouldn't propagate up. Resolves #2217.
    • #3407 remove unnecessary aria-roles from menu and options. This is now all handled by our aria-live implementation. Resolves #3355. Thanks sarahbethfederman.
    • #3393, fix aria live announcement text for removing a selected option. Thanks msharkeyiii.
    • #3350 Updated to 0.91 of flow. Updated types to pass stricter type checking, in later versions of flow. Thanks DragonWW

    Updates

    • #3370 Updated memoize-one dependency to 5.0.0. Thanks adam187
    • #3366 Update build tooling, to leverage babel 7. Thanks DragonWW
    Source code(tar.gz)
    Source code(zip)
  • v2.3.0(Jan 18, 2019)

    Bug fixes

    • #3315 add RAF call to Collapse component getRef() such that getBoundingClientRect() is invoked consistently.
    • #3275 wrap String invocation around inputValue to avoid calling toLowerCase on invalid elements. thanks tavareshenrique
    • #3357, fix loadOptions call in Async select to always pass in a string for the inputValue.
    • #3346 Revert work done in CSP nonce PR #3260 to unblock react-select usage in an SSR setting. Users who need nonce support still, please pin your version of react-select at 2.2.0. Nonce support will be re-added in 3.0.0 along with an upgrade to emotion 10; which includes nonce support without having to provide a custom emotion instance.

    Features

    • #3115 menu-is-open modifier added to control class when the menu is open. @s20lee
    Source code(tar.gz)
    Source code(zip)
  • v2.2.0(Dec 28, 2018)

    Bug Fixes

    • #3296 Fix for tab interactions when in composition mode with an IME. Thanks yshr446 for the PR.
    • #3302 Fix to breaking android and mobile safari touch bug #2755, by adding more conscientious checks to the onTouchStart and onTouchMove listeners. Thanks xakep139 for the PR.
    • #3303 Input and GroupHeading components now get passed the selectProps prop, thanks maxmarchuk for the PR.
    • #3260 As a result of the CSP nonce support feature, the emotion instance is now cached and passed down to all internal components, meaning that users looking to heavily customise their Select components can do so without externally importing emotion, and nonce instances are respected per select instance. Please see this segment in the docs for a more detailed explanation.
    • #3299 fix to assistive text on menu open.

    Features

    • #3260 Add CSP nonce support to Select, thanks Avaq and Andarist for the heavy lifting.
    Source code(tar.gz)
    Source code(zip)
  • v2.1.1(Oct 24, 2018)

    Bug fixes

    • [#3132] Strip theme props from default Input and GroupHeading components, as they were polluting the DOM.
    • [#3131] Add support for the 'Delete' key in the internal onKeyDown method. Same functionality as 'Backspace'.
    • [#3100] Update flow-types and normalised default prop declarations in indicators. Thanks iseredov

    Updates

    • [#3083] Added sideEffects property to package.json to support tree-shaking in webpack 4.x. Thanks SimenB.
    • [#3078] Update jest dependency to 23.6.0. Thanks papandreou
    • [#3065] Update babel-plugin-emotion to 9.2.10. Thanks mtzhang
    • [#3108] Update docs to include instructions for replicating the simple-value use case within react-select v2. Thanks elboletaire
    Source code(tar.gz)
    Source code(zip)
  • 2.1.0(Oct 17, 2018)

    • [#2839] Added support for theming via theme prop. Thanks akx
    • [#2874] Fixed flow-types of MultiValue components. Thanks mike1808
    • [#2903] Fix missing form input when there isn't a selected value. Thanks alvinsj
    • [#2934] Reduced theme colors to a sane value set to make the exported theme more easy to consume and configure. Thanks jossmac
    • [#2876] Added overflow hidden to valueContainer to stop overflowing text in the control. Thanks mike1808
    • [#2975] Separated menu placement logic from menu primitive. Thanks jossmac.
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0(Sep 21, 2018)

    v2.0.0 / 2018-07-23

    • async select now accepts a filterOptions function as a prop #2822
    • [BREAKING] react-select now exports react-select.esm.js from dist instead of react-select.es.js #2641
    • [BREAKING] innerRef assignments in custom components must now be made from the root of the prop object, as opposed to reaching into innerProps. This is part of the work to normalize the behaviour circa custom components. #2824
    • className and classNamePrefix deprecation warning and backward compatibility removed. className now only affects the select container, classNamePrefix prefixes all internal components. #2820
    • Added closeMenuOnScroll prop, which can either be a boolean or a function, if set to true the select menu will close on scroll of the document/body. If a function is supplied, it must take the following shape (event: ScrollEvent) => boolean, the boolean value will be used to resolve whether the menu should be closed or stay open. #2809, thanks Vynlar for this.
    • Added fix to support IME inputs. #2767, thanks shamabe
    • Removed primitives, and normalise multi-value components to be in line with existing component customisation patterns. #2821
    • Normalised isOptionDisabled to be inline with its sibling prop isOptionSelected. #2821 Thanks SimeonC
    • #2814 Added memoization to custom components within Select.js as well as in the exported makeAnimated factory method. Thanks to Alex Reardon's memoize-one
    • #2652, Async Select now re-evaluates defaultOptions on componentWillReceiveProps. Thanks jesstelford
    Source code(tar.gz)
    Source code(zip)
  • v2.0.0-beta.7(Jul 5, 2018)

    Features

    • Removed old aria-attributes in Option, MenuList and other components in favor of an aria-live-region implementation. screenReaderStatus prop is still at the moment untouched, and aria-labelledby and aria-label props are still available and retain their functionality. See #2581.
    • Added makeAnimated function export, that takes passed in components and wraps them in higher order components that expose animated functionality. #2724
    • Added functionality to not render the menu if noOptionsMessage or loadingMessage are set to null. #2754

    Fixes

    • Fixed bug with MultiValueRemove interaction not working in mobile #2762, thanks chuckbergeron.
    • Fixed bug with mobile menu being blocked when menuShouldBlockScroll is true. #2756
    • Fixed #2701, use of un-polyfilled array.includes() in Select.js, this has now been subbed out for a IE compatible implementation.
    • #2723, fixed emotion compilation bug blocking loadingDot rendering.
    • #2749 fixed typo in docs. thanks JuhQ

    Updates

    • Enabled hideSelectedOptions functionality for single-select as well. Changed logic so that if isMulti is true and hideSelectedOptions is not defined, we will hide selected options by default. Explicitly setting hideSelectedOptions will override this behaviour. https://github.com/JedWatson/react-select/pull/2753
    • Updates to flow types, thanks mike1808, himerus,
    • #2733, fixed classname bug to do with prefixing classes with modifiers. [teamable-software](https://github.com/teamable-software
    • Bumped internal flow-bin dependency to 0.72.0, #2646 thanks lunij
    Source code(tar.gz)
    Source code(zip)
🌐 An extremely usable and dynamic React timezone selector

?? An extremely usable and dynamic React timezone selector

Nico Domino 48 Oct 13, 2021
The Select Component for React.js

React-Select The Select control for React. Initially built for use in KeystoneJS. See react-select.com for live demos and comprehensive docs. React Se

Jed Watson 23.5k Oct 14, 2021
Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all

Lightweight (~5KB gzipped) multiple selection dropdown component

Harsh Zalavadiya 188 Oct 12, 2021
Lightweight (~5KB gzipped) multiple selection dropdown component

react-multi-select-component Simple and lightweight multiple selection dropdown component with checkboxes, search and select-all ✨ Features ?? Zero De

Harsh OSS 188 Oct 12, 2021
React hooks for building select and combobox components

React hooks for building select and combobox components

null 1 Sep 30, 2021
React component to select options by transferring them from one column to another.

React component to select options by transferring them from one column to another.

George 6 Oct 13, 2021
Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Selecto.js is a component that allows you to select elements in the drag area using the mouse or touch.

Daybrush (Younkue Choi) 937 Oct 15, 2021
An accessible select box component for React.

React Select Box An accessible select box component for React. Demo http://instructure-react.github.io/react-select-box/ Installation $ npm install re

null 189 Jun 15, 2021
React-based list with selectable and navigable items

react-list-select A list with selectable and keyboard navigable items. Useful as a dropdown (autocomplete), right click menu, or a simple list with ac

Hawken Rives 33 Jul 18, 2021
A react component to select multiple items from a list of options using the Material-UI Autocomplete component.

A react component to select multiple items from a list of options using the Material-UI Autocomplete component.

Rowy 11 Jun 29, 2021
A React multi-select component using Material-UI

A component to select multiple items from a list of options using the Material-UI Autocomplete component.

Antler 11 Jun 29, 2021
A fully accessible, easily themeable, React-powered menu button

react-aria-menubutton A React component (set of components, really) that will help you build accessible menu buttons by providing keyboard interaction

David Clark 420 Oct 15, 2021
Autocomplete input field for React

react-autocomplete-input Autocomplete input field for React Demo Demo and playground are available here Usage Example import TextInput from 'react-aut

Yury Dymov 117 Sep 20, 2021
@mention people in a textarea

React Mentions A React component that let's you mention people in a textarea like you are used to on Facebook or Twitter. Used in production at Signav

Signavio GmbH 1.5k Oct 12, 2021
A pretty cool country selector using TailwindCSS and Framer Motion

A pretty cool country selector using TailwindCSS and Framer Motion

Dries Augustyns 11 Sep 19, 2021