Merge branch 'master' into documentation-improvements-21-10-24

Author: JedWatson

.changeset/silver-zebras-sing.md

@@ -0,0 +1,5 @@
+---
+'react-select': minor
+---
+
+Fix animated MultiValue transitions when being removed and change method used to generate unqiue keys for Option components. Closes #4844 , closes #4602

.changeset/sweet-ways-listen.md

@@ -0,0 +1,5 @@
+---
+'react-select': patch
+---
+
+Make input container css re-compute whenever input value changes due to a bug from `@emotion/react` in development env.

packages/react-select/src/Select.tsx

@@ -1648,6 +1648,7 @@ export default class Select<
     if (isMulti) {
       return selectValue.map((opt, index) => {
         const isOptionFocused = opt === focusedValue;
+        const key = `${this.getOptionLabel(opt)}-${this.getOptionValue(opt)}`;
 
         return (
           <MultiValue
@@ -1659,7 +1660,7 @@ export default class Select<
             }}
             isFocused={isOptionFocused}
             isDisabled={isDisabled}
-            key={`${this.getOptionValue(opt)}-${index}`}
+            key={key}
             index={index}
             removeProps={{
               onClick: () => this.removeValue(opt),

packages/react-select/src/animated/ValueContainer.tsx

@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react';
+import React, { useEffect, useState, ReactElement, ReactNode } from 'react';
 import { TransitionGroup } from 'react-transition-group';
 import { ValueContainerProps } from '../components/containers';
 import { GroupBase } from '../types';
@@ -11,12 +11,92 @@ export type ValueContainerComponent = <
   props: ValueContainerProps<Option, IsMulti, Group>
 ) => ReactElement;
 
+interface IsMultiValueContainerProps extends ValueContainerProps {
+  component: ValueContainerComponent;
+}
+
 // make ValueContainer a transition group
 const AnimatedValueContainer =
   (WrappedComponent: ValueContainerComponent) =>
   <Option, IsMulti extends boolean, Group extends GroupBase<Option>>(
     props: ValueContainerProps<Option, IsMulti, Group>
   ) =>
-    <TransitionGroup component={WrappedComponent} {...(props as any)} />;
+    props.isMulti ? (
+      <IsMultiValueContainer component={WrappedComponent} {...(props as any)} />
+    ) : (
+      <TransitionGroup component={WrappedComponent} {...(props as any)} />
+    );
+
+const IsMultiValueContainer = ({
+  component,
+  ...restProps
+}: IsMultiValueContainerProps) => {
+  const multiProps = useIsMultiValueContainer(restProps);
+
+  return <TransitionGroup component={component} {...(multiProps as any)} />;
+};
+
+const useIsMultiValueContainer = ({
+  children,
+  ...props
+}: ValueContainerProps) => {
+  const {
+    isMulti,
+    hasValue,
+    innerProps,
+    selectProps: { components, controlShouldRenderValue },
+  } = props;
+
+  const [cssDisplayFlex, setCssDisplayFlex] = useState(
+    isMulti && controlShouldRenderValue && hasValue
+  );
+  const [removingValue, setRemovingValue] = useState(false);
+
+  useEffect(() => {
+    if (hasValue && !cssDisplayFlex) {
+      setCssDisplayFlex(true);
+    }
+  }, [hasValue, cssDisplayFlex]);
+
+  useEffect(() => {
+    if (removingValue && !hasValue && cssDisplayFlex) {
+      setCssDisplayFlex(false);
+    }
+    setRemovingValue(false);
+  }, [removingValue, hasValue, cssDisplayFlex]);
+
+  const onExited = () => setRemovingValue(true);
+
+  const childMapper = (child: ReactNode) => {
+    if (isMulti && React.isValidElement(child)) {
+      // Add onExited callback to MultiValues
+      if (child.type === components.MultiValue) {
+        return React.cloneElement(child, { onExited });
+      }
+      // While container flexed, Input cursor is shown after Placeholder text,
+      // so remove Placeholder until display is set back to grid
+      if (child.type === components.Placeholder && cssDisplayFlex) {
+        return null;
+      }
+    }
+    return child;
+  };
+
+  const newInnerProps = {
+    ...innerProps,
+    style: {
+      ...innerProps?.style,
+      display: cssDisplayFlex ? 'flex' : 'grid',
+    },
+  };
+
+  const newProps = {
+    ...props,
+    innerProps: newInnerProps,
+    children: React.Children.toArray(children).map(childMapper),
+  };
+
+  return newProps;
+};
 
 export default AnimatedValueContainer;

packages/react-select/src/animated/transitions.tsx

@@ -127,7 +127,13 @@ export class Collapse extends Component<CollapseProps, CollapseState> {
   getTransition = (state: TransitionStatus) => this.transition[state];
 
   render() {
-    const { children, in: inProp } = this.props;
+    const { children, in: inProp, onExited } = this.props;
+    const exitedProp = () => {
+      if (this.nodeRef.current && onExited) {
+        onExited(this.nodeRef.current);
+      }
+    };
+
     const { width } = this.state;
 
     return (
@@ -136,6 +142,7 @@ export class Collapse extends Component<CollapseProps, CollapseState> {
         mountOnEnter
         unmountOnExit
         in={inProp}
+        onExited={exitedProp}
         timeout={this.duration}
         nodeRef={this.nodeRef}
       >

packages/react-select/src/components/Input.tsx

@@ -39,13 +39,17 @@ export const inputCSS = <
   Group extends GroupBase<Option>
 >({
   isDisabled,
+  value,
   theme: { spacing, colors },
 }: InputProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
   margin: spacing.baseUnit / 2,
   paddingBottom: spacing.baseUnit / 2,
   paddingTop: spacing.baseUnit / 2,
   visibility: isDisabled ? 'hidden' : 'visible',
   color: colors.neutral80,
+  // force css to recompute when value change due to @emotion bug.
+  // We can remove it whenever the bug is fixed.
+  transform: value ? 'translateZ(0)' : '',
   ...containerStyle,
 });
 

packages/react-select/src/components/containers.tsx

@@ -86,9 +86,10 @@ export const valueContainerCSS = <
   theme: { spacing },
   isMulti,
   hasValue,
+  selectProps: { controlShouldRenderValue },
 }: ValueContainerProps<Option, IsMulti, Group>): CSSObjectWithLabel => ({
   alignItems: 'center',
-  display: isMulti && hasValue ? 'flex' : 'grid',
+  display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',
   flex: 1,
   flexWrap: 'wrap',
   padding: `${spacing.baseUnit / 2}px ${spacing.baseUnit * 2}px`,

yarn.lock

@@ -10250,9 +10250,9 @@ mixin-deep@^1.2.0:
     is-extendable "^1.0.1"
 
 mixme@^0.5.0:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/mixme/-/mixme-0.5.1.tgz#b3da79a563b2da46efba9519830059e4c2a9e40f"
-  integrity sha512-NaeZIckeBFT7i0XBEpGyFcAE0/bLcQ9MHErTpnU3bLWVE5WZbxG5Y3fDsMxYGifTo5khDA42OquXCC2ngKJB+g==
+  version "0.5.4"
+  resolved "https://registry.yarnpkg.com/mixme/-/mixme-0.5.4.tgz#8cb3bd0cd32a513c161bf1ca99d143f0bcf2eff3"
+  integrity sha512-3KYa4m4Vlqx98GPdOHghxSdNtTvcP8E0kkaJ5Dlh+h2DRzF7zpuVVcA8B0QpKd11YJeP9QQ7ASkKzOeu195Wzw==
 
 mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.4, mkdirp@^0.5.5, mkdirp@~0.5.1:
   version "0.5.5"