Dropdown - Allow to disable Popper.js style (#24092)
* Dropdown - Allow to disable Popper.js style * Update dropdown.js * Update dropdown.html * copy changes
This commit is contained in:
parent
ba878eb542
commit
65ae622d40
|
@ -807,6 +807,12 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
|
||||||
<td>'toggle'</td>
|
<td>'toggle'</td>
|
||||||
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#referenceObject">referenceObject docs</a>.</td>
|
<td>Reference element of the dropdown menu. Accepts the values of <code>'toggle'</code>, <code>'parent'</code>, or an HTMLElement reference. For more information refer to Popper.js's <a href="https://popper.js.org/popper-documentation.html#referenceObject">referenceObject docs</a>.</td>
|
||||||
</tr>
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>display</td>
|
||||||
|
<td>string</td>
|
||||||
|
<td>dynamic | static</td>
|
||||||
|
<td>By default, we use Popper.js for dynamic positioning. Disable this with `static`.</td>
|
||||||
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|
||||||
|
|
|
@ -75,14 +75,16 @@ const Dropdown = (($) => {
|
||||||
offset : 0,
|
offset : 0,
|
||||||
flip : true,
|
flip : true,
|
||||||
boundary : 'scrollParent',
|
boundary : 'scrollParent',
|
||||||
reference : 'toggle'
|
reference : 'toggle',
|
||||||
|
display : 'dynamic'
|
||||||
}
|
}
|
||||||
|
|
||||||
const DefaultType = {
|
const DefaultType = {
|
||||||
offset : '(number|string|function)',
|
offset : '(number|string|function)',
|
||||||
flip : 'boolean',
|
flip : 'boolean',
|
||||||
boundary : '(string|element)',
|
boundary : '(string|element)',
|
||||||
reference : '(string|element)'
|
reference : '(string|element)',
|
||||||
|
display : 'string'
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -295,6 +297,12 @@ const Dropdown = (($) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Disable Popper.js if we have a static display
|
||||||
|
if (this._config.display === 'static') {
|
||||||
|
popperConfig.modifiers.applyStyle = {
|
||||||
|
enabled: false
|
||||||
|
}
|
||||||
|
}
|
||||||
return popperConfig
|
return popperConfig
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -908,4 +908,34 @@ $(function () {
|
||||||
})
|
})
|
||||||
$textarea.trigger('click')
|
$textarea.trigger('click')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
QUnit.test('should not use Popper.js if display set to static', function (assert) {
|
||||||
|
assert.expect(1)
|
||||||
|
var dropdownHTML =
|
||||||
|
'<div class="dropdown">' +
|
||||||
|
'<a href="#" class="dropdown-toggle" data-toggle="dropdown" data-display="static">Dropdown</a>' +
|
||||||
|
'<div class="dropdown-menu">' +
|
||||||
|
'<a class="dropdown-item" href="#">Secondary link</a>' +
|
||||||
|
'<a class="dropdown-item" href="#">Something else here</a>' +
|
||||||
|
'<div class="divider"/>' +
|
||||||
|
'<a class="dropdown-item" href="#">Another link</a>' +
|
||||||
|
'</div>' +
|
||||||
|
'</div>'
|
||||||
|
|
||||||
|
var $dropdown = $(dropdownHTML)
|
||||||
|
.appendTo('#qunit-fixture')
|
||||||
|
.find('[data-toggle="dropdown"]')
|
||||||
|
.bootstrapDropdown()
|
||||||
|
var done = assert.async()
|
||||||
|
var dropdownMenu = $dropdown.next()[0]
|
||||||
|
|
||||||
|
$dropdown.parent('.dropdown')
|
||||||
|
.on('shown.bs.dropdown', function () {
|
||||||
|
// Popper.js add this attribute when we use it
|
||||||
|
assert.strictEqual(dropdownMenu.getAttribute('x-placement'), null)
|
||||||
|
done()
|
||||||
|
})
|
||||||
|
|
||||||
|
$dropdown.trigger('click')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -164,9 +164,9 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col-sm-12 mt-4">
|
<div class="col-sm-3 mt-4">
|
||||||
<div class="btn-group dropdown">
|
<div class="btn-group dropdown">
|
||||||
<button type="button" class="btn btn-secondary" data-offset="10,20">Dropdown offset</button>
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" data-offset="10,20">Dropdown offset</button>
|
||||||
<div class="dropdown-menu">
|
<div class="dropdown-menu">
|
||||||
<a class="dropdown-item" href="#">Action</a>
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
<a class="dropdown-item" href="#">Another action</a>
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
@ -174,7 +174,7 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-sm-12 mt-4">
|
<div class="col-sm-3 mt-4">
|
||||||
<div class="btn-group dropdown">
|
<div class="btn-group dropdown">
|
||||||
<button type="button" class="btn btn-secondary">Dropdown reference</button>
|
<button type="button" class="btn btn-secondary">Dropdown reference</button>
|
||||||
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
|
<button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">
|
||||||
|
@ -187,6 +187,18 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="col-sm-3 mt-4">
|
||||||
|
<div class="dropdown">
|
||||||
|
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
|
||||||
|
Dropdown menu without Popper.js
|
||||||
|
</button>
|
||||||
|
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
|
||||||
|
<a class="dropdown-item" href="#">Action</a>
|
||||||
|
<a class="dropdown-item" href="#">Another action</a>
|
||||||
|
<a class="dropdown-item" href="#">Something else here</a>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue