Skip to content

Fix: Prevent dialog from closing immediately when opened by toolbar The issue was that the click event opening the dialog was also being caught by the 'click outside' handler, causing the dialog to close immediately after opening, especially for logged-out users. This commit refactors the event listener logic in Dialogues/index.tsx: - The mousedown event listener for handleClickOutside is now conditionally added to the document only when the dialog (isOpen) is true. - The listener is removed when the dialog is closed or the component unmounts. - The useEffect hook managing this now depends on isOpen and toggle to correctly add/remove the listener when the dialog state changes. - Removed the previous setTimeout workaround as this conditional binding approach is cleaner and more reliable. - Retained the safeguard in handleClickOutside to only call toggle(false) if state is not already false.#38

Merged
ProLoser merged 3 commits intomainfrom
fix/dialogue-immediate-close
Jun 12, 2025

Conversation

@ProLoser
Copy link
Owner

No description provided.

The issue was that the click event opening the dialog was also being
caught by the 'click outside' handler, causing the dialog to close
immediately after opening, especially for logged-out users.

This commit refactors the event listener logic in `Dialogues/index.tsx`:
- The `mousedown` event listener for `handleClickOutside` is now
  conditionally added to the document only when the dialog (`isOpen`)
  is true.
- The listener is removed when the dialog is closed or the component
  unmounts.
- The `useEffect` hook managing this now depends on `isOpen` and `toggle`
  to correctly add/remove the listener when the dialog state changes.
- Removed the previous `setTimeout` workaround as this conditional
  binding approach is cleaner and more reliable.
- Retained the safeguard in `handleClickOutside` to only call `toggle(false)`
  if `state` is not already `false`.
This commit ensures the fix for the dialog closing immediately
when opened by the toolbar is correctly implemented.

The `mousedown` event listener (`handleClickOutside`) in
`Dialogues/index.tsx` is now strictly added to the document only
when the dialog (`isOpen`) is true. It's removed when the dialog
is closed or the component unmounts.

This replaces any previous attempts using `setTimeout` and directly
addresses the issue of the opening click being caught by the
outside click handler.

- Conditional `addEventListener` based on `isOpen`.
- `useEffect` dependencies correctly set to `[isOpen, toggle]`.
- `if (state !== false)` safeguard remains in `handleClickOutside`.
This commit updates the dialog closure logic in `Dialogues/index.tsx`.

Key changes:
- The `mousedown` event listener (`handleClickOutside`) is conditionally
  added to the document only when the dialog (`isOpen`) is true and
  removed when the dialog is closed or unmounts.
- Removed the `if (state !== false)` check within `handleClickOutside`
  for simplification, as the listener's conditional attachment
  already provides the necessary context.

This should resolve the issue of the dialog closing immediately after
opening and streamlines the click-outside detection logic.
@ProLoser ProLoser merged commit 51a9f63 into main Jun 12, 2025
1 check failed
@ProLoser ProLoser deleted the fix/dialogue-immediate-close branch June 12, 2025 15:38
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant