Fix misaligned tooltip positions in modal dialogs
This commit fixes a bug that causes tooltips to be slightly misaligned.
Tooltip positioning was incorrect during modal transitions due to their
initial movement, causing tooltips to align incorrectly at the start of
the animation rather than the end.
One way to solve this would be using `autoUpdate` from `floating-ui`
with `animationFrame: true`. However, this recalculates positions tens
of times per second, impacting performance. This is a monkey solution.
This commit adopts a more efficient approach by updating tooltip
positions only at the end of the transitions, which reduces calculations
and conserves resources.
Key changes:
- Addd transition end event listener for updating tooltip positions.
- Use throttling to eliminate excessive position recalculations.
Other supporting changes:
- Improve throttle function to support efficient recalculations of
positions:
- Add ability to optionally exclude the first execution (leading
call).
- Refactor to simplify it make it easier to follow and read.
- Fix a bug where initial calls were incorrectly throttled if
`dateNow()` returned `0`.
- Introduce and use a global hook for efficient DOM event management.
This greatily introduce safety, reuse and testability of event
listening.
This commit is contained in:
70
tests/shared/Spies/EventTargetSpy.ts
Normal file
70
tests/shared/Spies/EventTargetSpy.ts
Normal file
@@ -0,0 +1,70 @@
|
||||
export function createEventSpies(
|
||||
eventTarget: EventTarget,
|
||||
restoreCallback: (restoreFunc: () => void) => void,
|
||||
) {
|
||||
const originalAddEventListener = eventTarget.addEventListener;
|
||||
const originalRemoveEventListener = eventTarget.removeEventListener;
|
||||
|
||||
const currentListeners = new Array<Parameters<typeof eventTarget.addEventListener>>();
|
||||
|
||||
const addEventListenerCalls = new Array<Parameters<typeof eventTarget.addEventListener>>();
|
||||
const removeEventListenerCalls = new Array<Parameters<typeof eventTarget.removeEventListener>>();
|
||||
|
||||
eventTarget.addEventListener = (
|
||||
...args: Parameters<typeof eventTarget.addEventListener>
|
||||
): ReturnType<typeof eventTarget.addEventListener> => {
|
||||
addEventListenerCalls.push(args);
|
||||
currentListeners.push(args);
|
||||
return originalAddEventListener.call(eventTarget, ...args);
|
||||
};
|
||||
|
||||
eventTarget.removeEventListener = (
|
||||
...args: Parameters<typeof eventTarget.removeEventListener>
|
||||
): ReturnType<typeof eventTarget.removeEventListener> => {
|
||||
removeEventListenerCalls.push(args);
|
||||
const [type, listener] = args;
|
||||
const registeredListener = findCurrentListener(type, listener);
|
||||
if (registeredListener) {
|
||||
const index = currentListeners.indexOf(registeredListener);
|
||||
if (index > -1) {
|
||||
currentListeners.splice(index, 1);
|
||||
}
|
||||
}
|
||||
return originalRemoveEventListener.call(eventTarget, ...args);
|
||||
};
|
||||
|
||||
function findCurrentListener(
|
||||
type: string,
|
||||
listener: EventListenerOrEventListenerObject | null,
|
||||
): Parameters<typeof eventTarget.addEventListener> | undefined {
|
||||
return currentListeners.find((args) => {
|
||||
const [eventType, eventListener] = args;
|
||||
return eventType === type && listener === eventListener;
|
||||
});
|
||||
}
|
||||
|
||||
restoreCallback(() => {
|
||||
eventTarget.addEventListener = originalAddEventListener;
|
||||
eventTarget.removeEventListener = originalRemoveEventListener;
|
||||
});
|
||||
|
||||
return {
|
||||
isAddEventCalled(eventType: string): boolean {
|
||||
const call = addEventListenerCalls.find((args) => {
|
||||
const [type] = args;
|
||||
return type === eventType;
|
||||
});
|
||||
return call !== undefined;
|
||||
},
|
||||
isRemoveEventCalled(eventType: string) {
|
||||
const call = removeEventListenerCalls.find((args) => {
|
||||
const [type] = args;
|
||||
return type === eventType;
|
||||
});
|
||||
return call !== undefined;
|
||||
},
|
||||
formatListeners: () => {
|
||||
return JSON.stringify(currentListeners);
|
||||
},
|
||||
};
|
||||
}
|
||||
@@ -1,67 +0,0 @@
|
||||
export type EventName = keyof WindowEventMap;
|
||||
|
||||
export function createWindowEventSpies(restoreCallback: (restoreFunc: () => void) => void) {
|
||||
const originalAddEventListener = window.addEventListener;
|
||||
const originalRemoveEventListener = window.removeEventListener;
|
||||
|
||||
const currentListeners = new Array<Parameters<typeof window.addEventListener>>();
|
||||
|
||||
const addEventListenerCalls = new Array<Parameters<typeof window.addEventListener>>();
|
||||
const removeEventListenerCalls = new Array<Parameters<typeof window.removeEventListener>>();
|
||||
|
||||
window.addEventListener = (
|
||||
...args: Parameters<typeof window.addEventListener>
|
||||
): ReturnType<typeof window.addEventListener> => {
|
||||
addEventListenerCalls.push(args);
|
||||
currentListeners.push(args);
|
||||
return originalAddEventListener.call(window, ...args);
|
||||
};
|
||||
|
||||
window.removeEventListener = (
|
||||
...args: Parameters<typeof window.removeEventListener>
|
||||
): ReturnType<typeof window.removeEventListener> => {
|
||||
removeEventListenerCalls.push(args);
|
||||
const [type, listener] = args;
|
||||
const registeredListener = findCurrentListener(type as EventName, listener);
|
||||
if (registeredListener) {
|
||||
const index = currentListeners.indexOf(registeredListener);
|
||||
if (index > -1) {
|
||||
currentListeners.splice(index, 1);
|
||||
}
|
||||
}
|
||||
return originalRemoveEventListener.call(window, ...args);
|
||||
};
|
||||
|
||||
function findCurrentListener(
|
||||
type: EventName,
|
||||
listener: EventListenerOrEventListenerObject,
|
||||
): Parameters<typeof window.addEventListener> | undefined {
|
||||
return currentListeners.find((args) => {
|
||||
const [eventType, eventListener] = args;
|
||||
return eventType === type && listener === eventListener;
|
||||
});
|
||||
}
|
||||
|
||||
restoreCallback(() => {
|
||||
window.addEventListener = originalAddEventListener;
|
||||
window.removeEventListener = originalRemoveEventListener;
|
||||
});
|
||||
|
||||
return {
|
||||
isAddEventCalled(eventType: EventName): boolean {
|
||||
const call = addEventListenerCalls.find((args) => {
|
||||
const [type] = args;
|
||||
return type === eventType;
|
||||
});
|
||||
return call !== undefined;
|
||||
},
|
||||
isRemoveEventCalled(eventType: EventName) {
|
||||
const call = removeEventListenerCalls.find((args) => {
|
||||
const [type] = args;
|
||||
return type === eventType;
|
||||
});
|
||||
return call !== undefined;
|
||||
},
|
||||
currentListeners,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user