fix(Popover): Tippy bug on inputs getting height: 0

src/components/Popover/LazyTippy.tsx

@@ -0,0 +1,33 @@
+/** @jsxImportSource theme-ui */
+import { forwardRef, useState } from "react"
+import Tippy, { TippyProps } from "@tippyjs/react"
+
+const LazyTippy = forwardRef(function LazyTippy(props: TippyProps, ref) {
+  const [mounted, setMounted] = useState(false)
+
+  const lazyPlugin = {
+    fn: () => ({
+      onMount: () => setMounted(true),
+      onHidden: () => setMounted(false),
+    }),
+  }
+
+  const computedProps = { ...props }
+
+  computedProps.plugins = [lazyPlugin, ...(props.plugins || [])]
+
+  if (props.render) {
+    computedProps.render = (...arguments_) =>
+      mounted ? props.render(...arguments_) : ""
+  } else {
+    computedProps.content = mounted ? props.content : ""
+  }
+
+  return (
+    <Tippy {...computedProps} ref={ref}>
+      {props.children}
+    </Tippy>
+  )
+})
+
+export default LazyTippy

src/components/Popover/Popover.tsx

@@ -1,10 +1,11 @@
 /** @jsxImportSource theme-ui */
 import { ThemeUICSSObject } from "theme-ui"
 import React, { useCallback, useRef, useState } from "react"
-import Tippy, { TippyProps } from "@tippyjs/react"
+import { TippyProps } from "@tippyjs/react"
 import { roundArrow } from "tippy.js"
 import ReactDOM from "react-dom"
 import { ssrSafeCreateDiv } from "../../helpers/ssr"
+import LazyTippy from "./LazyTippy"
 
 export interface PopoverProps {
   /** Popover content */
@@ -167,7 +168,7 @@ const Popover = ({
 
   return (
     <React.Fragment>
-      <Tippy
+      <LazyTippy
         content={content}
         theme={theme}
         visible={isVisible}
@@ -233,7 +234,7 @@ const Popover = ({
         }}
       >
         {children}
-      </Tippy>
+      </LazyTippy>
       {hasBackgroundOverlay && overlayRef.current
         ? ReactDOM.createPortal(
             <div