Default selected items don't appear when using transitions if select is hidden

Steps to reproduce:

1. Create a component that initially hides its children using display: hidden
2. Put a React Select in this component, and make it a multi-select
3. Enable animations
4. Add some default selected items

Expected behaviour

The default selected items should appear inside the select box

Actual behaviour

The default selected items do not appear. In particular, they have a width of 0:

This is because the React transition has not correctly expanded their widths to their ordinary widths.

This behaviour is replicated in this sandbox. Click the button to expand the Expander.

[desbrowne]

If anyone needs a solution, this worked for our project. Basically, when Exit is called for a MultiValue, width is set directly on the ref div. The next state change sets the width to 0 and the CSS width transition does its magic. A small side benefit is that there is no measuring required at mount.

// Collapse.tsx

import * as React from 'react';
import { Transition } from 'react-transition-group';

const transition = `width 260ms ease-out`;
interface Props {
	children: any;
	in: boolean;
	onExited: () => void;
}
const Collapse: React.FC<Props> = ({ children, in: inProp, onExited }) => {
	const ref = React.useRef<HTMLDivElement>(null);
	const handleExit = React.useCallback(() => {
		if (ref.current) {
			const { width } = ref.current.getBoundingClientRect();
			ref.current.style.width = `${width}px`;
			ref.current.style.transition = transition;
		}
	}, []);
	return (
		<Transition
			enter={false}
			mountOnEnter
			unmountOnExit
			in={inProp}
			timeout={300}
			onExited={onExited}
			onExit={handleExit}
		>
			{state => (
				<div
					ref={ref}
					style={
						state === 'exiting' || state === 'exited'
							? {
									overflow: 'hidden',
									whiteSpace: 'nowrap',
									width: 0,
									transition,
							  }
							: undefined
					}
				>
					{children}
				</div>
			)}
		</Transition>
	);
};

export default Collapse;

// AnimatedMultiValue.tsx

import * as React from 'react';
import { MultiValueProps, OptionTypeBase, components } from 'react-select';

import Collapse from './Collapse';

interface Props extends MultiValueProps<OptionTypeBase> {
	in: boolean;
	onExited: () => void;
}
const AnimatedMultiValue: React.FC<Props> = ({ in: inProp, onExited, ...props }) => (
	<Collapse in={inProp} onExited={onExited}>
		<components.MultiValue {...props} cropWithEllipsis={inProp} />
	</Collapse>
);

export default AnimatedMultiValue;

// usage
const components = makeAnimated();
components.MultiValue = AnimatedMultiValue as React.FC<MultiValueProps<OptionTypeBase>>;
return (
	<Select 
		components={components} 
		value={value}
		options={options}
		onChange={handleChange}
	/>
);

[huw]

That does seem to work on the sandbox! I’ll have a look at whether that refactor will work with our code and get back 😃

EDIT: I’ve checked with our code, and visibility: hidden isn’t ideal, because it leaves that huge space around the element. Any ideas?