react-select@5.2.1

Patch Changes

• f172d7f9 #4886 Thanks @Akridian! - Hooks for creation of custom Selects are now exported from main entry

react-select@5.2.0

Minor Changes

• 6c7a3d1e #4785 Thanks @Rall3n! - Add prevInputValue to action meta

• b522ac65 #4860 Thanks @ebonow! - Fix animated MultiValue transitions when being removed and change method used to generate unqiue keys for Option components. Closes #4844 , closes #4602

Patch Changes

• 417e7217 #4842 Thanks @Methuselah96! - Remove src directory from published package

• 480ea85b #4846 Thanks @Methuselah96! - Add missing index to MultiValue props type

• b8e34472 #4854 Thanks @mikunpham! - Make input container css re-compute whenever input value changes due to a bug from @emotion/react in development env.

react-select@5.1.0

Minor Changes

• 8b38d49b #4807 Thanks @hcharley! - Export AsyncCreatableProps from creatable entrypoint

• 46eeda1a #4801 Thanks @Methuselah96! - Export more types from main entry point

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

react-select@5.0.0

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.

If you are using custom props for the Select component you can use module augmentation to add them to the Select prop types:

declare module 'react-select/dist/declarations/src/Select' {
  export interface Props<
    Option,
    IsMulti extends boolean,
    Group extends GroupBase<Option>
  > {
    myCustomProp: string;
  }
}

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.

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 ...

react-select@5.0.0-beta.1

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

react-select@5.0.0-beta.0

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

---

react-select@4.3.1

Patch Changes

• 2c915d10 #4577 - Bump @emotion/cache to v11.4.0 which fixes an issue where different versions of Emotion running at the same time causes styles to disappear in production.

react-select@4.3.0

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

react-select@4.2.1

Patch Changes

• ca3c41bb #4478 Thanks @ebonow! - Check passive events polyfill for the existence of window for SSR

react-select@4.2.0

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

• c955415c #4437 Thanks @ebonow! - Set event listeners to be non-passive to remove Chrome console warnings

• 3ca22b2f #3827 Thanks @mitchellhamilton! - Memoize stripDiacritics in createFilter for the input with memoize-one so that stripDiacritics is not called for the same string as many times as there are options every time the input changes

  Inspired by https://blog.johnnyreilly.com/2019/04/react-select-with-less-typing-lag.html

• dce3863f #4423 Thanks @Methuselah96! - Remove browser alias fields in order to fix SSR apps

• ec7c0728 #4443 Thanks @ebonow! - Allow tabIndex prop Type to be number or string