fix(hono-jsx): make ref unrequried for forward ref (#2715)

honojs · May 19, 2024 · ba644d4 · ba644d4
1 parent ee9ccf8
commit ba644d4
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 4 deletions.
diff --git a/deno_dist/jsx/hooks/index.ts b/deno_dist/jsx/hooks/index.ts
@@ -370,8 +370,8 @@ export const createRef = <T>(): RefObject<T> => {
 }
 
 export const forwardRef = <T, P = {}>(
-  Component: (props: P, ref: RefObject<T>) => JSX.Element
-): ((props: P & { ref: RefObject<T> }) => JSX.Element) => {
+  Component: (props: P, ref?: RefObject<T>) => JSX.Element
+): ((props: P & { ref?: RefObject<T> }) => JSX.Element) => {
   return (props) => {
     const { ref, ...rest } = props
     return Component(rest as P, ref)

diff --git a/src/jsx/hooks/dom.test.tsx b/src/jsx/hooks/dom.test.tsx
@@ -497,6 +497,14 @@ describe('Hooks', () => {
       expect(root.innerHTML).toBe('<div></div>')
       expect(ref.current).toBeInstanceOf(HTMLElement)
     })
+
+    it('can run without ref', () => {
+      const App = forwardRef((props) => {
+        return <div {...props} />
+      })
+      render(<App />, root)
+      expect(root.innerHTML).toBe('<div></div>')
+    })
   })
 
   describe('useImperativeHandle()', () => {

diff --git a/src/jsx/hooks/index.ts b/src/jsx/hooks/index.ts
@@ -370,8 +370,8 @@ export const createRef = <T>(): RefObject<T> => {
 }
 
 export const forwardRef = <T, P = {}>(
-  Component: (props: P, ref: RefObject<T>) => JSX.Element
-): ((props: P & { ref: RefObject<T> }) => JSX.Element) => {
+  Component: (props: P, ref?: RefObject<T>) => JSX.Element
+): ((props: P & { ref?: RefObject<T> }) => JSX.Element) => {
   return (props) => {
     const { ref, ...rest } = props
     return Component(rest as P, ref)