Merge pull request #749 from gadget-inc/mill/fixAutoInputWrapperGivingSelectPathsToBadInputs

Separated `autoInput` and new `autoRelationshipForm` to prevent contribution of `selectPaths` to all input props

Author: MillanWangGadget

packages/react/src/auto/AutoInput.tsx

@@ -6,7 +6,7 @@ export interface AutoInputComponent<P> extends React.FC<P> {
   __autoInput: true;
 }
 
-export function autoInput<P extends { field: string }>(Component: React.FC<P>): AutoInputComponent<P & { selectPaths?: string[] }> {
+export function autoInput<P extends { field: string }>(Component: React.FC<P>): AutoInputComponent<P> {
   const WrappedComponent: React.FC<P> = (props) => {
     const { hasCustomFormChildren, registerFields, fieldSet } = useFieldsFromChildComponents();
     const relationshipContext = useRelationshipContext();
@@ -22,20 +22,43 @@ export function autoInput<P extends { field: string }>(Component: React.FC<P>):
       return props.field;
     }, [relationshipContext, props.field]);
 
+    useEffect(() => {
+      registerFields([fieldSetPath]);
+    }, [registerFields, fieldSetPath]);
+
+    if (hasCustomFormChildren && !fieldSet.has(fieldSetPath)) {
+      // Do not render before registration
+      return null;
+    }
+
+    return <Component {...props} />;
+  };
+
+  (WrappedComponent as AutoInputComponent<P>).__autoInput = true;
+
+  return WrappedComponent as AutoInputComponent<P>;
+}
+
+export function autoRelationshipForm<P extends { field: string }>(
+  Component: React.FC<P>
+): AutoInputComponent<P & { selectPaths?: string[] }> {
+  const WrappedComponent: React.FC<P> = (props) => {
+    const { hasCustomFormChildren, registerFields, fieldSet } = useFieldsFromChildComponents();
+
     const hasSelectPaths = "selectPaths" in props && props.selectPaths;
-    const selectPaths = useMemo(() => (hasSelectPaths && Array.isArray(props.selectPaths) ? props.selectPaths : []), [hasSelectPaths]);
+    const selectPathsToRegister = useMemo(
+      () =>
+        hasSelectPaths && Array.isArray(props.selectPaths) ? props.selectPaths.map((selectPath) => `${props.field}.${selectPath}`) : [],
+      [hasSelectPaths, props.field]
+    );
 
     useEffect(() => {
-      const fieldsToRegister = [fieldSetPath];
-
       if (hasSelectPaths) {
-        fieldsToRegister.push(...selectPaths.map((selectPath) => `${props.field}.${selectPath}`));
+        registerFields(selectPathsToRegister);
       }
+    }, [hasSelectPaths, registerFields, selectPathsToRegister]);
 
-      registerFields(fieldsToRegister);
-    }, [registerFields, fieldSetPath, selectPaths]);
-
-    if (hasCustomFormChildren && !fieldSet.has(fieldSetPath)) {
+    if (hasCustomFormChildren && !selectPathsToRegister.every((field) => fieldSet.has(field))) {
       // Do not render before registration
       return null;
     }
@@ -45,7 +68,7 @@ export function autoInput<P extends { field: string }>(Component: React.FC<P>):
 
   (WrappedComponent as AutoInputComponent<P>).__autoInput = true;
 
-  return WrappedComponent as AutoInputComponent<P>;
+  return autoInput(WrappedComponent as AutoInputComponent<P>);
 }
 
 export function isAutoInput(component: React.ReactElement): component is React.ReactElement<any, AutoInputComponent<any>> {

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoBelongsToForm.tsx

@@ -16,15 +16,15 @@ import { MenuHorizontalIcon, PlusCircleIcon } from "@shopify/polaris-icons";
 import React, { useEffect, useState } from "react";
 import { useFormContext } from "../../../../useActionForm.js";
 import { get } from "../../../../utils.js";
-import { autoInput } from "../../../AutoInput.js";
+import { autoRelationshipForm } from "../../../AutoInput.js";
 import { RelationshipContext, useAutoRelationship, useRelationshipContext } from "../../../hooks/useAutoRelationship.js";
 import { useBelongsToController } from "../../../hooks/useBelongsToController.js";
 import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { OptionLabel } from "../../../interfaces/AutoRelationshipInputProps.js";
 import { RelatedModelOptionsPopover, RelatedModelOptionsSearch } from "./RelatedModelOptions.js";
 import { renderOptionLabel } from "./utils.js";
 
-export const PolarisAutoBelongsToForm = autoInput(
+export const PolarisAutoBelongsToForm = autoRelationshipForm(
   (props: {
     field: string;
     children: React.ReactNode;

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoHasManyForm.tsx

@@ -2,14 +2,14 @@ import { BlockStack, Box, Button, Icon, InlineStack, ResourceItem, Text } from "
 import { PlusCircleIcon } from "@shopify/polaris-icons";
 import React, { useState } from "react";
 import { useFormContext } from "../../../../useActionForm.js";
-import { autoInput } from "../../../AutoInput.js";
+import { autoRelationshipForm } from "../../../AutoInput.js";
 import { RelationshipContext, useAutoRelationship, useRelationshipContext } from "../../../hooks/useAutoRelationship.js";
 import { useHasManyController } from "../../../hooks/useHasManyController.js";
 import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { OptionLabel } from "../../../interfaces/AutoRelationshipInputProps.js";
 import { renderOptionLabel } from "./utils.js";
 
-export const PolarisAutoHasManyForm = autoInput(
+export const PolarisAutoHasManyForm = autoRelationshipForm(
   (props: {
     field: string;
     children: React.ReactNode;

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoHasManyThroughForm.tsx

@@ -3,15 +3,15 @@ import { PlusCircleIcon, XCircleIcon } from "@shopify/polaris-icons";
 import React, { useEffect, useMemo, useState } from "react";
 import { useFormContext } from "../../../../useActionForm.js";
 import { extractPathsFromChildren } from "../../..//AutoForm.js";
-import { autoInput } from "../../../AutoInput.js";
+import { autoRelationshipForm } from "../../../AutoInput.js";
 import { RelationshipContext, useAutoRelationship, useRelationshipContext } from "../../../hooks/useAutoRelationship.js";
 import { useHasManyThroughController } from "../../../hooks/useHasManyThroughController.js";
 import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { OptionLabel } from "../../../interfaces/AutoRelationshipInputProps.js";
 import { RelatedModelOptionsPopover, RelatedModelOptionsSearch } from "./RelatedModelOptions.js";
 import { renderOptionLabel } from "./utils.js";
 
-export const PolarisAutoHasManyThroughForm = autoInput(
+export const PolarisAutoHasManyThroughForm = autoRelationshipForm(
   (props: {
     field: string;
     children: React.ReactNode;

packages/react/src/auto/polaris/inputs/relationships/PolarisAutoHasOneForm.tsx

@@ -16,15 +16,15 @@ import { MenuHorizontalIcon, PlusCircleIcon } from "@shopify/polaris-icons";
 import React, { useEffect, useState } from "react";
 import { useFormContext } from "../../../../useActionForm.js";
 import { get } from "../../../../utils.js";
-import { autoInput } from "../../../AutoInput.js";
+import { autoRelationshipForm } from "../../../AutoInput.js";
 import { RelationshipContext, useAutoRelationship, useRelationshipContext } from "../../../hooks/useAutoRelationship.js";
 import { useHasOneController } from "../../../hooks/useHasOneController.js";
 import { getRecordAsOption, useOptionLabelForField } from "../../../hooks/useRelatedModel.js";
 import type { OptionLabel } from "../../../interfaces/AutoRelationshipInputProps.js";
 import { RelatedModelOptionsPopover, RelatedModelOptionsSearch } from "./RelatedModelOptions.js";
 import { renderOptionLabel } from "./utils.js";
 
-export const PolarisAutoHasOneForm = autoInput(
+export const PolarisAutoHasOneForm = autoRelationshipForm(
   (props: {
     field: string;
     children: React.ReactNode;