feat: add "Copy document" dialog (#6009)

app/components/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -121,6 +122,8 @@ export type Props = React.InputHTMLAttributes<
   margin?: string | number;
   error?: string;
   icon?: React.ReactNode;
+  /** Like autoFocus, but also select any text in the input */
+  autoSelect?: boolean;
   /** Callback is triggered with the CMD+Enter keyboard combo */
   onRequestSubmit?: (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
@@ -133,6 +136,7 @@ function Input(
   props: Props,
   ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
 ) {
+  const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
 
   const handleBlur = (ev: React.SyntheticEvent) => {
@@ -165,6 +169,12 @@ function Input(
     }
   };
 
+  React.useEffect(() => {
+    if (props.autoSelect && internalRef.current) {
+      internalRef.current.select();
+    }
+  }, [props.autoSelect, internalRef]);
+
   const {
     type = "text",
     icon,
@@ -197,7 +207,10 @@ function Input(
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
             <RealTextarea
-              ref={ref as React.RefObject<HTMLTextAreaElement>}
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLTextAreaElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}
@@ -206,7 +219,10 @@ function Input(
             />
           ) : (
             <RealInput
-              ref={ref as React.RefObject<HTMLInputElement>}
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLInputElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}