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:
parent
5de564d945
commit
30b78784e0
1 changed files with 12 additions and 10 deletions
|
|
@ -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();
|
||||
|
|
|
|||
Loading…
Reference in a new issue