monkee.ch/monkeeShark
1
0
Fork 0
Code Pull requests Activity

fix(frontend): ツールチップが永久にDOMに残ることがある問題を修正

Browse source 
#10805
This commit is contained in:
syuilo 2023-05-15 14:29:35 +09:00
parent f4e6d73a8a
commit 60f504bbe2
2 changed files with 15 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/frontend/src/components/MkTooltip.vue
View file

@ -41,6 +41,9 @@ const emit = defineEmits<{
(ev: 'closed'): void; (ev: 'closed'): void;
}>(); }>();
// タイミングによっては最初から showing = false な場合があり、その場合に closed 扱いにしないと永久にDOMに残ることになる
if (!props.showing) emit('closed');
const el = shallowRef<HTMLElement>(); const el = shallowRef<HTMLElement>();
const zIndex = os.claimZIndex('high'); const zIndex = os.claimZIndex('high');

12
packages/frontend/src/directives/tooltip.ts
View file

@ -5,7 +5,7 @@ import { defineAsyncComponent, Directive, ref } from 'vue';
import { isTouchUsing } from '@/scripts/touch'; import { isTouchUsing } from '@/scripts/touch';
import { popup, alert } from '@/os'; import { popup, alert } from '@/os';
const start = isTouchUsing ? 'touchstart' : 'mouseover'; const start = isTouchUsing ? 'touchstart' : 'mouseenter';
const end = isTouchUsing ? 'touchend' : 'mouseleave'; const end = isTouchUsing ? 'touchend' : 'mouseleave';
export default { export default {
@ -63,16 +63,24 @@ export default {
ev.preventDefault(); ev.preventDefault();
}); });
el.addEventListener(start, () => { el.addEventListener(start, (ev) => {
window.clearTimeout(self.showTimer); window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer); window.clearTimeout(self.hideTimer);
if (delay === 0) {
self.show();
} else {
self.showTimer = window.setTimeout(self.show, delay); self.showTimer = window.setTimeout(self.show, delay);
}
}, { passive: true }); }, { passive: true });
el.addEventListener(end, () => { el.addEventListener(end, () => {
window.clearTimeout(self.showTimer); window.clearTimeout(self.showTimer);
window.clearTimeout(self.hideTimer); window.clearTimeout(self.hideTimer);
if (delay === 0) {
self.close();
} else {
self.hideTimer = window.setTimeout(self.close, delay); self.hideTimer = window.setTimeout(self.close, delay);
}
}, { passive: true }); }, { passive: true });
el.addEventListener('click', () => { el.addEventListener('click', () => {