[email protected]

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

[email protected]

Patch Changes

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

[email protected]

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

[email protected]

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

• f600d13f #4422 Thanks @Methuselah96! - Fix finding focusable options for groups

• a016c878 #4420 Thanks @Methuselah96! - Bump dependency on @babel/runtime in order to fix compatibility issues with Webpack 5

• 10b5f5a5 #4404 Thanks @Methuselah96! - Remove unnecessary dependency on @emotion/css

[email protected]

Patch Changes

• 44f285b0 #4399 Thanks @Methuselah96! - Fixed building focusable options from groups

[email protected]

Patch Changes

• 645feb3e #4396 Thanks @Methuselah96! - Fixed keys for options within groups

[email protected]

Upgrade Guide

Summary

• Standardize value passed to onChange (#4339) - the onChange handler is now always passed an array of options if isMulti is set to true
• Emotion 11 (#4283) - should only affect you if you're using the NonceProvider component
• Remove usage of UNSAFE React methods (#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

• 02050675 #4339 Thanks @Methuselah96! - Standardized value passed to onChange

• 26b6325c #4283 Thanks @majgaard! - Upgrades Emotion dependency to v11.0.0

  BREAKING CHANGE: The NonceProvider component now requires a cacheKey prop that corresponds to the key for the Emotion cache.

• b2488bb5 #4313 Thanks @Methuselah96! - Removed usages of UNSAFE React methods

Patch Changes

• 2d5496d5 #4388 Thanks @Methuselah96! - Removed memoization of buildMenuOptions

[email protected]

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.

[email protected]

Patch Changes

• c8d74bd5 #3979 Thanks @mitchellhamilton! - Fix repository field

• c8447f48 #4034 Thanks @sophiebits! - Improve performance of option filtering when ignoreAccents is enabled (the default)

• 7af1aafb #4295 Thanks @JedWatson! - Fix menuplacement context

• 32ad5c04 #3892 Thanks @flexdinesh! - Fix react-select ignoring HTML5 "form" attribute

• 6af14fbb #3897 Thanks @lorisdev! - Removes the call to onMenuOpen on every input change

  If you were relying on this undesired behavior it may be a breaking change.
  Please upgrade accordingly.

• 0eb1ef96 Thanks @JedWatson! - Fixes touch issues in IE11

• ad608c8f #3928 Thanks @dpordomingo! - Update MenuPlacer context usage in order to the new React Context API

[email protected]

Minor Changes

• 4cf6c43c #3690 Thanks @JedWatson! - Add isLoading prop support to the AsyncSelect component (see #3690)

Patch Changes

• 83b48de4 #3868 Thanks @Tirzono! - Fix for not focusing the selected value when the menu opens
• 563b046a #3794 Thanks @mitchellhamilton! - Convert class components that don't have to be class components to function components to reduce bundle size
• c7e9c697 #3682 Thanks @JedWatson! - Allow the input component to be a textarea element
• 3c7de0de #3090 Thanks @akiselev! - Add aria attributes to dummy input
• d2a820ef #3537 Thanks @jdelStrother! - Fix Flow issues. Refer to the linked PR for more details on the specific issues.
• fc52085b #3662 Thanks @eemeli! - Update react-transition-group to ^4.3.0
• edb18dd3 #3797 Thanks @mitchellhamilton! - Enable Babel loose mode to improve bundle size