fix: set has-value attribute on radio button click (#2874)

Author: vursen

packages/vaadin-radio-button/src/vaadin-radio-group.js

@@ -462,15 +462,13 @@ class RadioGroupElement extends ThemableMixin(DirMixin(PolymerElement)) {
       return;
     }
 
-    if (!this._checkedButton || newV != this._checkedButton.value) {
-      const newCheckedButton = this._radioButtons.filter((button) => button.value == newV)[0];
+    const newCheckedButton = this._radioButtons.find((button) => button.value == newV);
 
-      if (newCheckedButton) {
-        this._selectButton(newCheckedButton);
-        this.setAttribute('has-value', '');
-      } else {
-        console.warn(`No <vaadin-radio-button> with value ${newV} found.`);
-      }
+    if (newCheckedButton) {
+      this._selectButton(newCheckedButton);
+      this.setAttribute('has-value', '');
+    } else {
+      console.warn(`No <vaadin-radio-button> with value ${newV} found.`);
     }
   }
 

packages/vaadin-radio-button/test/radio-group.test.js

@@ -180,17 +180,6 @@ describe('radio-group', () => {
       expect(buttons[1].checked).to.be.false;
     });
 
-    it('should not have has-value attribute by default', () => {
-      expect(group.hasAttribute('has-value')).to.be.false;
-    });
-
-    it('should toggle has-value attribute on value change', () => {
-      group.value = '2';
-      expect(group.hasAttribute('has-value')).to.be.true;
-      group.value = '';
-      expect(group.hasAttribute('has-value')).to.be.false;
-    });
-
     it('should dispatch value-changed event when value changes', () => {
       const spy = sinon.spy();
       group.addEventListener('value-changed', spy);
@@ -215,6 +204,26 @@ describe('radio-group', () => {
     });
   });
 
+  describe('has-value attribute', () => {
+    it('should not have has-value attribute by default', () => {
+      expect(group.hasAttribute('has-value')).to.be.false;
+    });
+
+    it('should set has-value on radio button click', () => {
+      buttons[0].click();
+      expect(group.hasAttribute('has-value')).to.be.true;
+      buttons[1].click();
+      expect(group.hasAttribute('has-value')).to.be.true;
+    });
+
+    it('should toggle has-value attribute on value change', () => {
+      group.value = '2';
+      expect(group.hasAttribute('has-value')).to.be.true;
+      group.value = '';
+      expect(group.hasAttribute('has-value')).to.be.false;
+    });
+  });
+
   describe('roving tabindex', () => {
     it('sets focus to the first element by default', () => {
       expect(buttons[0].tabIndex).to.eq(0);
@@ -526,6 +535,12 @@ describe('radio-group', () => {
       group.invalid = false;
       expect(group.hasAttribute('invalid')).to.be.false;
     });
+
+    it('should run validation only once on radio button click', () => {
+      const spy = sinon.spy(group, 'validate');
+      buttons[1].click();
+      expect(spy.calledOnce).to.be.true;
+    });
   });
 
   describe('errorMessage property', () => {