From 5d9500bdfdd02b3b1d91df2be86b1723f517fc52 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Julien=20D=C3=A9ramond?= Date: Fri, 6 May 2022 04:26:15 +0200 Subject: Handle disabled focused tabs with tab JavaScript plugin (#36169) * Handle disabled tabs * Fix after feedback * Update js/src/tab.js Co-authored-by: GeoSot * Update js/src/tab.js Co-authored-by: GeoSot * 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 --- js/src/tab.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) (limited to 'js/src') diff --git a/js/src/tab.js b/js/src/tab.js index 135e929dd..3fa5e4c9e 100644 --- a/js/src/tab.js +++ b/js/src/tab.js @@ -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 -- cgit v1.2.3