Popper: CSS "margin" styles cannot be used to apply padding ...

[jakajancar]

Version

6.0.0-alpha.11

Steps to reproduce

Even the default CodeSandbox demo reproduces it after updating the version.

Expected Behavior

The Upgrade guide says:

[...] PopperJS now triggers the following warning in development when used with Bootstrap < 5

Actual Behavior

The error happens also with Bootstrap 5.

[ericgio]

Hey @jakajancar thanks for opening this issue. Full details outlined in #549, but this is a side-effect of upgrading react-popper/PopperJs. Bootstrap 5 also relies on PopperJs v2, and does away with the offending margin styles that triggered the warning. Unfortunately, there are one or two styles still included in this library that may be triggering the warning as well. The styles are there for backwards compatibility with BS4, which I still want to support for at least the next major version (v6) or so. Please note that this is just a warning and not an error.

[jakajancar]

Got it, thanks. Perhaps just the Upgrade guide should be updated to say the warnings are expected also with Bootstrap 5 (right now it says only with < 5).

[devashtar]

I just override the margin property for all child elements.

css file

.typehead * {
  margin: 0;
}

js file(react)

/* import css as module */
import styles from './anyFilename.module.css'
import { AsyncTypeahead } from 'react-bootstrap-typeahead'

const Component () => {
  return (
    <AsyncTypeahead
        className={styles.typehead}
    />
  )
}

[AbhishekSRajput]

Thanks @devashtar

[laug]

@devashtar Thanks, worked for me too though I had to use margin: 0 !important as 0 alone did not suppress the warning.