<Input> in Drop-down menu item causes missing fade-in animation when opening the drop-down

[ViRuSTriNiTy]

Hi there,

it seems like this is a corner case. I just want to report it to get some feedback whether this is even known or not supported.

Repo steps:

• add drop-down to the page

• replace a drop-down menu item with the following mark-up

  <div class="dropdown-item"><input type="text"></div>
  

• open the drop-down and watch closely to the fade-in animation that is normally applied, it is now missing

This is caused by the following CSS snippet

INPUT:not(:-webkit-autofill), SELECT:not(:-webkit-autofill), TEXTAREA:not(:-webkit-autofill) {
    animation-name: onautofillcancel;
}

It seem like this is either a workaround concerning autofill or a style coming from the browser itself. I cannot find where this is coming from but I found this article that describes how to use this CSS snippet to fix some issues they had in their product.

Does MDB inject the CSS snippet or do you have an idea where this is coming from and why?

So lonG

Daniel

[ViRuSTriNiTy]

A possible workaround is selectively fixing this with CSS only:

input:not(:-webkit-autofill) {
    animation-name: none !important;
}

input should be replaced by a more specific selector that only applies the rule to the concerning input field.

[michal-duszak]

Hello, thank you for your feedback. We will investigate this issue.

[gbujanski]

Fixed in 4.4.0