[READ-ONLY] a fast, modern browser for the npm registry
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix: prevent modal closing on inner clicks (#685)

Co-authored-by: Daniel Roe <daniel@roe.dev>

authored by

Chase Naples
Daniel Roe
and committed by
GitHub
17c4a750 779b239a

+19 -2
+19 -2
app/app.vue
··· 79 79 showKbdHints.value = false 80 80 } 81 81 82 - /* A hack to get light dismiss to work in safari because it does not support closedby="any" yet */ 82 + // Light dismiss fallback for browsers that don't support closedby="any" (Safari + old Chrome/Firefox) 83 83 // https://codepen.io/paramagicdev/pen/gbYompq 84 84 // see: https://github.com/npmx-dev/npmx.dev/pull/522#discussion_r2749978022 85 85 function handleModalLightDismiss(e: MouseEvent) { 86 86 const target = e.target as HTMLElement 87 87 if (target.tagName === 'DIALOG' && target.hasAttribute('open')) { 88 + const rect = target.getBoundingClientRect() 89 + const isOutside = 90 + e.clientX < rect.left || 91 + e.clientX > rect.right || 92 + e.clientY < rect.top || 93 + e.clientY > rect.bottom 94 + 95 + if (!isOutside) return 88 96 ;(target as HTMLDialogElement).close() 89 97 } 90 98 } ··· 92 100 if (import.meta.client) { 93 101 useEventListener(document, 'keydown', handleGlobalKeydown) 94 102 useEventListener(document, 'keyup', handleGlobalKeyup) 95 - useEventListener(document, 'click', handleModalLightDismiss) 103 + 104 + // Feature check for native light dismiss support via closedby="any" 105 + // https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby 106 + const supportsClosedBy = 107 + typeof HTMLDialogElement !== 'undefined' && 108 + typeof HTMLDialogElement.prototype === 'object' && 109 + 'closedBy' in HTMLDialogElement.prototype 110 + if (!supportsClosedBy) { 111 + useEventListener(document, 'click', handleModalLightDismiss) 112 + } 96 113 } 97 114 </script> 98 115