Fix input component react warnings (#160)

* Add pointer-events: none to index css to prevent weird react-error-overlay from breaking page https://github.com/facebook/create-react-app/issues/11773\#issuecomment-1064265775

* Return validation object separately to be more explicit about destructuring, fix existing references, use TextInputField vs. just TextInput in ExportDialog to show validationMessage

Author: brandongregoryscott

src/components/change-password-form.tsx

@@ -28,14 +28,14 @@ const ChangePasswordForm: React.FC<ChangePasswordFormProps> = (
     const {
         value: password,
         onChange: onPasswordChange,
-        ...passwordValidation
+        validation: passwordValidation,
     } = useInput({ isRequired: true });
 
     const {
         value: passwordConfirmation,
         onChange: onPasswordConfirmationChange,
         setValidation: setPasswordConfirmationValidation,
-        ...passwordConfirmationValidation
+        validation: passwordConfirmationValidation,
     } = useInput({ isRequired: true });
 
     const validationTimeoutRef = useRef<NodeJS.Timeout | null>(null);

src/components/instruments/instrument-settings.tsx

@@ -84,15 +84,15 @@ const InstrumentSettings: React.FC<InstrumentSettingsProps> = (
         value: name,
         onChange: onNameChange,
         setValidation: setNameValidation,
-        ...nameValidation
+        validation: nameValidation,
     } = useInput({
-        initialValue: initialInstrument?.name ?? "",
+        initialValue: initialInstrument?.name,
     });
     const {
         displayValue: releaseDisplayValue,
         value: release,
         onChange: onReleaseChange,
-        ...releaseValidation
+        validation: releaseValidation,
     } = useNumberInput({
         initialValue:
             initialInstrument?.release ??
@@ -105,7 +105,7 @@ const InstrumentSettings: React.FC<InstrumentSettingsProps> = (
         displayValue: durationDisplayValue,
         value: duration,
         onChange: onDurationChange,
-        ...durationValidation
+        validation: durationValidation,
     } = useNumberInput({
         initialValue: initialInstrument?.duration,
         allowFloating: true,

src/components/login-or-register-form.tsx

@@ -41,17 +41,15 @@ const LoginOrRegisterForm: React.FC<LoginOrRegisterFormProps> = (
     const {
         value: email,
         onChange: handleEmailChange,
-        ...emailValidation
+        validation: emailValidation,
     } = useInput({
-        initialValue: "",
         isRequired: true,
     });
     const {
         value: password,
         onChange: handlePasswordChange,
-        ...passwordValidation
+        validation: passwordValidation,
     } = useInput({
-        initialValue: "",
         isRequired: true,
     });
     const { mutate: createOrUpdateUser } = useCreateOrUpdateUser({

src/components/reset-password-form.tsx

@@ -22,7 +22,7 @@ const ResetPasswordForm: React.FC<ResetPasswordFormProps> = (
     const {
         value: email,
         onChange: handleEmailChange,
-        ...emailValidation
+        validation: emailValidation,
     } = useInput({ isRequired: true });
     const {
         isLoading,

src/components/workstation/export-dialog.tsx

@@ -7,10 +7,7 @@ import {
     Paragraph,
     RecordIcon,
     Spinner,
-    Pane,
-    TextInput,
-    Label,
-    minorScale,
+    TextInputField,
 } from "evergreen-ui";
 import { List } from "immutable";
 import React, { useCallback, useMemo, useState } from "react";
@@ -30,6 +27,8 @@ import slugify from "slugify";
 import { unixTime } from "utils/core-utils";
 import { useInput } from "utils/hooks/use-input";
 import { isEmpty } from "lodash";
+import { FormField } from "components/forms/form-field";
+import { Flex } from "components/flex";
 
 interface ExportDialogProps
     extends Pick<DialogProps, "isShown" | "onCloseComplete"> {}
@@ -61,7 +60,11 @@ const ExportDialog: React.FC<ExportDialogProps> = (
         setFalse: stopRecording,
     } = useBoolean();
 
-    const { value: fileName, ...inputProps } = useInput({
+    const {
+        value: fileName,
+        onChange: handleFileNameChange,
+        validation: fileNameValidation,
+    } = useInput({
         initialValue: getDefaultFileName(state.project),
         isRequired: true,
     });
@@ -132,39 +135,36 @@ const ExportDialog: React.FC<ExportDialogProps> = (
                         below. Recording happens in real-time, and you'll be
                         able to download the file once complete.
                     </Paragraph>
-                    <Pane
-                        display="flex"
-                        flexDirection="row"
-                        marginBottom={majorScale(2)}>
-                        <Pane
-                            display="flex"
-                            flexDirection="column"
-                            marginRight={majorScale(1)}
-                            width="88%">
-                            <Label marginBottom={minorScale(1)}>Name</Label>
-                            <TextInput
-                                {...inputProps}
+                    <Flex.Row>
+                        <Flex.Column marginRight={majorScale(1)} width="88%">
+                            <TextInputField
+                                label="Name"
+                                {...fileNameValidation}
+                                onChange={handleFileNameChange}
                                 value={fileName}
                                 width="100%"
                             />
-                        </Pane>
-                        <Pane display="flex" flexDirection="column" width="12%">
-                            <Label marginBottom={minorScale(1)}>Type</Label>
-                            <SelectMenu
-                                calculateHeight={true}
-                                closeOnSelect={true}
-                                hasFilter={false}
-                                isMultiSelect={false}
-                                onSelect={handleSelect}
-                                options={options}
-                                title="Type"
-                                width={majorScale(16)}>
-                                <Button disabled={hasFile || isRecording}>
-                                    {getExtension(mimeType)}
-                                </Button>
-                            </SelectMenu>
-                        </Pane>
-                    </Pane>
+                        </Flex.Column>
+                        <Flex.Column width="12%">
+                            <FormField label="Type">
+                                <SelectMenu
+                                    calculateHeight={true}
+                                    closeOnSelect={true}
+                                    hasFilter={false}
+                                    isMultiSelect={false}
+                                    onSelect={handleSelect}
+                                    options={options}
+                                    title="Type"
+                                    width={majorScale(12)}>
+                                    <Button
+                                        disabled={hasFile || isRecording}
+                                        width={58}>
+                                        {getExtension(mimeType)}
+                                    </Button>
+                                </SelectMenu>
+                            </FormField>
+                        </Flex.Column>
+                    </Flex.Row>
                     <Button
                         allowUnsafeHref={true}
                         appearance={hasFile ? "primary" : "default"}

src/index.css

@@ -13,3 +13,7 @@ html {
     width: 100%;
     max-width: 100%;
 }
+
+iframe {
+    pointer-events: "none";
+}

src/utils/hooks/use-input.ts

@@ -8,14 +8,15 @@ interface UseInputOptions {
     isRequired?: boolean;
 }
 
-interface useInputResult extends ValidationState {
+interface useInputResult {
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
     setValidation: (validation?: ValidationState) => void;
+    validation: ValidationState;
     value?: string;
 }
 
 const useInput = (input?: UseInputOptions): useInputResult => {
-    const { isRequired = false, initialValue } = input ?? {};
+    const { isRequired = false, initialValue = "" } = input ?? {};
     const [validation, setValidation] = useState<ValidationState | undefined>();
     const [value, setValue] = useState<string | undefined>(initialValue);
 
@@ -38,7 +39,7 @@ const useInput = (input?: UseInputOptions): useInputResult => {
     );
 
     return {
-        ...validation,
+        validation: validation ?? {},
         onChange: handleChange,
         setValidation,
         value,

src/utils/hooks/use-number-input.ts

@@ -11,10 +11,11 @@ interface UseNumberInputOptions {
     min?: number;
 }
 
-interface UseNumberInputResult extends ValidationState {
+interface UseNumberInputResult {
     displayValue?: string;
     onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
-    setValidation: (validation?: ValidationState) => void;
+    setValidation?: (validation?: ValidationState) => void;
+    validation: ValidationState;
     value?: number;
 }
 
@@ -30,7 +31,7 @@ const useNumberInput = (
     } = options ?? {};
     const [validation, setValidation] = useState<ValidationState | undefined>();
     const [displayValue, setDisplayValue] = useState<string | undefined>(
-        initialValue?.toString()
+        initialValue?.toString() ?? ""
     );
     const [value, setValue] = useState<number | undefined>(initialValue);
 
@@ -77,7 +78,7 @@ const useNumberInput = (
     );
 
     return {
-        ...validation,
+        validation: validation ?? {},
         displayValue,
         onChange: handleChange,
         setValidation,