The selected function for radio buttons created with createRadio does not work when making multiple changes to which option is selected.

[sflanker]

Most appropriate sub-area of p5.js?

• Accessibility (Web Accessibility)
• Build tools and processes
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Friendly error system
• Image
• IO (Input/Output)
• Localization
• Math
• Unit Testing
• Typography
• Utilities
• WebGL
• Other (specify if possible)

p5.js version

1.4.1

Web browser and version

Chromium 98, Safari 15.3, FireFox 96

Operating System

MacOS

Steps to reproduce this

Steps:

1. Create a radio button with createRadio
2. Add multiple options
3. Cycle through those options repeatedly using the selected(value) function

Expected: you should be able to cycle through the options repeatedly

Actual: the radio buttons get stuck on the last option

Snippet:

const options = ["foo", "bar", "baz"];

function setup() {
  noCanvas();
  noLoop();

  let radio = createRadio();
  options.forEach((v) => radio.option(v));
  radio.selected("foo");

  let ix = 0;
  let nextButton = createButton("Next");
  nextButton.mouseClicked(() => {
    const opt = options[++ix % options.length];
    radio.selected(opt);
  });

  let fixButton = createButton("Fix");
  fixButton.mouseClicked(() => {
    // override radio.selected with a version that works properly
    let self = radio;
    // Here's the fix:
    self.selected = function(value) {
      let result = null;
      if (value === undefined) {
        for (const option of self._getOptionsArray()) {
          if (option.checked) {
            result = option;
            break;
          }
        }
      } else {
        // deselect all first (Google Chrome wigs out when multiple options have the checked attribute set to true)
        self._getOptionsArray().forEach(option => option.removeAttribute("checked"));
        for (const option of self._getOptionsArray()) {
          if (option.value === value) {
            option.setAttribute("checked", true);
            result = option;
            break;
          }
        }
      }
      return result;
    };
  });
}

function draw() {}

[sflanker]

Credit for finding the issue: https://discourse.processing.org/t/calling-selected-value-multiple-times-on-a-radio-button-does-not-change-the-selected-option/35194/3