fix: do not override custom tabindex attribute (#2443)

vaadin · Sep 2, 2021 · 263e2df · 263e2df
1 parent 566bbfb
commit 263e2df
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 34 deletions.
diff --git 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
@@ -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);
+    });
   });
 });