Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. react bootstrap

Question

I am working on a react project using react-bootstrap and facing this warning when clicking on the dropdown menu.

Popper: CSS "margin" styles cannot be used to apply padding between the popper and its reference element or boundary. To replicate margin, use the offset modifier, as well as the padding option in the preventOverflow and flip modifiers.

<Dropdown alignRight className="dropdown m-0">
   <Dropdown.Toggle as={CustomToggle} />
   <Dropdown.Menu style={{ margin: 0 }}>
      <Dropdown.Item >edit</Dropdown.Item>
   </Dropdown.Menu>
</Dropdown>

How can I solve this issue ?

Answer 1

By adding style with margin the error message disappears Dropdown.Menu style={{ margin: 0 }}

Answer 2

I observed this error message while using the MUI Autocomplete control (which also uses Popper), while doing server-side data retrieval.

I am struggling to narrow down exactly what combination of props causes the warning, but I do know that removing disablePortal has removed the warning. It also doesn't seem to affect my use case (the documentation merely suggests using disablePortal to workaround an accessibility issue on iOS).

Here's an example from my code:

<Autocomplete
      inputValue={acInputValue}
      onInputChange={(e_, newValue, reason) => {
        setMode(reason);
        setAcInputValue(newValue);
      }}
      value={firstMatchingOption}
      onChange={(e_, selectedValue) => {
        onChange({
          target: {
            name,
            value: selectedValue,
          },
        });
      }}
      // disablePortal // removing this stops the warning
      options={options}
      filterOptions={(x) => x} // for server-side filtering
      getOptionLabel={lookupLabel}
      // use mongo ids because my labels are not unique
      renderOption={(props, id) => (
        <li {...props} key={id}>
          {lookupLabel(id)}
        </li>
      )}
      renderInput={(params) => (
        <TextField {...params} label={isProgressing ? 'loading...' : label} />
      )}
    />