Repository navigation
[p5.js 2.0+ Bug Report]: createRadio().disable(false) does not re-enable radio inputs #9316
Description
Most appropriate sub-area of p5.js?
- Accessibility
- Color
- Core/Environment/Rendering
- Data
- DOM
- Events
- Image
- IO
- Math
- Typography
- Utilities
- WebGL
- WebGPU
- p5.strands
- Build process
- Unit testing
- Internationalization
- Friendly errors
- Other (specify if possible)
p5.js version
2.3.4
Web browser and version
firefox 157.0
Operating system
fedora
Steps to reproduce
- Open the p5.js Web Editor and select p5.js 2.3.4.
- Replace the sketch with the code below and run it.
- Wait one second for
radio.disable(false)to execute. - Observe that the radio buttons remain disabled and the status text reports
Still disabled? true.
Expected behavior
Calling radio.disable(false) should re-enable the radio inputs, allowing the user to select an option again.
Actual behavior
The radio inputs remain disabled after radio.disable(false) is called.
The console shows that both inputs still have disabled === true, and their disabled attributes remain present with the string value "false".
Snippet
let radio;
let statusText;
function setup() {
createCanvas(400, 120);
radio = createRadio();
radio.option('red');
radio.option('blue');
radio.position(20, 40);
statusText = createP('Disabling radio buttons...');
statusText.position(20, 65);
radio.disable(true);
setTimeout(() => {
radio.disable(false);
const inputs = radio._getOptionsArray();
const stillDisabled = inputs.every(input => input.disabled);
statusText.html(
'Called disable(false). Still disabled? ' + stillDisabled
);
console.log(
'Disabled properties:',
inputs.map(input => input.disabled)
);
console.log(
'Disabled attributes:',
inputs.map(input => input.getAttribute('disabled'))
);
}, 1000);
}
function draw() {
background(240);
}Screenshot
Additional context
The behavior appears to be caused by setting the HTML disabled attribute to a boolean value rather than updating the input's disabled state. HTML boolean attributes are enabled by their presence, regardless of the string value assigned to them.
The relevant implementation is in src/dom/dom.js, in self.disable, which iterates over the radio inputs and calls radioInput.setAttribute('disabled', shouldDisable).
A possible fix is to assign radioInput.disabled = shouldDisable, or otherwise remove the attribute when shouldDisable is false.
The reproduction was tested in the p5.js Web Editor using p5.js 2.3.4.
Activity
MYMISERABLEMIND17 commentedon Oct 22, 2026
Hey! I looked into this. In
src/dom/dom.js,self.disablewas callingradioInput.setAttribute('disabled', shouldDisable). When passingfalse, setting attributedisabled="false"still leaves the HTML boolean attribute present (so the browser still treats it as disabled) and does not update theradioInput.disabledDOM property.I updated
self.disableto toggleradioInput.disabled = Boolean(shouldDisable)and properly add/remove thedisabledattribute (removeAttribute('disabled')onfalse). I also added unit tests intest/unit/dom/dom.jsverifying thatdisable(false)clears the attribute and setsdisabled = false. All 118 DOM unit tests and linter pass cleanly.Could you please assign this issue to me so I can open the PR? Thanks!
MYMISERABLEMIND17 commentedon Oct 23, 2026
any update ?
slash-init commentedon Oct 23, 2026
@MYMISERABLEMIND17 Thanks! Please wait for a maintainer to assign the issue to you before getting started.
MYMISERABLEMIND17 commentedon Oct 23, 2026
thanks
okay
fix: use DOM property for radio disable to support re-enabling
aryanb1906 commentedon Oct 26, 2026
I've submitted a PR fixing this: #9338. The issue is that setAttribute('disabled', false) keeps the attribute present (HTML boolean attributes are active regardless of their value). Switching to the DOM property (radioInput.disabled = shouldDisable) fixes it.