hide bootstrap popover on blur EXCEPT if element inside popover has focus

Question

I have a Bootstrap popover with a text input inside of it. I want the popover to hide if the user clicks outside of the popover, but stay open if anything inside the popover, such as the input field, receives focus.

Using the trigger:focus option does not work, since after the popover is shown, clicking on anything, including the popover, hides it.

I've tried adding a $('.popover').on('blur') function but I'm not sure how to handle checking if something inside the popover has focus when the blur event is triggered.

This fiddle illustrates the unwanted behaviour http://jsfiddle.net/Lcsqjdgu/

Answer 1

This should work as you described.

1. Set the focus on the input when the popover is shown.
2. Hide the popover on blur.

Fiddle

$('button').on('shown.bs.popover', function() {
  $('#new_input').focus();
})

$(document).on('blur','.popover', function() {
   $(this).popover('hide');
});