Paragraphs Actions JS for closing the toggle.

css/paragraphs.css

@@ -33,6 +33,7 @@ html.dialog-open {
   border-radius: 4px;
   border: 2px solid #ccc;
   margin-top: 5px;
+  box-shadow: 0 0 4px #ddd;
 }
 .paragraphs-actions-more .details-child-wrapper:before {
   content: "";

js/paragraphs_actions.js

@@ -0,0 +1,46 @@
+/**
+ * @file
+ * Paragraphs actions JS code for paragraphs actions button.
+ */
+
+(function ($, Backdrop) {
+
+  'use strict';
+
+  /**
+   * Process paragraph_actions elements.
+   *
+   * @type {Backdrop~behavior}
+   *
+   * @prop {Backdrop~behaviorAttach} attach
+   *   Attaches paragraphsActions behaviors.
+   */
+  Backdrop.behaviors.paragraphsActions = {
+    attach: function (context, settings) {
+      var $actionsElement = $('.paragraphs-actions-more').once('paragraphs-actions-more', context);
+      // Attach event handlers to toggle button.
+      $actionsElement.each(function () {
+        var $this = $(this);
+
+        $this.on('focusout', function (e) {
+          setTimeout(function () {
+            if ($this.has(document.activeElement).length == 0) {
+              // The focus left the action button group, hide actions.
+              $this.removeAttr('open');
+            }
+          }, 1);
+        });
+      });
+      $(document).on('keydown.paragraphsActions', function (event) {
+        if (event.key === 'Escape') {
+          $('.paragraphs-actions-more').removeAttr('open');
+        }
+      });
+
+    },
+    detach: function (context) {
+      $(document).off('keydown.paragraphsActions');
+    }
+  };
+
+})(jQuery, Backdrop);

paragraphs.field_widget.inc

@@ -156,9 +156,9 @@ function paragraphs_field_multiple_value_form($field, $instance, $langcode, $ite
   if (module_exists('file')) {
     // file.js triggers uploads when the main Submit button is clicked.
     $field_elements['#attached']['js'][] = backdrop_get_path('module', 'file') . '/js/file.js';
+    $field_elements['#attached']['js'][] = backdrop_get_path('module', 'paragraphs') . '/paragraphs.js';
     $form_state['has_file_element'] = TRUE;
   }
-  $field_elements['#attached']['js'][] = backdrop_get_path('module', 'paragraphs') . '/paragraphs.js';
 
   return $field_elements;
 }
@@ -336,6 +336,7 @@ function _paragraphs_add_more_buttons($instance, $langcode, $form_state, $field_
           );
         }
       }
+      $field_elements['#attached']['js'][] = backdrop_get_path('module', 'paragraphs') . '/js/paragraphs_actions.js';
     }
     else {
       $field_elements['add_more']['add_more'] = array(

paragraphs.js

@@ -22,32 +22,4 @@
     }
   };
 
-  /**
-   * Close any open "more actions" menus.
-   */
-  Backdrop.behaviors.closeMoreActions = {
-    attach: function (context) {
-      $('body', context).on('click', Backdrop.paragraphs.closeActionMenu);
-    },
-    detach: function (context) {
-      $('body', context).on('click', Backdrop.paragraphs.closeActionMenu);
-    }
-  };
-
-  Backdrop.paragraphs = Backdrop.paragraphs || {
-
-    /**
-     * Close any open actions menus if the click is outside of the menu.
-     */
-    closeActionMenu: function (event) {
-      var $moreactions = $('.paragraphs-actions-more');
-      var $body = $('body');
-      var insideMoreActions = $.contains(event.target, $body);
-      if (!insideMoreActions) {
-        $moreactions.removeAttr('open');
-      }
-    }
-
-  };
-
 })(jQuery);