Menu form is broken in input group

[ysds]

When using a menu form in a input group, the form controls in the dropdown will be broken.

Demo: https://jsfiddle.net/tdf22y9t/

The usability of such UI may be questionable, but does bootstrap support this usage? If support it, hopefully I can work on solving this problem by adding a selector >.

[mdo]

Yes, we should support it.

[ysds]

OK 👍 I created a PR.

[slidenerd]

Yup i double side this. Also try adding 2 input groups with a dropdown form in each, one of them ends up broken

[ysds]

Could you make a pen?

[slidenerd]

Sure thank you for the quick response @ysds HERE is the pen Once you expand the dropdown menu and inspect element, you ll notice that only one of them has the form inside while the other one doesnt, any suggestions are super appreciated

What I am trying to build in that snippet is an input group with a dropdown button that has the ability to search items inside. I am adding a form as one of the children with a search box, a div inside which I will populate dropdown-items from ajax call or json and an item to show when there is nothing to display after filtering

[ysds]

The bootstrap CSS on your pen is not latest v4-dev. Also, I'm not sure your problem related this issue.

[slidenerd]

Thank you for pointing that out. I updated it to the latest bootstrap version 4 beta 3 , the issue still exists :)