Bootstrap3 popover data-trigger = focus closes the popup when clicking on <select> input inside the popup

Question

I use bootstrap popover and has a <select> field inside the popover so the user can change languages.

If they go beyond the popover, I want it to disappear, so I use the data-trigger="focus" attribute in the <a> tag to accomplish this.

However, if they click on the <select> drop-down menu, the popover disappears before they can click the language.

Below is the download link - any help is greatly appreciated.

http://www.bootply.com/SEM4ophIhx

JavaScript:

 $(function () { $('[data-toggle="popover"]').popover() }) $(function () { $('[rel="popover"]').popover({ container: 'body', html: true, content: function () { var clone = $($(this).data('popover-content')).clone(true).removeClass('hide'); return clone; } }).click(function (e) { e.preventDefault(); }); }); 

HTML:

 <a href="#" role="button" data-placement="right" data-trigger="focus" rel="popover" data-popover-content="#profilesettingsaction"> <span class="glyphicon glyphicon-cog"></span> </a> <div id="profilesettingsaction" class="hide"> <ul> <li> <select name="language"> <option value="">العربية: الإمارات العربية المتحدة</option> <option value="">中国</option> <option value="">中國</option> <option value="">Nederlands: Nederland</option> <option value="">English: United Kingdom</option> <option value="" selected="">Language: English</option> <option value="">Français: France</option> <option value="">Italiano: l'Italia</option> <option value="">日本語：日本</option> <option value="">Português: Portugal</option> <option value="">Español: México</option> </select> </li> </ul> </div> 

Answer 1

I believe that you used the data-trigger attribute incorrectly, you should have specified the click, not the focus.

Here it works: http://www.bootply.com/5gXiitMup1

I added code to handle closing a popover whenever a language is selected.

Hope this is helpful.

Answer 2

Found a way to do this

 $('[data-toggle="popover"]').popover(); $('body').on('click', function (e) { $('[data-toggle="popover"]').each(function () { //the 'is' for buttons that trigger popups //the 'has' for icons within a button that triggers a popup if (!$(this).is(e.target) && $(this).has(e.target).length === 0 && $('.popover').has(e.target).length === 0) { $(this).popover('hide'); } }); }); 

You simply catch click events on the body and check if the target is a child of your popover. However, it is very slow.