@atlassian/aui 9.10.4 → 9.10.5

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@atlassian/aui",
     "description": "Atlassian User Interface library",
-    "version": "9.10.4",
+    "version": "9.10.5",
     "author": "Atlassian Pty Ltd.",
     "homepage": "https://aui.atlassian.com",
     "license": "Apache-2.0",

package/src/js/aui/select2.js

@@ -1,6 +1,6 @@
 import $ from './jquery';
 import '../../js-vendor/jquery/plugins/jquery.select2';
-import layer from "./layer";
+import layer from './layer';
 
 /**
  * Wraps a vanilla Select2 with ADG _style_, as an auiSelect2 method on jQuery objects.
@@ -20,9 +20,11 @@ const auiContainer = 'aui-select2-container';
 const auiDropdown = 'aui-select2-drop aui-dropdown2';
 const auiHasAvatar = 'aui-has-avatar';
 
+// Other constants
+const DROPDOWN_LAYER_KEY = 'aui.select2DropdownLayer';
+
 $.fn.auiSelect2 = function (first) {
     let updatedArgs;
-    let dropdownLayer;
 
     if ($.isPlainObject(first)) {
         const auiOpts = $.extend({}, first);
@@ -83,12 +85,18 @@ $.fn.auiSelect2 = function (first) {
         const $selectInput = $(this);
         const $selectDropdown = $selectInput.select2('dropdown');
 
-        if (!dropdownLayer) dropdownLayer = layer();
+        let dropdownLayer = $selectInput.data(DROPDOWN_LAYER_KEY);
+
+        if (!dropdownLayer) {
+            dropdownLayer = layer();
+            $selectInput.data(DROPDOWN_LAYER_KEY, dropdownLayer);
+        }
+
         dropdownLayer.show(); // add layer to layer manager to get top z-index
 
         $selectDropdown.css('z-index', dropdownLayer.$el.css('z-index'));
         // mask is created during opening event, before open
-        $("#select2-drop-mask").css('z-index', dropdownLayer.$el.css('z-index'));
+        $('#select2-drop-mask').css('z-index', dropdownLayer.$el.css('z-index'));
 
         if (options.multiple || $selectInput.attr('multiple')) {
             // This is a multi-select, exiting
@@ -102,8 +110,17 @@ $.fn.auiSelect2 = function (first) {
 
     select2Instance.on('select2-close', function () {
         const $selectInput = $(this);
-
-        dropdownLayer.hide();
+        const dropdownLayer = $selectInput.data(DROPDOWN_LAYER_KEY);
+
+        if (dropdownLayer) {
+            dropdownLayer.hide();
+        } else {
+            AJS.warn(
+                'Warning! AUI: `select2-close` event handler could not discover the layer linked with the Select2 dropdown.',
+                'This may be happening when there are many instances of Select2 created on the same DOM element.',
+                'Consider checking your code as this can negatively affect performance.'
+            );
+        }
 
         $selectInput.removeData('was-ariadescribedby-cleared');
     });