Refine inline URL editor event handling

- 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

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
createEffect(() => {
if (isEditingUrl()) {
if (isEditingUrl() && isCurrentlyMounted) {
const handleGlobalClick = (e: MouseEvent) => {
// Double-check we're still the editing guest
if (currentlyEditingGuestId() !== guestId()) return;
const target = e.target as HTMLElement;
// Allow clicking another guest name to switch editing
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 (!target.closest('[data-url-editor]') && !isClickingGuestName && currentlyEditingGuestId() === guestId()) {
if (!target.closest('[data-url-editor]') && !isClickingGuestName) {
e.preventDefault();
e.stopPropagation();
e.stopImmediatePropagation();
@ -205,10 +211,13 @@ export function GuestRow(props: GuestRowProps) {
};
const handleGlobalMouseDown = (e: MouseEvent) => {
// Double-check we're still the editing guest
if (currentlyEditingGuestId() !== guestId()) return;
const target = e.target as HTMLElement;
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.stopPropagation();
e.stopImmediatePropagation();
@ -453,13 +462,6 @@ export function GuestRow(props: GuestRowProps) {
editingValues.set(guestId(), e.currentTarget.value);
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) => {
if (e.key === 'Enter') {
e.preventDefault();