Autocomplete popper position

[Wei102193]

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Steps to reproduce 🕹

Link to live example:https://codesandbox.io/s/silly-frog-8847kp?file=/Demo.tsx

Is it possible to position the popper? I'm trying to give some space between the input and the popper dropdown. I have tried to set marginTop/top using class name ".MuiAutocomplete-popper", componentsProps and PopperComponent. None of them worked.

Current behavior 😯

No response

Expected behavior 🤔

No response

Context 🔦

No response

Your environment 🌎

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.
  System:
    OS: macOS 13.4.1
  Binaries:
    Node: 18.16.0 - /usr/local/bin/node
    Yarn: 1.22.19 - /usr/local/bin/yarn
    npm: 9.5.1 - /usr/local/bin/npm
  Browsers:
    Chrome: 116.0.5845.96
    Edge: Not Found
    Safari: 16.5.2
  npmPackages:
    @emotion/react: ^11.11.1 => 11.11.1
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.11
    @mui/core-downloads-tracker:  5.14.5
    @mui/icons-material: ^5.11.16 => 5.14.1
    @mui/lab: ^5.0.0-alpha.140 => 5.0.0-alpha.140
    @mui/material: ^5.14.5 => 5.14.5
    @mui/private-theming:  5.14.5
    @mui/styled-engine:  5.13.2
    @mui/styles:  5.14.5
    @mui/system:  5.14.5
    @mui/types:  7.2.4
    @mui/utils:  5.14.5
    @types/react: 18.2.14 => 18.2.14
    react: 18.2.0 => 18.2.0
    react-dom: 18.2.0 => 18.2.0
    typescript: 5.1.3 => 5.1.3

[Wei102193]

const PopperMy = function ({className, ...props}: any) {
return (<Popper {...props}
className={isMobile ? className + " QueryAutocomplete-popper-mt" : className}
style={{width: isMobile ? "100%" : props?.style?.width}}
/>)
}

.QueryAutocomplete-popper-mt {
margin-top: 55px !important;
}

This one works. But why the others dont? lol literally took me hours to just get this simple customization done.

[michaldudak]

The Popper element (.MuiAutocomplete-popper is positioned absolutely, so setting its margin won't work. You can target its direct descendant instead (.MuiAutocomplete-popper > * or .MuiAutocomplete-paper).

[Wei102193]

The Popper element (.MuiAutocomplete-popper is positioned absolutely, so setting its margin won't work. You can target its direct descendant instead (.MuiAutocomplete-popper > * or .MuiAutocomplete-paper).

I know popper element is positioned absolutely. So by setting its "top" it supposes to move down away from the input right? But it does not work. I know we can target the paper element, but that's not what I need in my case.

[michaldudak]

So by setting its "top" it supposes to move down away from the input right?

No, the top is reset inline to be able to position the popup where it need to be. You can't override it this way. As the popup is implemented with Popper.js, you can use its modifiers to change the position:

 componentsProps={{
    popper: {
      modifiers: [
        {
          name: "offset",
          options: {
            offset: [0, 20]
          }
        }
      ]
    }
  }}

see https://codesandbox.io/s/peaceful-jepsen-y635c3?file=/Demo.tsx:554-776