Fix an issue with uncheckable radio buttons.

When clicking back and forth between radio buttons in a radio group a
radio button can be unexpectedly still unchecked when it should become
checked.  For example, in a radio group with at least two radio buttons,
click on the first radio button.  It will now be checked.  Now click on
the second radio button, and it will now be checked.  Now click on the
first radio button again.  This time it will remain unchecked and the
second radio button will also now be unchecked.

Another manifestation of this is with keyboard controls.  Again with a
radio group containing at least two radios.  Click on the first radio
button (or for a pure keyboard approach navigate to the radio group with
tab, and hit the spacebar when the first radio button is focused), and
it will now be checked.  Now use the down arrow repeatedly.  As focus
cycles through the radio group buttons on each subsequent full cycle the
radios will be all checked, and then all unchecked on the next cycle.

The way that the uncheckable radio code works is that javascript adds a
data attribute to a radio button when it is checked which indicates that
the radio is checked.  The problem is that when another radio in the
group is checked that second radio now has the data attribute added, but
the first does not have the data attribute removed. So if that first
radio button is now clicked again the javascript sees the data
attribute, deletes it, and undoes the effect of the click and unchecks
the radio when in this case it should let the effect of the click occur.

To fix the issue, radio groups need to be managed instead of single
radio buttons. When the data attribute is added to a radio button, the
code needs to ensure the data attribute is removed from the other radio
buttons in the group that have it.

Of course when a second click occurs on an already checked radio button,
that works as before, and the radio is unchecked (and the data attribute
removed).

Author: drgrice1

htdocs/js/RadioButtons/RadioButtons.js

@@ -15,20 +15,28 @@
 'use strict';
 
 (() => {
+	const radioGroups = {};
+
 	// Setup uncheckable radios.
 	const setupUncheckableRadio = (radio) => {
 		if (!radio.dataset.uncheckableRadioButton) return;
 		delete radio.dataset.uncheckableRadioButton;
 
+		if (!radioGroups[radio.name]) radioGroups[radio.name] = [radio];
+		else radioGroups[radio.name].push(radio);
+
 		if (radio.checked) radio.dataset.currentlyChecked = '1';
 
 		radio.addEventListener('click', (e) => {
+			for (const groupRadio of radioGroups[radio.name]) {
+				if (groupRadio === radio) continue;
+				delete groupRadio.dataset.currentlyChecked;
+			}
 			if (radio.dataset.shift && !e.shiftKey) {
 				radio.dataset.currentlyChecked = '1';
 				return;
 			}
-			const currentlyChecked = radio.dataset.currentlyChecked;
-			if (currentlyChecked) {
+			if (radio.dataset.currentlyChecked) {
 				delete radio.dataset.currentlyChecked;
 				radio.checked = false;
 			} else {