fix(web): clicking away closes context menu

[ben-basten]

Description

Fixes #16147

Using "click" event handler to detect whether there's been a click outside of the context menu, rather than the "mousedown" event in the use:clickOutside Svelte action.

The cause?

This bug was likely introduced in #15900, where the clickOutside listener changed was changed from "click" to "mousedown".

The asset viewer page uses the @zoom-image/svelte library to handle zooming, which listens for "pointerdown" events and uses event.preventDefault to override default behavior. According to the MDN docs for PointerEvent, this stops the mouse events from firing and therefore breaks the clicking outside behavior in Immich.

How Has This Been Tested?

1. Navigate to the asset viewer
2. Open the context menu with the ellipses "..." button in the top right to open the context menu
3. Click away to test that the context menu closes

Checklist:

• I have performed a self-review of my own code
• I have made corresponding changes to the documentation if applicable
• I have no unrelated changes in the PR.
• I have confirmed that any new dependencies are strictly necessary.
• I have written tests for new code (if applicable)
• I have followed naming conventions/patterns in the surrounding code

[mertalev]

Is there a way to fix this and still avoid making a mouse up outside the modal dismiss the modal, as #15900 does?

[ben-basten]

Is there a way to fix this and still avoid making a mouse up outside the modal dismiss the modal, as #15900 does?

Looks like there is, thanks for the poke to make a better fix. Using the pointerdown event directly works.

I'll do some more testing on mobile vs desktop to make sure it's looking ok.

[ben-basten]

Is there a way to fix this and still avoid making a mouse up outside the modal dismiss the modal, as #15900 does?

Hey @mertalev, this PR maintains the mouseup fix from #15900. Rather than changing the use:clickOutside logic that determines whether UI elements like the modal should be closed, I implemented a custom click handler that only the context menu uses. The modal is unaffected by this change.

Using the pointerdown event directly works.

I'll do some more testing on mobile vs desktop to make sure it's looking ok.

I've decided to revert the simpler fix of using the pointerdown event (0d2cf47) after doing some testing with an iPad. I found that specifically for touch devices, this caused an issue where tapping outside of a modal to close it could click elements underneath the modal before it's dismissed.

[github-actions]

Deploying preview environment to https://pr-16989.preview.internal.immich.cloud/