Autocomplete tableNf not working in the edit component, object within an object { tax: tableNfe {} }

Hello, how do I set the GraphQL return in a controller when it's an object within an object?

In the case below, while debugging with the getValues() from react-hook-form, I noticed that when the name attribute of the controller is defined as "tableNfe," it shows the "tableNfe" object within "tax," containing the fields "id" and "title." However, if I set the name attribute as "tax.tableNfe," which should be the correct way since it will be sent to the form within "tax," it returns null in getValues(), and the value is not loaded into the controller, leaving it without a value in both cases.

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

const meta = {
    operation: "example",
    fields: [
      "title",
      {
        tax: [
          {
            tableNfe: ["id", "title"],
            tableNfce: ["id", "title"],
          },
          "example",
        ],
      },
    ],
  };

  const {
    control,
    getValues,
  } = useForm<IProductService>({
    refineCoreProps: {
      meta,
      id,
    },
  });

<Edit saveButtonProps={saveButtonProps}>
<Grid item xs={12} md={6}>
  <Controller
    control={control}
    name="tax.tableNfe"
    defaultValue={null as any}
                      render={({ field }) => (
                        <Autocomplete
                          {...taxesAutoComplete}
                          {...field}
                          onChange={(_, value: ITax | null) => {
                            ...
                          }}
                          getOptionLabel={(item: ITax) => {
                            ...
                          }}
                          isOptionEqualToValue={(option: any, value: any) => {
                            ...
                          }}
                          renderInput={(params) => (
                            <TextField
                              ...
                            />
                          )}
                        />
                      )}
                    />
                  </Grid>

Autocomplete tableNf not working in the edit component, object within an object { tax: tableNfe {} }

Similar Threads

Similar Threads

Similar Threads