Bootstrap 4 / Popper.js interfering with Autosuggestions

Question

I have a feature that does address verification with smartystreets api I am also using a template with bootstrap4 / popper.js and jquery of course.

If you click both links, you will see the behavior. It will either break the address verification plugin or the design, but I cant figure out how to make them both work together.

The difference between the two is that one has class="form-control" whereas the other one does not. Something with the form-control class is triggering the behavior. The broken design link shows error in the console and aborts whatever process causes "display:none" to be added so the address suggestions work.

If I dont trigger that error, the address verification plugin removes the "display:none" but its immediately followed by something else in bootstrap or popper.js interfering and changing it back to display:none giving it just a blinking effect.

If anyone could take a closer look and point me in the right general direction.

Answer 1

if anyone else is using a template that contains autofill.js in the sourcemap of the material-design-bootstrap.js above just comment out this portion of the script as I mentioned above and it will work. Its a hack, not really an answer but it didnt seem to affect any other functionality as far as I could tell.