-
Notifications
You must be signed in to change notification settings - Fork 75
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.
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
UI that cancels click
events prevents popovers from auto-closing
#9013
Comments
This issue is currently blocking us from adopting 2.7+ in field-maps-designer. Over the last 5+ yrs of development, we have accumulated a number of Maybe we could find better solutions than doing |
@nwhittaker @timmorey Apologies for the delayed response. We are exploring alternative solutions and potential workarounds. Worst-case scenario, we may need to revert #8983 for the upcoming release and aim to reinstall in May. It's important to note that we want all components to use the target/bubbling event phase for consistency and to meet developer expectations. Currently, relying on the capture phase is problematic as it complicates other fixes we need to implement.
Agreed. It'll take some effort to re-evaluate |
@jcfranco is it possible to make a distinction: Events targeting elements inside a Calcite shadow-dom vs. events targeting elements outside a Calcite shadow-dom? Where the former events use bubbling and the latter use capturing? Alternatively, is going back to pointer events1 for these types of "outside click" handlers an option? It's not perfect, but might be less likely to conflict with developer flows that are listening for mouse events. Footnotes |
I could be missing something, but this might not help with eventing expectation concern. It'll be simpler to use the same phase. Component composition might also make this tricky as the targeted component could be used within either light or shadow DOM.
I'd like to keep Workaround-wise, would it be possible to set up something like the following into your environments? The key parts of the workaround are:
|
My point was there could be a distinction between events that can be canceled and ones that cannot (e.g. outside clicks). For the ones that cannot, they should be listened for in the capture phase to mitigate cancelation. There's the added complexity of checking for disabled reference elements, but it's with significant benefit to the consumer.
Wondering what you're thinking of here because the event's
I did address this in the issue description. As a general workaround, it fails for the case where I have other Ideally the outside-click handling just works without impact to the consumer code. Workarounds aside, I guess I'm left wondering what are the technical blockers that make that not achievable? |
Hi, this issue effects the click event in ArcGIS Experience Builder Shadow cast tool. This is also reproducible with a plain Calcite app. Here's a simple app which reproduces the problem. |
I meant to follow up on this sooner, but we are not considering this a regression and will proceed to close for the following reasons:
I synced up with @nwhittaker a while back, and their team will pursue an app-level workaround. Not sure if the approach is ready to be shared at this time. @wei8123 In your example, the |
Here's our current working workaround. I don't know how comprehensive it is, but it seems to work well so far. The basic approach is to create a EDIT: To clarify, this workaround only takes effect once the target is open. It does not endeavor to guess whether or not stopping the opening event was intended to prevent the target from opening, or to stop something else. https://gist.github.com/nwhittaker/e07e4e0ec4dfb0ec0a52a1fe98dfff30 |
Thanks for sharing your workaround @nwhittaker! Closing per #9013 (comment). |
ExB has a complex layout system. In the builder, we need to stop the propagation of click events when selecting a widget. And the workaround seems not work in ExB, do we miss something? |
Hi @jcfranco, as @qlqllu mentioned above, executing this workaround file in EXB's |
@jcfranco We call the Here are more details on why we need to stop event propagation. ExB supports nested layout structure. For example, we can add a Button widget inside a Fix panel widget, and both of these widgets need to be selected. So, when the user clicks the Button widget to select it, we have to stop the click event propagation because if not, the user will select the Fix panel widget. |
Hi @jcfranco, Thanks! |
I added a demo to show our specific issue: @jcfranco stopPropagationForCalcite.mp4
|
@ruantao1989 If you're able to redirect fake clicks to window without any issue, you could apply a modified version of on of the earlier workarounds: document.querySelector("#container").addEventListener("click", (e) => {
e.stopPropagation();
// workaround: redirect a fake click event to window for popover to listen to
const fakeEvent = new CustomEvent("click", { detail: 1 });
fakeEvent.composedPath = () => [e.target];
window.dispatchEvent(fakeEvent);
}); See updated demo. |
@jcfranco The fake event workaround works. However, I think this solution does not seem very clean, and it may have side effects if an app code listens to the click events on the window. Whenever an app stops the event propagation, it may have this issue and need to find this workaround solution. I still prefer the "capture" phase solution. Nevertheless, thanks for helping figure out this workaround! |
@qlqllu Glad to hear the workaround will work for you. Regarding your other concerns, please refer to point 3 in the above discussion. |
Check existing issues
Actual Behavior
Given a popover with
auto-close
enabled, clicking an element that prevents propagation of theclick
event causes the popover to remain open.Expected Behavior
Clicking an element that prevents propagation of the
click
event does not cause the popover to remain open.Reproduction Sample
https://codepen.io/nwhittaker-esri/pen/MWRvPzQ
Reproduction Steps
Reproduction Version
2.7.0
Relevant Info
Possibly regressed by #8983. Is it possible to restore the handler to the
capture
phase and inspect the event's target there to see if it'sdisabled
oraria-disabled
instead?Other components that exhibit the same regressed behavior:
combobox
,dropdown
, andinput-time-zone
.Regression?
2.6.0
Priority impact
p2 - want for current milestone
Impact
This change in behavior is breaking our tests in ways that are not easily solvable and preventing us from upgrading to Calcite 2.7. Going forward, it also prevents us from implementing UI with any sort of
click
cancelation.A workaround could be to have our handlers relay a new
click
event to thewindow
, but that doesn't solve the problem where the cancelation was intended to prevent bubbling up to another handler that is also on thewindow
.Calcite package
Esri team
ArcGIS Field Apps
The text was updated successfully, but these errors were encountered: