diff options
Diffstat (limited to 'js')
| -rw-r--r-- | js/src/dropdown.js | 18 | ||||
| -rw-r--r-- | js/tests/unit/dropdown.js | 44 |
2 files changed, 59 insertions, 3 deletions
diff --git a/js/src/dropdown.js b/js/src/dropdown.js index 8affedc6c..56559b434 100644 --- a/js/src/dropdown.js +++ b/js/src/dropdown.js @@ -50,7 +50,8 @@ const Dropdown = (($) => { DROPRIGHT : 'dropright', DROPLEFT : 'dropleft', MENURIGHT : 'dropdown-menu-right', - MENULEFT : 'dropdown-menu-left' + MENULEFT : 'dropdown-menu-left', + POSITION_STATIC : 'position-static' } const Selector = { @@ -74,12 +75,14 @@ const Dropdown = (($) => { const Default = { offset : 0, - flip : true + flip : true, + boundary : 'scrollParent' } const DefaultType = { offset : '(number|string|function)', - flip : 'boolean' + flip : 'boolean', + boundary : '(string|element)' } @@ -159,6 +162,12 @@ const Dropdown = (($) => { element = parent } } + // If boundary is not `scrollParent`, then set position to `static` + // to allow the menu to "escape" the scroll parent's boundaries + // https://github.com/twbs/bootstrap/issues/24251 + if (this._config.boundary !== 'scrollParent') { + $(parent).addClass(ClassName.POSITION_STATIC) + } this._popper = new Popper(element, this._menu, this._getPopperConfig()) } @@ -276,6 +285,9 @@ const Dropdown = (($) => { offset : offsetConf, flip : { enabled : this._config.flip + }, + preventOverflow : { + boundariesElement : this._config.boundary } } } diff --git a/js/tests/unit/dropdown.js b/js/tests/unit/dropdown.js index c1202266b..41c53a98a 100644 --- a/js/tests/unit/dropdown.js +++ b/js/tests/unit/dropdown.js @@ -67,6 +67,50 @@ $(function () { $dropdown.trigger($.Event('click')) }) + QUnit.test('should not add class position-static to dropdown if boundary not set', function (assert) { + assert.expect(1) + var done = assert.async() + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '</div>' + + '</div>' + + '</div>' + var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() + $dropdown + .parent('.dropdown') + .on('shown.bs.dropdown', function () { + assert.ok(!$dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class not added') + done() + }) + $dropdown.trigger('click') + }) + + QUnit.test('should add class position-static to dropdown if boundary not scrollParent', function (assert) { + assert.expect(1) + var done = assert.async() + var dropdownHTML = '<div class="tabs">' + + '<div class="dropdown">' + + '<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-boundary="viewport">Dropdown</a>' + + '<div class="dropdown-menu">' + + '<a class="dropdown-item" href="#">Secondary link</a>' + + '<a class="dropdown-item" href="#">Something else here</a>' + + '</div>' + + '</div>' + + '</div>' + var $dropdown = $(dropdownHTML).find('[data-toggle="dropdown"]').bootstrapDropdown() + $dropdown + .parent('.dropdown') + .on('shown.bs.dropdown', function () { + assert.ok($dropdown.parent('.dropdown').hasClass('position-static'), '"position-static" class added') + done() + }) + $dropdown.trigger('click') + }) + QUnit.test('should set aria-expanded="true" on target when dropdown menu is shown', function (assert) { assert.expect(1) var done = assert.async() |