Use react event delegation for UJS

This fixes issues with react portals that are rendered outside the mounted component. By using an onclick on a div that houses the component, we can capture child events even if they are rendered outside.
thoughtbot · Dec 12, 2024 · 89640aa · 89640aa
1 parent b33b7f6
commit 89640aa
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 39 deletions.
diff --git a/superglue/lib/index.tsx b/superglue/lib/index.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo } from 'react'
+import React, { useRef, useMemo } from 'react'
 import parse from 'url-parse'
 import { config } from './config'
 import { urlToPageKey, ujsHandlers, argsForHistory } from './utils'
@@ -100,58 +100,53 @@ function Application({
   buildVisitAndRemote,
   history,
   mapping,
-  appEl,
+  ...rest
 }: ApplicationProps) {
   const navigatorRef = useRef<{ navigateTo: NavigateTo }>(null)
 
-  const { visit, remote, nextHistory, connectedMapping, initialPageKey } =
+  const { visit, remote, nextHistory, connectedMapping, initialPageKey, ujs } =
     useMemo(() => {
       config.baseUrl = baseUrl
 
+      const {visit, remote} =  buildVisitAndRemote(navigatorRef, store)
+
       const initialPageKey = urlToPageKey(parse(path).href)
       const nextHistory = history || createHistory()
       nextHistory.replace(...argsForHistory(path))
       prepareStore(store, initialPage, path)
 
+      const handlers = ujsHandlers({
+        visit,
+        remote,
+        ujsAttributePrefix: 'data-sg',
+        store,
+      })
+
       return {
-        ...buildVisitAndRemote(navigatorRef, store),
+        visit,
+        remote,
         connectedMapping: connectMapping(mapping),
         nextHistory,
         initialPageKey,
+        ujs: handlers
       }
     }, [])
-
-  useEffect(() => {
-    const handlers = ujsHandlers({
-      visit,
-      remote,
-      ujsAttributePrefix: 'data-sg',
-      store,
-    })
-
-    const { onClick, onSubmit } = handlers
-    appEl.addEventListener('click', onClick)
-    appEl.addEventListener('submit', onSubmit)
-
-    return () => {
-      appEl.removeEventListener('click', onClick)
-      appEl.removeEventListener('submit', onSubmit)
-    }
-  }, [])
-
+
   // The Nav component is pretty bare and can be inherited from for custom
   // behavior or replaced with your own.
   return (
-    <Provider store={store}>
-      <NavigationProvider
-        ref={navigatorRef}
-        visit={visit}
-        remote={remote}
-        mapping={connectedMapping}
-        history={nextHistory}
-        initialPageKey={initialPageKey}
-      />
-    </Provider>
+    <div onClick={ujs.onClick} onSubmit={ujs.onSubmit} {...rest}>
+      <Provider store={store}>
+        <NavigationProvider
+          ref={navigatorRef}
+          visit={visit}
+          remote={remote}
+          mapping={connectedMapping}
+          history={nextHistory}
+          initialPageKey={initialPageKey}
+        />
+      </Provider>
+    </div>
   )
 }
 

diff --git a/superglue/lib/types/index.ts b/superglue/lib/types/index.ts
@@ -334,8 +334,8 @@ export type SuperglueStore = EnhancedStore<
 >
 
 export interface Handlers {
-  onClick: (event: MouseEvent) => void
-  onSubmit: (event: Event) => void
+  onClick: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void
+  onSubmit: (event: React.FormEvent<HTMLDivElement>) => void
 }
 
 export type UJSHandlers = ({

diff --git a/superglue/lib/utils/ujs.ts b/superglue/lib/utils/ujs.ts
@@ -45,9 +45,11 @@ export class HandlerBuilder {
     }
   }
 
-  isNonStandardClick(event: MouseEvent): boolean {
+  isNonStandardClick(
+    event: React.MouseEvent<HTMLDivElement, MouseEvent>
+  ): boolean {
     return (
-      event.which > 1 ||
+      event.button > 0 ||
       event.metaKey ||
       event.ctrlKey ||
       event.shiftKey ||
@@ -62,7 +64,7 @@ export class HandlerBuilder {
     return hasVisit || hasRemote
   }
 
-  handleSubmit(event: Event): void {
+  handleSubmit(event: React.FormEvent<HTMLDivElement>): void {
     const form = event.target
 
     if (!(form instanceof HTMLFormElement)) {
@@ -89,7 +91,7 @@ export class HandlerBuilder {
     })
   }
 
-  handleClick(event: MouseEvent): void {
+  handleClick(event: React.MouseEvent<HTMLDivElement, MouseEvent>): void {
     if (!(event.target instanceof Element)) {
       return
     }