Control extends horizontally when lots of text is typed into the input

[peeveen]

Hi,
First of all, thanks for making this control.

I've been using it in my app, and it's working well apart from one thing that I can't seem to figure out.
If I type a lot of text into the input, it makes the control extend horizontally.
The only way I can figure out how to stop that happening is to apply an absolute maxWidth style to the control, but that's far from ideal.
Here's my test app (from a simple test made with create-react-app):

import Select from "react-select"
import "./App.css"
function App() {
	const options = [
		{ value: "chocolate", label: "Chocolate" },
		{ value: "strawberry", label: "Strawberry" },
		{ value: "vanilla", label: "Vanilla" },
	]

	return (
		<div
			style={{
				backgroundColor: "purple",
				padding: 50,
			}}
		>
			<div
				style={{
					backgroundColor: "default",
					padding: 10,
					flex: 1,
					display: "flex",
					flexWrap: "nowrap",
					flexDirection: "row",
				}}
			>
				<div
					style={{
						display: "flex",
						justifyContent: "center",
						alignItems: "center",
						flex: 0.2,
					}}
				>
					CHOOSE:
				</div>
				<div
					style={{
						display: "flex",
						flex: 0.8,
					}}
				>
					<Select
						options={options}
						styles={{
							container: (styles) => ({
								...styles,
								display: "flex",
								flex: 1,
							}),
							control: (styles) => ({
								...styles,
								//maxWidth: "500px",
								display: "flex",
								flex: 1,
							}),
						}}
					/>
				</div>
			</div>
		</div>
	)
}

export default App

[peeveen]

In case it helps, I figured out a hacky workaround by screwing around with the input style object:

input: (styles) => {
	const after = styles["&:after"] as any
	delete after["content"]
	styles["&:after"] = after
	return {
		...styles,
		display: "flex",
	}
},

[peeveen]

Here's a demo repo: https://github.com/peeveen/react-select-test