JedWatson / JedWatson/react-select
Control extends horizontally when lots of text is typed into the input
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Reproduce the horizontal expansion with the provided create-react-app example, especially the flex container and the Select styles. Inspect the Select control's layout and width handling; done means long input text no longer makes the control extend horizontally without requiring an absolute maxWidth.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Mostly clear
- Newbie friendliness
- 35/100