JedWatson / JedWatson/react-select
Layout broken in Firefox when using long text
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 28k
- Forks
- 4.1k
- PR merge metrics
- No merged PRs in 30d
Description
When react select is used within a grid layout and options contain a long text then the layout of react select is broken in firefox.
Open this sandbox in firefox and chrome and see the difference:
https://soc5sr.csb.app/
https://codesandbox.io/s/codesandboxer-example-forked-soc5sr?file=/example.tsx
Possible solution is to apply this CSS to container element:
display: grid;
grid-template-columns: minmax(0, 1fr);
Read more about the reasons behind:
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
Start with the container element in packages/react-select/src/components/containers.tsx and reproduce the layout using the linked CodeSandbox in Firefox and Chrome. Check the proposed grid behavior against the long-text case; done means the react-select layout is consistent in both browsers without breaking the grid. Run the relevant project tests if available.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 2/5
- Estimated time
- 1-3 hours
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 45/100