1
0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-06 21:56:42 +02:00

Handle disabled focused tabs with tab JavaScript plugin (#36169)

* Handle disabled tabs

* Fix after feedback

* Update js/src/tab.js

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Update js/src/tab.js

Co-authored-by: GeoSot <geo.sotis@gmail.com>

* Commit suggestions via GitHub broke the thing

* Add some unit tests

* Remove temp doc modification

* Add tests for left arrow

* Add disabled tabs in JavaScript Behavior section

* Compact 4 tests to 2 tests

* Compact 4 tests to 2 tests

* Add 'disabled' attribute for all buttons

* Change the disabled pane position only for the vertical version

* Change ids for the confusing first example in JavaScript behavior

* Use disabled attribute instead of the class for buttons in tabs

Co-authored-by: GeoSot <geo.sotis@gmail.com>
This commit is contained in:
Julien Déramond
2022-05-06 04:26:15 +02:00
committed by GitHub
parent cca801683d
commit 5d9500bdfd
4 changed files with 127 additions and 19 deletions

View File

@@ -168,8 +168,11 @@ class Tab extends BaseComponent {
event.stopPropagation()// stopPropagation/preventDefault both added to support up/down keys without scrolling the page
event.preventDefault()
const isNext = [ARROW_RIGHT_KEY, ARROW_DOWN_KEY].includes(event.key)
const nextActiveElement = getNextActiveElement(this._getChildren(), event.target, isNext, true)
Tab.getOrCreateInstance(nextActiveElement).show()
const nextActiveElement = getNextActiveElement(this._getChildren().filter(element => !isDisabled(element)), event.target, isNext, true)
if (nextActiveElement) {
Tab.getOrCreateInstance(nextActiveElement).show()
}
}
_getChildren() { // collection of inner elements