radio.selected(value) does not work with radio buttons holding "value" and "label"

[KouichiMatsuda]

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)

Details about the bug:

• p5.js version: 1.4.0
• Web browser and version: Chrome and 92.0.4515.131 (Official Build) (64 bit) (cohort: Stable)
• Operating System: Windows 10
• Steps to reproduce this:

Hi all,
In the following code, the "red" button is not selected. Am I missing something?

let radio; 

function setup() {
  radio = createRadio(); 
  radio.option(1, "red"); 
  radio.option(2, "blue"); 
  radio.option(3, "green");
  radio.selected(1); 
}

function draw() {

}

[limzykenneth]

The radio options' values are converted to strings on creation because the underlying HTML element only supports string values and when attempting to select using radio.selected(1), it is trying to look for an option with a numeric 1 instead of a string "1" so it can't find a match.

We can possibly cast the argument passed to radio.selected() into string explicitly.

[KouichiMatsuda]

Great thanks, & Woops!

I think it should be written in the "Description".
It's hard to find the bug especially for beginners.

BTW, the order of arguments of "option" method between createSelect and createRadio is different as follows:
.option(name, [value]) for createSelection() and .option(value, [label]) for createRadio.

Is there any reason about that?

[limzykenneth]

I think it should be written in the "Description".
It's hard to find the bug especially for beginners.

Yes, I think adding a note about this in the reference would be good.

BTW, the order of arguments of "option" method between createSelect and createRadio is different as follows:
.option(name, [value]) for createSelection() and .option(value, [label]) for createRadio.

I'm not exactly sure why that is the case. It certainly can be confusing but unfortunately for backwards compatibility reasons we can't change it for now (until the next major release).

[KouichiMatsuda]

Great thanks,
It's clear for me.

option(name, [value]) for createSelection() and .option(value, [label]) for createRadio.

I think the "name" parameter is confusing. It should be "label" which is used in createRadio.
At least, in 'Desctipyion', it seems to be better that .option(name, [value]) will be rewritten into .option(label, [value]).

Thanks,

[unjust]

Any work being done on this as of yet? 💪

[limzykenneth]

@unjust Not that I know of. You can put together a PR for this if you wish.

[montoyamoraga]

@all-contributors please add @KouichiMatsuda for bug

[allcontributors]

@montoyamoraga

I've put up a pull request to add @KouichiMatsuda! 🎉