fixed: radiobuttons value still shown in view after programmatic clea…

…ring (e.g. by a calculation),

OpenClinica/enketo-express-oc#481

CHANGELOG.md

@@ -8,6 +8,7 @@ This project adheres to [Semantic Versioning](http://semver.org/).
 #### Fixed
 - Range default or loaded value (number) not shown.
 - Distresspicker default or loaded mercury level not shown.
+- Radiobuttons value still shown in view after programmatic clearing (e.g. by a calculation).
 
 [5.17.6] - 2021-04-20
 ---------------------

src/js/input.js

@@ -310,9 +310,13 @@ export default {
             if ( curVal === undefined || curVal.toString() !== value.toString() ) {
                 switch ( type ) {
                     case 'radio': {
-                        const input = this.getWrapNode( control ).querySelector( `input[type="radio"][data-name="${name}"][value="${value}"]` );
-                        if ( input ) {
-                            input.checked = true;
+                        if ( value.toString() === '' ){
+                            inputs.forEach( input => input.checked = false );
+                        } else {
+                            const input = this.getWrapNode( control ).querySelector( `input[type="radio"][data-name="${name}"][value="${value}"]` );
+                            if ( input ) {
+                                input.checked = true;
+                            }
                         }
                         break;
                     }

test/forms/radio2.xml

@@ -0,0 +1,31 @@
+<?xml version="1.0"?>
+<h:html xmlns="http://www.w3.org/2002/xforms" xmlns:ev="http://www.w3.org/2001/xml-events" xmlns:h="http://www.w3.org/1999/xhtml" xmlns:jr="http://openrosa.org/javarosa" xmlns:orx="http://openrosa.org/xforms" xmlns:xsd="http://www.w3.org/2001/XMLSchema">
+  <h:head>
+    <h:title>radio</h:title>
+    <model>
+      <instance>
+        <radio id="radio2">
+          <a/>
+          <meta>
+            <instanceID/>
+          </meta>
+        </radio>
+      </instance>
+      <bind nodeset="/radio/a"  type="select1"/>
+      <bind preload="uid" nodeset="/radio/meta/instanceID" type="string"/>
+    </model>
+  </h:head>
+  <h:body>
+    <select1 ref="/radio/a">
+        <label>Select One</label>
+        <item>
+            <label>Same Examiner</label>
+            <value>0</value>
+        </item>
+        <item>
+            <label>Different Examiner</label>
+            <value>1</value>
+        </item>
+    </select1>
+  </h:body>
+</h:html>

test/spec/input.spec.js

@@ -15,7 +15,23 @@ describe( 'input helper', () => {
         } );
     } );
 
-    describe( 'clears form controls', () => {
+    describe( 'setVal() function', () => {
+        it( 'is able to clear a value from a group of radiobuttons', () => {
+            const form = loadForm( 'radio2.xml' );
+            form.init();
+            const radioEl = form.view.html.querySelector( 'input[type="radio"]' );
+
+            // setup
+            form.input.setVal( radioEl, '1' );
+            expect( form.input.getVal( radioEl ) ).toEqual( '1' );
+
+            // bug: https://github.com/OpenClinica/enketo-express-oc/issues/481#issuecomment-829429174
+            form.input.setVal( radioEl, '' );
+            expect( form.input.getVal( radioEl ) ).toEqual( '' );
+        } );
+    } );
+
+    describe( 'clear() function', () => {
         const form = loadForm( 'repeat-default.xml' );
         form.init();
         const num = form.view.html.querySelector( '[name="/repdef/rep/num"]' );