make disabled button trigger onClick event in react

Question

I have a save button at the bottom of a react form. That button is like this:

<button type="button" onClick={saveHandler} disabled={disabled}>Save</button>

The disabled value is true whenever there is validation errors on the form, such as not filling in required fields.

I don't show the error messages on required fields unless you have focused on them, this way the form isn't littered with error messages right from the start.

If a user just jumps down to the bottom of the page, and clicks on the save button, but while it is disabled, I would like it to still call the saveHandler even if the button is disabled. In this case, I will make all the errors appear for the fields that weren't filled in.

Is there a way to make a disabled field trigger an onClick event when you click on it?

dave · Accepted Answer · 2021-09-03 00:16:21Z

6

You need some sort of wrapper, listen to the click event on the wrapper, and set pointer-events: none on the disabled buttons CSS (assuming you want this to work in Firefox, pretty sure it works even without it in Chrome). Not in react but to demonstrate:

document.getElementById('wrapper').addEventListener('click', function() { console.log('wrapper'); });
document.getElementById('button').addEventListener('click', function() { console.log('button'); });
document.getElementById('disabler').addEventListener('click', function() { document.getElementById('button').disabled = !document.getElementById('button').disabled});

[disabled] {
    pointer-events: none;
}

<label><input type="checkbox" checked id="disabler"/> Disabled</label>
<span id="wrapper"><button id="button" disabled>Click</button></span>

answered Sep 3, 2021 at 0:16

dave

65.1k6 gold badges81 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

make disabled button trigger onClick event in react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related