[Select] Misaligned dropdown
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Duplicates
- I have searched the existing issues
Latest version
- I have tested the latest version
Steps to reproduce 🕹
Link to live example:
https://mui.com/material-ui/react-select/#basic-select
https://codesandbox.io/s/bug-missaligned-slect-dropdown-ubflw6?file=/demo.tsx (only changed minWidth to width)
Tested in Firefox and Edge (Chromium)
Current behavior 😯
The dropdown position doesn't align with the select.
Expected behavior 🤔
The dropdown should be aligned with the input. In the example it is a shift of 8px to the left
Context 🔦
No response
Your environment 🌎
No response
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 basic Select example at mui.com/material-ui/react-select/#basic-select and the linked CodeSandbox demo.tsx, where minWidth was changed to width. Reproduce the dropdown position in Firefox and Edge, then verify that the dropdown aligns with the input rather than shifting 8px left.
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
- Clearly specified
- Newbie friendliness
- 38/100