Merge pull request #5622 from select2/GH-5373

Support passing in a selector for `dropdownParent` option

src/js/select2/dropdown/attachBody.js

@@ -3,7 +3,7 @@ define([
   '../utils'
 ], function ($, Utils) {
   function AttachBody (decorated, $element, options) {
-    this.$dropdownParent = options.get('dropdownParent') || $(document.body);
+    this.$dropdownParent = $(options.get('dropdownParent') || document.body);
 
     decorated.call(this, $element, options);
   }

tests/dropdown/dropdownParent-tests.js

@@ -0,0 +1,83 @@
+module('Dropdown - attachBody - dropdownParent option');
+
+test('can be a selector string', function (assert) {
+    assert.expect(1);
+
+    var $ = require('jquery');
+
+    var $select = $('<select></select>');
+    var $parent = $('<div id="parent"></div>');
+
+    $('#qunit-fixture').append($parent);
+
+    var Utils = require('select2/utils');
+    var Options = require('select2/options');
+
+    var Dropdown = require('select2/dropdown');
+    var AttachBody = require('select2/dropdown/attachBody');
+
+    var DropdownAdapter = Utils.Decorate(Dropdown, AttachBody);
+
+    var dropdown = new DropdownAdapter($select, new Options({
+        dropdownParent: '#parent'
+    }));
+
+    assert.equal(
+        dropdown.$dropdownParent[0],
+        $parent[0],
+        'Should be parsed using the selector as a jQuery object'
+    );
+});
+
+test('can be a jQuery object', function (assert) {
+    assert.expect(1);
+
+    var $ = require('jquery');
+
+    var $select = $('<select></select>');
+    var $parent = $('<div id="parent"></div>');
+
+    $('#qunit-fixture').append($parent);
+
+    var Utils = require('select2/utils');
+    var Options = require('select2/options');
+
+    var Dropdown = require('select2/dropdown');
+    var AttachBody = require('select2/dropdown/attachBody');
+
+    var DropdownAdapter = Utils.Decorate(Dropdown, AttachBody);
+
+    var dropdown = new DropdownAdapter($select, new Options({
+        dropdownParent: $parent
+    }));
+
+    assert.equal(
+        dropdown.$dropdownParent[0],
+        $parent[0],
+        'Should just take the passed in jQuery object'
+    );
+});
+
+test('defaults to the document body', function (assert) {
+    assert.expect(1);
+
+    var $ = require('jquery');
+
+    var $select = $('<select></select>');
+
+    var Utils = require('select2/utils');
+    var Options = require('select2/options');
+
+    var Dropdown = require('select2/dropdown');
+    var AttachBody = require('select2/dropdown/attachBody');
+
+    var DropdownAdapter = Utils.Decorate(Dropdown, AttachBody);
+
+    var dropdown = new DropdownAdapter($select, new Options({}));
+
+    assert.equal(
+        dropdown.$dropdownParent[0],
+        document.body,
+        'Should default to wrapping document.body'
+    );
+});

tests/unit-jq1.html

@@ -70,6 +70,7 @@
     <script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
 
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
+    <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>

tests/unit-jq2.html

@@ -70,6 +70,7 @@
     <script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
 
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
+    <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>

tests/unit-jq3.html

@@ -70,6 +70,7 @@
     <script src="data/minimumInputLength-tests.js" type="text/javascript"></script>
 
     <script src="dropdown/dropdownCss-tests.js" type="text/javascript"></script>
+    <script src="dropdown/dropdownParent-tests.js" type="text/javascript"></script>
     <script src="dropdown/positioning-tests.js" type="text/javascript"></script>
     <script src="dropdown/search-a11y-tests.js" type="text/javascript"></script>
     <script src="dropdown/selectOnClose-tests.js" type="text/javascript"></script>