From 263e2df7c7deb11acb161f9a24ed517c6edb85b8 Mon Sep 17 00:00:00 2001
From: Sergey Vinogradov <mr.vursen@gmail.com>
Date: Thu, 2 Sep 2021 18:10:11 +0300
Subject: [PATCH] fix: do not override custom tabindex attribute (#2443)

---
 packages/field-base/src/tabindex-mixin.js     |  6 +-
 .../field-base/test/tabindex-mixin.test.js    | 79 +++++++++++--------
 2 files changed, 51 insertions(+), 34 deletions(-)

diff --git a/packages/field-base/src/tabindex-mixin.js b/packages/field-base/src/tabindex-mixin.js
index 463487ada9..467d319b27 100644
--- a/packages/field-base/src/tabindex-mixin.js
+++ b/packages/field-base/src/tabindex-mixin.js
@@ -41,13 +41,13 @@ const TabindexMixinImplementation = (superclass) =>
      * @protected
      * @override
      */
-    _disabledChanged(disabled) {
-      super._disabledChanged(disabled);
+    _disabledChanged(disabled, oldDisabled) {
+      super._disabledChanged(disabled, oldDisabled);
 
       if (disabled) {
         this.__lastTabIndex = this.tabindex;
         this.tabindex = -1;
-      } else {
+      } else if (oldDisabled) {
         this.tabindex = this.__lastTabIndex;
       }
     }
diff --git a/packages/field-base/test/tabindex-mixin.test.js b/packages/field-base/test/tabindex-mixin.test.js
index a5c18c0d1d..f00d5f9548 100644
--- a/packages/field-base/test/tabindex-mixin.test.js
+++ b/packages/field-base/test/tabindex-mixin.test.js
@@ -15,44 +15,61 @@ customElements.define(
 describe('tabindex-mixin', () => {
   let element;
 
-  beforeEach(() => {
-    element = fixtureSync(`<tabindex-mixin-element></tabindex-mixin-element>`);
-  });
+  describe('default', () => {
+    beforeEach(() => {
+      element = fixtureSync(`<tabindex-mixin-element></tabindex-mixin-element>`);
+    });
 
-  it('should set tabindex attribute to 0 by default', () => {
-    expect(element.getAttribute('tabindex')).to.be.equal('0');
-  });
+    it('should set tabindex attribute to 0 by default', () => {
+      expect(element.getAttribute('tabindex')).to.be.equal('0');
+    });
 
-  it('should reflect tabindex property to the attribute', () => {
-    element.tabindex = 1;
-    expect(element.getAttribute('tabindex')).to.be.equal('1');
-  });
+    it('should reflect tabindex property to the attribute', () => {
+      element.tabindex = 1;
+      expect(element.getAttribute('tabindex')).to.be.equal('1');
+    });
 
-  it('should reflect native tabIndex property to the attribute', () => {
-    element.tabIndex = 1;
-    expect(element.getAttribute('tabindex')).to.be.equal('1');
-  });
+    it('should reflect native tabIndex property to the attribute', () => {
+      element.tabIndex = 1;
+      expect(element.getAttribute('tabindex')).to.be.equal('1');
+    });
 
-  it('should set tabindex attribute to -1 when disabled', () => {
-    element.tabIndex = 1;
-    element.disabled = true;
-    expect(element.getAttribute('tabindex')).to.be.equal('-1');
-  });
+    it('should reflect tabindex attribute to the property', () => {
+      element.setAttribute('tabindex', '1');
+      expect(element.tabindex).to.be.equal(1);
+    });
+
+    it('should set tabindex attribute to -1 when disabled', () => {
+      element.tabIndex = 1;
+      element.disabled = true;
+      expect(element.getAttribute('tabindex')).to.be.equal('-1');
+    });
+
+    it('should restore tabindex attribute when enabled', () => {
+      element.tabIndex = 1;
+      element.disabled = true;
+      element.disabled = false;
+      expect(element.getAttribute('tabindex')).to.be.equal('1');
+    });
+
+    it('should restore tabindex attribute with the last known value when enabled', () => {
+      element.tabIndex = 1;
+      element.disabled = true;
+      element.tabIndex = 2;
+      expect(element.getAttribute('tabindex')).to.be.equal('-1');
 
-  it('should restore tabindex attribute when enabled', () => {
-    element.tabIndex = 1;
-    element.disabled = true;
-    element.disabled = false;
-    expect(element.getAttribute('tabindex')).to.be.equal('1');
+      element.disabled = false;
+      expect(element.getAttribute('tabindex')).to.be.equal('2');
+    });
   });
 
-  it('should restore tabindex attribute with the last known value when enabled', () => {
-    element.tabIndex = 1;
-    element.disabled = true;
-    element.tabIndex = 2;
-    expect(element.getAttribute('tabindex')).to.be.equal('-1');
+  describe('custom', () => {
+    beforeEach(() => {
+      element = fixtureSync(`<tabindex-mixin-element tabindex="1"></tabindex-mixin-element>`);
+    });
 
-    element.disabled = false;
-    expect(element.getAttribute('tabindex')).to.be.equal('2');
+    it('should set tabindex property to the custom value', () => {
+      expect(element.tabindex).to.equal(1);
+    });
   });
 });