Disabled buttons where the 'disabled' attribute is set after the button is created are clickable in Firefox (raw Calcite)

[nCastle1]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Calcite buttons (and other controls, like Checkbox) that have been disabled with the disabled property still fire onclick events.

Expected Behavior

Calcite buttons and other components should suppress the onclick event when the control is disabled.

Reproduction Sample

Gist (I don't have a codepen account)

It's pretty simple though:

<calcite-button id="abc" onclick="alert()">Test button</calcite-button>

<calcite-button onclick="document.getElementById('abc').setAttribute('disabled', 'true')">Disable other button</calcite-button>

Reproduction Steps

1. Click the 'disable other button' button and notice that the other button becomes disabled
2. Click the disabled button, and notice that the onclick event fires

Reproduction Version

2.4.0

Relevant Info

Observed in Firefox on Mac.

I believe an earlier issue with firefox buttons not honoring the 'disabled' property was partially addressed in this PR: https://github.com/Esri/calcite-design-system/pull/7107/files.

I played around with a local build and have a PR that appears to fix the problem, but this was made to satisfy my curiosity and is more of a proof of concept than a merge-worthy PR.

There is another issue filed specifically for React that I suspect shares a root cause with this issue, but I don't know. #8203

Regression?

No response

Priority impact

p3 - want for upcoming milestone

Impact

The ArcGIS Maps SDK uses Calcite Components in quite a few widgets. The workaround (check disabled state within the event handler) is straightforward, but will have to be done in several places.

Because the code for implementing the current Firefox disablement fix is shared between several components, several components are likely impacted. I only checked Checkbox and Button.

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[jcfranco]

Thanks for reporting this. It looks like we might be able to drop the FF-specific workaround as v116 is covered by FF ESR (v115+). Local testing looks good for both #7043 and this use case (codepen).

[nCastle1]

I tested the fix in the linked PR and it works as expected in Maps SDK for JS with Firefox v122. Thank you!

[jcfranco]

@nCastle1 No, thank you for the detailed description and quickly testing the fix. We really appreciate it! 🙌

[jcfranco]

Thanks for reporting this. It looks like we might be able to drop the FF-specific workaround as v116 is covered by FF ESR (v115+). Local testing looks good for both #7043 and this use case (codepen).

Apparently, I can't math in the evening. 😅 We'll have to wait until the next ESR update to install this, so 116 is covered. According to https://whattrainisitnow.com/calendar/, it looks like July 9th this year.

I'll provide an alternative solution for this. Sorry for the hassle!

[dasa]

According to whattrainisitnow.com/calendar, it looks like July 9th this year.

Existing ESR users won't be offered the upgrade to 128 until 128.3 on October 1st.

[jcfranco]

@dasa Why you gotta kick a dev when they're down?🦿😭 lol

Serious talk, thanks for clarifying. Will update my linked PR.

[jcfranco]

@dasa Sharing our convo for posterity, the ESR will be available for upgrade at version X.2.0, so our upgrade date is now September 3rd.

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in Firefox with 2.5.0-next.4 and https://codepen.io/geospatialem/pen/JjzwvqV.