Two main issues - need solution

[vosidiy]

1. I'm creating booking form where from dropdown you will select passengers and seats.
   When you try to edit passengers or select something dropdown closes
   https://codepen.io/vosidiy/pen/OvYJNr
   

2. Input group with button has dropdown as shown below. Button has icon ( adding by class dropdown-toggle). I want put my custom icon there. When I remove class "dropdown-toggle" then no more round corner :-(

https://www.bootply.com/I9H7NN3U5q

[max-ci]

$(document).on('click', '.dropdown-menu', function (e) {
  e.stopPropagation();
});

[Joyrex]

So on issue #2, you want to use a custom icon instead of the caret (triangle)?

You would have to remove the ::after pseudo-class that generates the caret:

.dropdown-toggle::after {
	display: inline-block;
	width: 0;
	height: 0;
	margin-left: .255em;
	vertical-align: .255em;
	content: "";
	border-top: .3em solid;
	border-right: .3em solid transparent;
	border-bottom: 0;
	border-left: .3em solid transparent;
}

You could try setting up an inline style that removes the border elements and try putting an icon in the content: or leave it so now you can put any icon you want where it says "icon" in your example:
https://www.bootply.com/NbOFJGlE0G#

[mdo]

Is there a bug here, or is this only a how-to question?