Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Radio buttons interact with each other #6763

Closed
1 of 17 tasks
Hansterdam opened this issue Jan 22, 2024 · 8 comments · Fixed by #7162
Closed
1 of 17 tasks

Radio buttons interact with each other #6763

Hansterdam opened this issue Jan 22, 2024 · 8 comments · Fixed by #7162
Labels
Area:DOM Bug

Comments

@Hansterdam
Copy link

Most appropriate sub-area of p5.js?

  • Accessibility
  • Color
  • Core/Environment/Rendering
  • Data
  • DOM
  • Events
  • Image
  • IO
  • Math
  • Typography
  • Utilities
  • WebGL
  • Build process
  • Unit testing
  • Internationalization
  • Friendly errors
  • Other (specify if possible)

p5.js version

1.9.0

Web browser and version

Brave 1.61.116 Chromium: 120.0.6099.217

Operating system

Windows 11

Steps to reproduce this

Steps:

  1. Create two radio buttons (with multiple option)
  2. Set a selected value for each
  3. Only the last selected value will be selected
  4. Selecting a value on the first radio will unselect all options from the second radio

Snippet:

function setup() {
  createCanvas(100, 100);

  const radio1 = createRadio();
  radio1.option('car');
  radio1.option('bicycle');
  radio1.option('airplane');
  radio1.selected('bicycle');
  
  const radio2 = createRadio();
  radio2.option('tiger');
  radio2.option('elephant');
  radio2.option('parrot');
  radio2.selected('tiger');
}
@Hansterdam Hansterdam added the Bug label Jan 22, 2024
@welcome Welcome
Copy link

welcome bot commented Jan 22, 2024

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms. Thank you!

@lindapaiste
Copy link
Contributor

lindapaiste commented Jan 22, 2024 •
edited
Loading

You can prevent this by using a name argument for each radio set. That is,

function setup() {
  createCanvas(100, 100);

  const radio1 = createRadio('vehicle');
  radio1.option('car');
  radio1.option('bicycle');
  radio1.option('airplane');
  radio1.selected('bicycle');
  
  const radio2 = createRadio('animal');
  radio2.option('tiger');
  radio2.option('elephant');
  radio2.option('parrot');
  radio2.selected('tiger');
}

If you don't explicitly set the name then they both get the same name "radioOption".

Questions for the community:

  • Should we use a unique name for each createRadio so that this "just works" with no extra effort?
  • Should we use the radiogroup role on the <div>?
  • Should we use a <fieldset> instead of a <div>?

This is the HTML that is created by original code (without the name argument). IMO it can be improved.

<body>
    <main>
      <canvas id="defaultCanvas0" class="p5Canvas" width="100" height="100" style="width: 100px; height: 100px;"></canvas> 
    </main>
    <script src="blob:https://preview.p5js.org/d17e7ba2-41cb-4c1d-86e6-5aeb48737cb1"></script>
  
<div>
  <label>
    <input type="radio" value="car" name="radioOption">
    <span>car</span>
  </label>
  <label>
    <input type="radio" value="bicycle" name="radioOption" checked="true">
    <span>bicycle</span>
  </label>
  <label>
    <input type="radio" value="airplane" name="radioOption">
    <span>airplane</span>
  </label>
</div>
<div>
  <label>
    <input type="radio" value="tiger" name="radioOption" checked="true">
    <span>tiger</span>
  </label>
  <label>
    <input type="radio" value="elephant" name="radioOption">
    <span>elephant</span>
  </label>
  <label>
    <input type="radio" value="parrot" name="radioOption">
    <span>parrot</span>
  </label>
</div>
</body>

Both "bicycle" and "tiger" do have checked="true". The browser will not render both as checked since it is only valid to have one checked item in a radio select. The browser sees this as one single form field due to the name="radioOption" on all buttons and will only display one as checked.

@Hansterdam
Copy link
Author

Thank you, that works!
I agree that it working out-of-the-box would present as the most elegant solution, though I'm sure I don't have a full understanding of the context.
Currently the documentation also only talks about naming the radio button, but doesn't reflect the consequences of doing or not doing so, so that is already some low hanging fruit that could be addressed.

@Prateek-Fst
Copy link

Prateek-Fst commented Jan 24, 2024 •
edited
Loading

@lindapaiste @Qianqianye @limzykenneth @davepagurek I read the above issue mentioned by @Hansterdam and I would like to add more documentation for createradio() .In this instance would mention the consequences of not adding the name parameter and to better understand the importance of including the 'name' parameter, refer to https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio.
What are your thoughts on this should I go ahead and create an issue and PR for this .

@rupalchandak
Copy link

let myRadio;

function setup() {
// Create a radio button element and place it
// in the top-left corner.
myRadio = createRadio();
myRadio.position(0, 0);
myRadio.size(50);

// Add a few color options.
// Color values are labeled with
// emotions they evoke.
myRadio.option('red', 'love');
myRadio.option('yellow', 'joy');
myRadio.option('blue', 'trust');

// Choose a default option.
myRadio.selected('yellow');

describe('A yellow square with three options listed, "love", "joy", and "trust". The square changes color when the user selects a new option.');
}

function draw() {
// Set the background color using the radio button.
let c = myRadio.value();
background(c);
}

let c = myRadio.value();
background(c);
}

this may help you

@limzykenneth
Copy link
Member

  • Should we use a unique name for each createRadio so that this "just works" with no extra effort?
  • Should we use the radiogroup role on the <div>?
  • Should we use a <fieldset> instead of a <div>?

For me I think unique name is a bit too magical (but that may be just me).

For radiogroup and fieldset, the are largely functionally equivalent. I would prefer using fieldset instead just to have more semantic HTML where possible.

@samrudh3125
Copy link

Yes I thing we have to use a standard system for naming like [page]-rdbtn-1. The last number is to be incremented for multiple radiobutton in a single page

@subhra1jit
Copy link

Hey, I tried to solve the issue and make some changes to the code , the problem is that we are not assigning a unique name attribute to the radio buttons, which causes multiple createRadio buttons to act as a single group. At present, the name attribute value is assigned only if a value is passed while calling the function otherwise it takes the default value 'radioOption'.
self._name = name || 'radioOption';

For this I have provided one solution that is instead of radioOption as a default value we can generate a unique nameusing Math.random() function.
self._name =name || "radioButtonNumber-" + Math.random().toString(36).slice(2);

If any reviewer confirm that this is the right approach , I would be interested making this changes.

@Forchapeatl Forchapeatl mentioned this issue Aug 8, 2024
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
Area:DOM Bug
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Fix: Added unique group names for radio buttions Forchapeatl/p5.js
7 participants
@limzykenneth @Hansterdam @lindapaiste @samrudh3125 @subhra1jit @Prateek-Fst @rupalchandak