feat(navigation): set disabled prop on nav element if it is a `<but…

…ton>` element fixes #4312
nolimits4web · Mar 10, 2021 · 7536fbd · 7536fbd
1 parent 95ffc2b
commit 7536fbd
Showing 1 changed file with 9 additions and 4 deletions.
diff --git a/src/components/navigation/navigation.js b/src/components/navigation/navigation.js
@@ -2,29 +2,34 @@ import $ from '../../utils/dom';
 import { extend, bindModuleMethods } from '../../utils/utils';
 
 const Navigation = {
+  toggleEl($el, disabled) {
+    $el[disabled ? 'addClass' : 'removeClass'](this.params.navigation.disabledClass);
+    if ($el[0] && $el[0].tagName === 'BUTTON') $el[0].disabled = disabled;
+  },
   update() {
     // Update Navigation Buttons
     const swiper = this;
     const params = swiper.params.navigation;
+    const toggleEl = swiper.navigation.toggleEl;
 
     if (swiper.params.loop) return;
     const { $nextEl, $prevEl } = swiper.navigation;
 
     if ($prevEl && $prevEl.length > 0) {
       if (swiper.isBeginning) {
-        $prevEl.addClass(params.disabledClass);
+        toggleEl($prevEl, true);
       } else {
-        $prevEl.removeClass(params.disabledClass);
+        toggleEl($prevEl, false);
       }
       $prevEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](
         params.lockClass,
       );
     }
     if ($nextEl && $nextEl.length > 0) {
       if (swiper.isEnd) {
-        $nextEl.addClass(params.disabledClass);
+        toggleEl($nextEl, true);
       } else {
-        $nextEl.removeClass(params.disabledClass);
+        toggleEl($nextEl, false);
       }
       $nextEl[swiper.params.watchOverflow && swiper.isLocked ? 'addClass' : 'removeClass'](
         params.lockClass,