Fix throw "cannot read property of undefined" error on vue >=3.2.34 (#34)

ycs77 · web-flow · commit c9dcc57cdda9 · 2022-12-10T22:40:35.000+08:00
diff --git a/examples/example-react-ts/package.json b/examples/example-react-ts/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@headlessui-float/react": "*",
-    "@headlessui/react": "^1.7.0",
+    "@headlessui/react": "^1.7.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tailwindcss": "^3.0.23"
diff --git a/examples/example-react-ts/src/components/ExampleCombobox.tsx b/examples/example-react-ts/src/components/ExampleCombobox.tsx
@@ -45,7 +45,7 @@ export default function ExampleCombobox() {
           <div className="relative w-full text-left bg-white border border-gray-200 rounded-lg shadow-md cursor-default focus:outline-none sm:text-sm overflow-hidden">
             <Combobox.Input
               className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:outline-none focus:ring-0"
-              displayValue={(person: any) => person.name}
+              displayValue={(person: any) => person?.name}
               onChange={event => setQuery(event.target.value)}
             />
 
diff --git a/examples/example-react/package.json b/examples/example-react/package.json
@@ -9,7 +9,7 @@
   },
   "dependencies": {
     "@headlessui-float/react": "*",
-    "@headlessui/react": "^1.7.0",
+    "@headlessui/react": "^1.7.4",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "tailwindcss": "^3.0.23"
diff --git a/examples/example-react/src/components/ExampleCombobox.jsx b/examples/example-react/src/components/ExampleCombobox.jsx
@@ -45,7 +45,7 @@ export default function ExampleCombobox() {
           <div className="relative w-full text-left bg-white border border-gray-200 rounded-lg shadow-md cursor-default focus:outline-none sm:text-sm overflow-hidden">
             <Combobox.Input
               className="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:outline-none focus:ring-0"
-              displayValue={person => person.name}
+              displayValue={person => person?.name}
               onChange={event => setQuery(event.target.value)}
             />
 
diff --git a/examples/example-vue-ts/package.json b/examples/example-vue-ts/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@headlessui-float/vue": "*",
-    "@headlessui/vue": "^1.7.0",
+    "@headlessui/vue": "^1.7.4",
     "tailwindcss": "^3.0.23",
-    "vue": "3.2.33"
+    "vue": "3.2.45"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.1.1",
diff --git a/examples/example-vue-ts/src/components/ExampleCombobox.vue b/examples/example-vue-ts/src/components/ExampleCombobox.vue
@@ -15,7 +15,7 @@
         <div class="relative w-full text-left bg-white border border-gray-200 rounded-lg shadow-md cursor-default focus:outline-none sm:text-sm overflow-hidden">
           <ComboboxInput
             class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:outline-none focus:ring-0"
-            :display-value="(person: any) => person.name"
+            :display-value="(person: any) => person?.name"
             @change="query = $event.target.value"
           />
 
diff --git a/examples/example-vue/package.json b/examples/example-vue/package.json
@@ -9,9 +9,9 @@
   },
   "dependencies": {
     "@headlessui-float/vue": "*",
-    "@headlessui/vue": "^1.7.0",
+    "@headlessui/vue": "^1.7.4",
     "tailwindcss": "^3.0.23",
-    "vue": "3.2.33"
+    "vue": "3.2.45"
   },
   "devDependencies": {
     "@iconify-json/heroicons-outline": "^1.1.1",
diff --git a/examples/example-vue/src/components/ExampleCombobox.vue b/examples/example-vue/src/components/ExampleCombobox.vue
@@ -15,7 +15,7 @@
         <div class="relative w-full text-left bg-white border border-gray-200 rounded-lg shadow-md cursor-default focus:outline-none sm:text-sm overflow-hidden">
           <ComboboxInput
             class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:outline-none focus:ring-0"
-            :display-value="person => person.name"
+            :display-value="person => person?.name"
             @change="query = $event.target.value"
           />
 
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -50,7 +50,7 @@
     "@floating-ui/react-dom": "^1.0.0"
   },
   "devDependencies": {
-    "@headlessui/react": "^1.7.0",
+    "@headlessui/react": "^1.7.4",
     "@types/lodash.throttle": "^4.1.6",
     "@types/node": "^17.0.21",
     "@types/react": "^18.0.0",
diff --git a/packages/vue/package.json b/packages/vue/package.json
@@ -54,7 +54,7 @@
     "typescript": "~4.7.0",
     "unplugin-vue-components": "^0.22.0",
     "vite": "^3.0.0",
-    "vue": "^3.2.31",
+    "vue": "3.2.45",
     "vue-tsc": "^1.0.0"
   }
 }
diff --git a/packages/vue/src/float.ts b/packages/vue/src/float.ts
@@ -7,6 +7,7 @@ import {
   defineComponent,
   h,
   inject,
+  nextTick,
   onBeforeUnmount,
   onMounted,
   provide,
@@ -353,7 +354,8 @@ export const Float = defineComponent({
       }
     }
 
-    function handleShow() {
+    async function handleShow() {
+      await nextTick()
       updateElements()
 
       if (isVisibleDOMElement(referenceEl) &&
@@ -372,10 +374,10 @@ export const Float = defineComponent({
 
     watch(show, handleShow)
 
-    onMounted(() => {
+    onMounted(async () => {
       isMounted.value = true
       startReferenceElResizeObserver()
-      handleShow()
+      await handleShow()
     })
 
     onBeforeUnmount(() => {
diff --git a/packages/vue/src/utils/dom.ts b/packages/vue/src/utils/dom.ts
@@ -1,12 +1,12 @@
-import { type Ref, unref } from 'vue'
+import { type ComponentPublicInstance, type Ref, ref as createRef } from 'vue'
 
-// Reference: https://github.com/tailwindlabs/headlessui/blob/d8424fe311923f6858f6e3d55083df957bca824d/packages/%40headlessui-vue/src/utils/dom.ts#L3-L7
+// Reference: https://github.com/tailwindlabs/headlessui/blob/426cbf34c50252932f4e26a954226539316ca8bc/packages/%40headlessui-vue/src/utils/dom.ts#L3-L8
 
-export function dom<T extends HTMLElement>(ref?: Ref<T | null> | T | null): T | null {
-  ref = unref(ref)
+export function dom<T extends Element | ComponentPublicInstance>(ref?: Ref<T | null>): T | null {
   if (ref == null) return null
+  if (ref.value == null) return null
 
-  const el = ((ref as T & { $el: unknown })?.$el ?? ref) as T | null
-  if ((el as T & { $el: unknown }).$el) return dom(el)
+  const el = ((ref.value as { $el?: T }).$el ?? ref.value) as T | null
+  if ((el as { $el?: T }).$el) return dom(createRef(el) as any)
   return el
 }
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -54,7 +54,7 @@`
`54`	`54`	`"typescript": "~4.7.0",`
`55`	`55`	`"unplugin-vue-components": "^0.22.0",`
`56`	`56`	`"vite": "^3.0.0",`
`57`		`- "vue": "^3.2.31",`
	`57`	`+ "vue": "3.2.45",`
`58`	`58`	`"vue-tsc": "^1.0.0"`
`59`	`59`	`}`
`60`	`60`	`}`