useRefocusableInput: handle HTMLElement

This change should be temporary, and it will allow us to use the
`useRefocusableInput` hook with ref objects and direct `HTMLElement`s.

packages/@headlessui-react/src/hooks/use-refocusable-input.ts

@@ -8,15 +8,19 @@ import { useEventListener } from './use-event-listener'
  * This hook will also keep the cursor position into account to make sure the
  * cursor is placed at the correct position as-if we didn't loose focus at all.
  */
-export function useRefocusableInput(ref: MutableRefObject<HTMLInputElement | null>) {
+export function useRefocusableInput(
+  ref: MutableRefObject<HTMLInputElement | null> | HTMLInputElement | null
+) {
   // Track the cursor position and the value of the input
   let info = useRef({
     value: '',
     selectionStart: null as number | null,
     selectionEnd: null as number | null,
   })
 
-  useEventListener(ref.current, 'blur', (event) => {
+  let element = ref === null ? null : ref instanceof HTMLInputElement ? ref : ref.current
+
+  useEventListener(element, 'blur', (event) => {
     let target = event.target
     if (!(target instanceof HTMLInputElement)) return
 
@@ -28,7 +32,7 @@ export function useRefocusableInput(ref: MutableRefObject<HTMLInputElement | nul
   })
 
   return useEvent(() => {
-    let input = ref.current
+    let input = ref === null ? null : ref instanceof HTMLInputElement ? ref : ref.current
 
     // If the input is already focused, we don't need to do anything
     if (document.activeElement === input) return