Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Autocomplete list overlaps with input label #28395

Open
2 tasks done
raed667 opened this issue Sep 17, 2021 · 3 comments
Open
2 tasks done

Autocomplete list overlaps with input label #28395

raed667 opened this issue Sep 17, 2021 · 3 comments
Labels
bug 🐛 Something doesn't work waiting for 👍 Waiting for upvotes

Comments

@raed667
Copy link

raed667 commented Sep 17, 2021

  • The issue is present in the latest release.
  • I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When I open the autocomplete list and the layout is such that it opens to the top. The list partially overlaps with the input label.

image

Expected Behavior 🤔

The expected behavior is that the label isn't hidden when the autocomplete is open.

Steps to Reproduce 🕹

Steps:

  1. Go to official documentation page https://mui.com/components/autocomplete/
  2. Scroll in such a way that the autocomplete will open to the top
  3. Click on the autocomplete input.

Context 🔦

Your Environment 🌎

`npx @mui/envinfo`
  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
@raed667 raed667 added the status: waiting for maintainer These issues haven't been looked at yet by a maintainer label Sep 17, 2021
@siriwatknp siriwatknp added waiting for 👍 Waiting for upvotes and removed status: waiting for maintainer These issues haven't been looked at yet by a maintainer labels Sep 17, 2021
@siriwatknp
Copy link
Member

siriwatknp commented Sep 17, 2021

I suggest to add margin-bottom: 8px to the paper element, that should work and does not affect other cases.

Screen Shot 2564-09-17 at 13 40 05

diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.js b/packages/mui-material/src/Autocomplete/Autocomplete.js
index 1fde5aee0e..c35dbfa2cf 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.js
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.js
@@ -239,6 +239,7 @@ const AutocompletePaper = styled(Paper, {
 })(({ theme }) => ({
   ...theme.typography.body1,
   overflow: 'auto',
+  marginBottom: theme.spacing(1),
 }));
 
 const AutocompleteLoading = styled('div', {

Not sure if this should be considered a bug or not. cc @mnajdova

@siriwatknp siriwatknp added new feature New feature or request bug 🐛 Something doesn't work and removed new feature New feature or request labels Sep 17, 2021
@mnajdova
Copy link
Member

Not sure if this should be considered a bug or not. cc @mnajdova

I would consider it a bug, the proposed changes look good to me. Let's just test that all scenarios with all variants look good after the change

@oliviertassinari
Copy link
Member

oliviertassinari commented Sep 17, 2021

What happens if the input used is the filled or standard variant? Some could argue it's a bug with the OutlinedInput, not the Autocomplete: #13253 (comment). I'm not sure. Actually, maybe the popup should use the window's space, not the viewport' space to change its placement: #21661, reducing the impact of this bug.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug 🐛 Something doesn't work waiting for 👍 Waiting for upvotes
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants