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

fix: ensure mouse events are blocked for disabled components in Firefox #7107

Merged
merged 8 commits into from
Jun 16, 2023
Merged

fix: ensure mouse events are blocked for disabled components in Firefox #7107

merged 8 commits into from
Jun 16, 2023

Conversation

jcfranco
Copy link
Member

@jcfranco jcfranco commented Jun 2, 2023 •
edited
Loading

Related Issue: #7043

Summary

This applies a workaround for Firefox not firing capture events before non-capture ones to block mouse events when components are disabled.

Notable changes

  • added connectInteractive/disconnectInteractive utils, solely to support Firefox
  • moved user agent utils to browser.ts

Additional info

@jcfranco jcfranco requested a review from a team as a code owner June 2, 2023 22:59
@github-actions github-actions bot added the bug Bug reports for broken functionality. Issues should include a reproduction of the bug. label Jun 2, 2023
@github-actions
Copy link
Contributor

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

@github-actions github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jun 10, 2023
@jcfranco jcfranco removed the Stale Issues or pull requests that have not had recent activity. label Jun 14, 2023
@jcfranco jcfranco added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Jun 15, 2023
driskull
driskull approved these changes Jun 15, 2023
View reviewed changes
Copy link
Member

@driskull driskull left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 👍

packages/calcite-components/src/utils/interactive.ts
@@ -104,3 +121,76 @@ export function updateHostInteraction(

component.el.removeAttribute("aria-disabled");
}

function blockInteraction(component: InteractiveComponent): void {
component.el.click = interceptedClick;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is there any chance a user could already have a click property on an el?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Only if they're also hijacking HTMLElement.click for some magical purposes. We can revisit this if users report odd behavior.

packages/calcite-components/src/utils/interactive.ts
@@ -24,6 +26,15 @@ type HostIsTabbablePredicate = () => boolean;
*/
export type InteractiveHTMLElement = HTMLElement & Pick<InteractiveComponent, "disabled">;

// ⚠️ browser-sniffing is not a best practice and should be avoided ⚠️
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍

packages/calcite-components/src/utils/interactive.ts
}

const parent =
component.el.parentElement || component.el; /* assume element is host if it has no parent when connected */
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

would getShadowRootNode() help here?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It would help for sure, but I wanted to keep it simple since I only need to check for the parent or the host. Worth noting that most of these changes will be dropped once Firefox ESR is bumped to a version matching 116+. 🎉

@jcfranco jcfranco added pr ready for visual snapshots Adding this label will run visual snapshot testing. and removed pr ready for visual snapshots Adding this label will run visual snapshot testing. labels Jun 16, 2023
@jcfranco jcfranco merged commit 271d985 into master Jun 16, 2023
@jcfranco jcfranco deleted the jcfranco/7043-ensure-mouse-events-are-blocked-for-disabled-components-in-firefox branch June 16, 2023 18:27
@github-actions github-actions bot added this to the 2023 June patch priorities milestone Jun 16, 2023
@calcite-admin calcite-admin mentioned this pull request Jun 16, 2023
Merged
benelan added a commit that referenced this pull request Jun 27, 2023
@calcite-admin @github-actions @benelan
chore: release latest (#7144)
2422120 
🤖 I have created a release *beep* *boop*
---


<details><summary>@esri/calcite-components: 1.4.3</summary>

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components@1.4.2...@esri/calcite-components@1.4.3)
(2023-06-26)

### Bug Fixes

* **accordion-item:** support items working across shadowDOM ([#7035](#7035)) ([6378e35](6378e35)), closes [#6167](#6167)
* **alert:** Sets autoCloseDuration to "medium" by default
([#7157](#7157))
([1b9a8ed](1b9a8ed))
* **alert:** Update alert queue when an alert is removed from the DOM
([#7189](#7189))
([edd59eb](edd59eb))
* **combobox, dropdown, input-date-picker, input-time-picker, popover,
tooltip:** Prevent repositioning from affecting other floating
components
([#7178](#7178))
([1b02dae](1b02dae))
* Ensure mouse events are blocked for disabled components in Firefox
([#7107](#7107))
([271d985](271d985))
* **input-date-picker:** Fix showing the placeholder when resetting the
value ([#7156](#7156))
([8d60ffd](8d60ffd))
* **input, input-number:** Allows numeric characters.
([#7213](#7213))
([739f0af](739f0af))
* **input,input-number:** Allow typing decimal separator in firefox for
arabic locale
([#7173](#7173))
([595e6f2](595e6f2))
* **list:** No longer has incorrect border width
([a810943](a810943))
* **list:** Update selectedItems property on all item selection changes
([#7204](#7204))
([da048f6](da048f6))
* **menu-item:** Ensure correct order of rendered icons ([#7098](#7098)) ([fd344e9](fd344e9)), closes [#7097](#7097)

* **navigation:** Label is no longer a required property
([#7084](#7084))
([ba2bd4d](ba2bd4d))
* **radio-button-group:** No longer focus first radio button on label
click and adds `setFocus` method.
([#7050](#7050))
([4267b8c](4267b8c))
* **radio-button, radio-button-group:** Prevent emitting events when
selecting a checked radio button
([#7102](#7102))
([77fcc81](77fcc81))
* **radio-button:** Focuses first focusable radio-button element in
group. ([#7152](#7152))
([dd7ec60](dd7ec60))
* **scrim:** Responsively set the scale of the loading spinner
([#7182](#7182))
([72c5943](72c5943))
* **tooltip:** Improve component timing
([#7172](#7172))
([106f5d2](106f5d2))
* **tree-item:** Ensure expanded tree-item is displayed when expanded
and made visible
([#7216](#7216))
([3c0fbf5](3c0fbf5))

<details><summary>@esri/calcite-components-react: 1.4.3</summary>

##
[1.4.3](https://github.com/Esri/calcite-components/compare/@esri/calcite-components-react@1.4.2...@esri/calcite-components-react@1.4.3)
(2023-06-26)


### Miscellaneous Chores

* **@esri/calcite-components-react:** Synchronize undefined versions


### Dependencies

* The following workspace dependencies were updated
  * dependencies
    * @esri/calcite-components bumped from 1.4.3-next.7 to 1.4.3
</details>

---
This PR was generated with [Release
Please](https://github.com/googleapis/release-please). See
[documentation](https://github.com/googleapis/release-please#release-please).

---------

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: Ben Elan <no-reply@benelan.dev>
@jcfranco jcfranco mentioned this pull request Feb 13, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@driskull driskull driskull approved these changes

Assignees

@jcfranco jcfranco

Labels
bug Bug reports for broken functionality. Issues should include a reproduction of the bug. pr ready for visual snapshots Adding this label will run visual snapshot testing.
Projects
None yet
Milestone
2023 June patch priorities
Development

Successfully merging this pull request may close these issues.
2 participants
@jcfranco @driskull