fix: Implement custom Select Input (#2571)

app/hooks/useMenuHeight.js

@@ -0,0 +1,32 @@
+// @flow
+import * as React from "react";
+import { type ElementRef } from "reakit";
+import useMobile from "hooks/useMobile";
+import useWindowSize from "hooks/useWindowSize";
+
+const useMenuHeight = (
+  visible: void | boolean,
+  unstable_disclosureRef: void | { current: null | ElementRef<"button"> }
+) => {
+  const [maxHeight, setMaxHeight] = React.useState(undefined);
+  const isMobile = useMobile();
+  const { height: windowHeight } = useWindowSize();
+
+  React.useLayoutEffect(() => {
+    const padding = 8;
+
+    if (visible && !isMobile) {
+      setMaxHeight(
+        unstable_disclosureRef?.current
+          ? windowHeight -
+              unstable_disclosureRef.current.getBoundingClientRect().bottom -
+              padding
+          : undefined
+      );
+    }
+  }, [visible, unstable_disclosureRef, windowHeight, isMobile]);
+
+  return maxHeight;
+};
+
+export default useMenuHeight;