danvics/Pulse
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refine inline URL editor event handling

Browse source 
- Add double-checks in global click handlers to prevent race conditions
- Add isCurrentlyMounted flag to prevent cleanup during re-renders
- Remove onBlur handler that was causing premature editor closure
- Simplify conditional logic in click handlers

These changes improve the robustness of the inline editor when
websocket updates occur during editing sessions.
This commit is contained in:
rcourtman 2025-10-23 17:56:58 +00:00
parent 5de564d945
commit 30b78784e0
1 changed files with 12 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
frontend-modern/src/components/Dashboard/GuestRow.tsx
View file

@ -187,16 +187,22 @@ export function GuestRow(props: GuestRowProps) {
} }
}); });
// Track if we're currently editing to prevent cleanup during re-renders
let isCurrentlyMounted = true;
// Add global click handler to close editor and prevent clicks while editing // Add global click handler to close editor and prevent clicks while editing
createEffect(() => { createEffect(() => {
if (isEditingUrl()) { if (isEditingUrl() && isCurrentlyMounted) {
const handleGlobalClick = (e: MouseEvent) => { const handleGlobalClick = (e: MouseEvent) => {
// Double-check we're still the editing guest
if (currentlyEditingGuestId() !== guestId()) return;
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
// Allow clicking another guest name to switch editing // Allow clicking another guest name to switch editing
const isClickingGuestName = target.closest('[data-guest-name-editable]'); const isClickingGuestName = target.closest('[data-guest-name-editable]');
// If clicking outside the editor (and not another guest name), close it and prevent the click // If clicking outside the editor (and not another guest name), close it and prevent the click
if (!target.closest('[data-url-editor]') && !isClickingGuestName && currentlyEditingGuestId() === guestId()) { if (!target.closest('[data-url-editor]') && !isClickingGuestName) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
@ -205,10 +211,13 @@ export function GuestRow(props: GuestRowProps) {
}; };
const handleGlobalMouseDown = (e: MouseEvent) => { const handleGlobalMouseDown = (e: MouseEvent) => {
// Double-check we're still the editing guest
if (currentlyEditingGuestId() !== guestId()) return;
const target = e.target as HTMLElement; const target = e.target as HTMLElement;
const isClickingGuestName = target.closest('[data-guest-name-editable]'); const isClickingGuestName = target.closest('[data-guest-name-editable]');
if (!target.closest('[data-url-editor]') && !isClickingGuestName && currentlyEditingGuestId() === guestId()) { if (!target.closest('[data-url-editor]') && !isClickingGuestName) {
e.preventDefault(); e.preventDefault();
e.stopPropagation(); e.stopPropagation();
e.stopImmediatePropagation(); e.stopImmediatePropagation();
@ -453,13 +462,6 @@ export function GuestRow(props: GuestRowProps) {
editingValues.set(guestId(), e.currentTarget.value); editingValues.set(guestId(), e.currentTarget.value);
setEditingValuesVersion(v => v + 1); setEditingValuesVersion(v => v + 1);
}} }}
onBlur={(e) => {
// Close editor when clicking away, but not if clicking the save/delete buttons
const relatedTarget = e.relatedTarget as HTMLElement;
if (!relatedTarget || !relatedTarget.closest('[data-url-editor-button]')) {
cancelEditingUrl();
}
}}
onKeyDown={(e) => { onKeyDown={(e) => {
if (e.key === 'Enter') { if (e.key === 'Enter') {
e.preventDefault(); e.preventDefault();