Fix clicking buttons inside popovers

They would work only occasionally because of the way bootstrap handles
popovers with trigger:focus.
Had to change to trigger:click and manually close the popovers when
clicking outside of them or in buttons marked to close popovers.

app/assets/javascripts/recordings.coffee

@@ -106,10 +106,12 @@ class @Recordings
       @getTable().api().clear().draw().destroy()
 
     # enable popovers
+    # can't use trigger:'focus' because it doesn't work will with buttons inside
+    # the popover
     options = {
       selector: '.has-popover',
       html: true,
-      trigger: 'focus',
+      trigger: 'click',
       title: ->
         return $(this).data("popover-title");
       content: ->
@@ -118,6 +120,19 @@ class @Recordings
     }
     $('#recordings').popover(options)
 
+    # close popovers manually when clicking outside of them or in buttons
+    # with [data-dismiss="popover"]
+    # careful to hide only the open popover and not all of them, otherwise they won't reopen
+    $('body').on 'click', (e) ->
+      $('.has-popover').each ->
+        if !$(this).is(e.target) and $(this).has(e.target).length == 0 and $('.popover.in').has(e.target).length == 0
+          if $(this).next(".popover.in").length > 0
+            $(this).popover('hide')
+    $(document).on 'click', '[data-dismiss="popover"]', (e) ->
+      $('.has-popover').each ->
+        if $(this).next(".popover.in").length > 0
+          $(this).popover('hide')
+
   # Gets the current instance or creates a new one
   @getInstance: ->
     if _recordingsInstance && Recordings.initialized()

app/views/landing/rooms.html.erb

@@ -43,10 +43,10 @@ with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
 
 <div hidden class="hidden-elements">
   <div class="delete-popover-body">
-    <button type="button" class="btn btn-danger recording-delete">
+    <button type="button" class="btn btn-danger recording-delete" data-dismiss="popover">
       <%= t('yes') %>
     </button>
-    <button type="button" class="btn btn-default">
+    <button type="button" class="btn btn-default" data-dismiss="popover">
       <%= t('no') %>
     </button>
   </div>