Fixed drops to be connected to the dom instantly.

Author: novykh

src/components/drops/drop/index.js

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from "react"
+import React, { forwardRef, useLayoutEffect } from "react"
 import ReactDOM from "react-dom"
 import useDropElement from "src/hooks/use-drop-element"
 import useKeyboardEsc from "src/hooks/use-keyboard-esc"
@@ -48,9 +48,8 @@ const Drop = forwardRef(
       keepHorizontal
     )
 
-    useEffect(() => {
-      const id = requestAnimationFrame(updatePosition)
-      return () => cancelAnimationFrame(id)
+    useLayoutEffect(() => {
+      updatePosition()
     }, [updatePosition])
 
     useDimensionChange(target, updatePosition)

src/components/drops/menu/dropdown.js

@@ -12,6 +12,8 @@ const Container = styled(Flex)`
   list-style-type: none;
 `
 
+const defaultEstimateSize = () => 28
+
 const Dropdown = ({
   hideShadow,
   itemProps,
@@ -22,6 +24,8 @@ const Dropdown = ({
   hasSearch,
   searchMargin = [4],
   gap = 0,
+  width = "300px",
+  estimateSize = defaultEstimateSize,
   close,
   ...rest
 }) => {
@@ -52,7 +56,7 @@ const Dropdown = ({
     scrollOffsetFn: event => (event ? event.target.scrollTop - ref.current.offsetTop : 0),
     overscan: 3,
     enableSmoothScroll: false,
-    estimateSize: () => 30,
+    estimateSize,
   })
 
   return (
@@ -81,10 +85,9 @@ const Dropdown = ({
       <div
         ref={ref}
         style={{
-          minHeight: "100%",
-          width: "100%",
+          height: "100%",
           overflow: "auto",
-          minWidth: "300px",
+          width,
         }}
       >
         <div
@@ -94,32 +97,31 @@ const Dropdown = ({
             position: "relative",
           }}
         >
-          {ref.current?.isConnected &&
-            rowVirtualizer.getVirtualItems().map(virtualRow => (
-              <div
-                key={virtualRow.key}
-                style={{
-                  position: "absolute",
-                  top: 0,
-                  left: 0,
-                  width: "100%",
-                  transform: `translateY(${virtualRow.start}px)`,
-                  padding: gap * 2,
-                  overflow: "hidden",
-                }}
-                data-index={virtualRow.index}
-                ref={rowVirtualizer.measureElement}
-              >
-                <Item
-                  item={filteredItems[virtualRow.index]}
-                  index={virtualRow.index}
-                  itemProps={itemProps}
-                  value={value}
-                  onItemClick={onItemClick}
-                  close={close}
-                />
-              </div>
-            ))}
+          {rowVirtualizer.getVirtualItems().map(virtualRow => (
+            <div
+              key={virtualRow.key}
+              style={{
+                position: "absolute",
+                top: 0,
+                left: 0,
+                width: "100%",
+                transform: `translateY(${virtualRow.start}px)`,
+                padding: gap * 2,
+                overflow: "hidden",
+              }}
+              data-index={virtualRow.index}
+              ref={rowVirtualizer.measureElement}
+            >
+              <Item
+                item={filteredItems[virtualRow.index]}
+                index={virtualRow.index}
+                itemProps={itemProps}
+                value={value}
+                onItemClick={onItemClick}
+                close={close}
+              />
+            </div>
+          ))}
         </div>
       </div>
     </Container>

src/components/drops/menu/dropdownItem.js

@@ -1,13 +1,13 @@
-import React, { useLayoutEffect, useRef } from "react"
+import React from "react"
 import styled from "styled-components"
 import { getColor } from "src/theme"
 import Flex from "src/components/templates/flex"
-import { Text } from "src/components/typography"
+import { TextSmall } from "src/components/typography"
 
 export const ItemContainer = styled(Flex).attrs({
   as: "li",
   role: "option",
-  padding: [2, 4],
+  padding: [1, 4],
 })`
   cursor: ${({ cursor }) => cursor ?? "pointer"};
   opacity: ${({ disabled }) => (disabled ? 0.4 : 1)};
@@ -24,7 +24,6 @@ const DropdownItem = ({
   value: selectedValue,
   onItemClick,
   index,
-  measureElement,
   style,
   ...rest
 }) => {
@@ -37,7 +36,6 @@ const DropdownItem = ({
 
   return (
     <ItemContainer
-      ref={measureElement}
       data-index={index}
       aria-selected={selected}
       disabled={disabled || selected}
@@ -46,9 +44,9 @@ const DropdownItem = ({
       {...rest}
       style={style}
     >
-      {reverse && <Text>{label}</Text>}
+      {reverse && <TextSmall>{label}</TextSmall>}
       {icon}
-      {!reverse && <Text>{label}</Text>}
+      {!reverse && <TextSmall>{label}</TextSmall>}
     </ItemContainer>
   )
 }

src/components/drops/menu/index.js

@@ -75,8 +75,7 @@ const Menu = forwardRef(
 
     return (
       <Fragment>
-        {clonedChildren}
-        {!clonedChildren && (
+        {clonedChildren || (
           <MenuButton
             ref={setRef}
             icon={icon}

src/hooks/use-drop-element/index.js

@@ -1,10 +1,13 @@
-import { useEffect, useMemo } from "react"
+import { useLayoutEffect, useMemo } from "react"
 
 export default () => {
-  const el = useMemo(() => document.createElement("div"), [])
+  const el = useMemo(() => {
+    const div = document.createElement("div")
+    document.body.append(div)
+    return div
+  }, [])
 
-  useEffect(() => {
-    document.body.append(el)
+  useLayoutEffect(() => {
     return () => document.body.removeChild(el)
   }, [])