Register custom function component

[dandin84]

Hi, I am working with creative-tim template based on MUI + React: https://www.creative-tim.com/product/material-dashboard-react.
Its have CustomInput component that compose mui input components: https://demos.creative-tim.com/material-dashboard-react/#/documentation/inputs

The problem (short version):

After trying a lot of examples from the docs I still do not succeed to register this input with predefined value via fetch.
How can I add support to this kind of custom input?

The problem (long version):

This is the CustomInput code:

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
// @material-ui/icons
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
// core components
import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";

// import { useFormContext } from "react-hook-form";

const useStyles = makeStyles(styles);

export default function CustomInput(props) {
  const classes = useStyles();
  const {
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    success,
  } = props;

  const labelClasses = classNames({
    [" " + classes.labelRootError]: error,
    [" " + classes.labelRootSuccess]: success && !error,
  });
  const underlineClasses = classNames({
    [classes.underlineError]: error,
    [classes.underlineSuccess]: success && !error,
    [classes.underline]: true,
  });
  const marginTop = classNames({
    [classes.marginTop]: labelText === undefined,
  });
  return (
    <FormControl
      {...formControlProps}
      className={formControlProps.className + " " + classes.formControl}
    >
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses,
        }}
        id={id}
        {...inputProps}
      />
      {error ? (
        <Clear className={classes.feedback + " " + classes.labelRootError} />
      ) : success ? (
        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
      ) : null}
    </FormControl>
  );
}

CustomInput.propTypes = {
  labelText: PropTypes.node,
  labelProps: PropTypes.object,
  id: PropTypes.string,
  inputProps: PropTypes.object,
  formControlProps: PropTypes.object,
  error: PropTypes.bool,
  success: PropTypes.bool,
};

• I am getting firstName value via fetch and try to register the input with the value.

This is my config + fetch code:

const { handleSubmit, formState, control, reset } = useForm({
    reValidateMode: "onChange",
  });

  useEffect(() => {
    axios
      .get("/user/profile/private", {
        headers: {
          Authorization: `Bearer ${authTokens}`,
        },
      })
      .then((result) => {
        const { data: response } = result;
        console.log("response", response);

         // Demo values
        reset({
          firstName: "Daniel",
          lastName: "Aln",
          middleName: "Bob",
        });

        if (response.success) {
          console.log("response", response);
        } else {
          console.log("error");
        }
      })
      .catch((error) => {
        console.log("error", error);
        if (error.response?.status == 403) {
          handleLogout();
        }
      });
  }, []);

And this is my first try:

• firstName: using the theme CustomInput - Fail
• lastName: using mui Input - Success
• middle name using mui TextField - Success

{/* first name */}
<GridItem xs={12} sm={12} md={6}>
  <Controller
    as={
      <CustomInput
        labelText="First Name"
        id="firstName"
        formControlProps={{
          fullWidth: true,
        }}
      />
    }
    defaultValue=""
    control={control}
    name="firstName"
    label="First Nome"
  />
</GridItem>

{/* last name */}
<GridItem xs={12} sm={12} md={6}>
  <Controller
    as={<Input fullWidth />}
    control={control}
    defaultValue=""
    label="Last Nome"
    name="lastName"
  />
</GridItem>

{/* middle name */}
<GridItem xs={12} sm={12} md={6}>
  <Controller
    as={<TextField fullWidth />}
    control={control}
    defaultValue=""
    label="Middle Name"
    name="middleName"
  />
</GridItem>

Than I saw an error about ref issue:

So I tried to create the same component but with ref support:

• I changed: const CustomInputWithRef = React.forwardRef((props, ref)
• I added: inputRef={ref} to the Input component

The full code:

import React from "react";
import classNames from "classnames";
import PropTypes from "prop-types";
// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
import FormControl from "@material-ui/core/FormControl";
import InputLabel from "@material-ui/core/InputLabel";
import Input from "@material-ui/core/Input";
// @material-ui/icons
import Clear from "@material-ui/icons/Clear";
import Check from "@material-ui/icons/Check";
// core components
import styles from "assets/jss/material-dashboard-react/components/customInputStyle.js";

const useStyles = makeStyles(styles);

const CustomInputWithRef = React.forwardRef((props, ref) => {
  console.log("ref", ref);
  const classes = useStyles();
  const {
    formControlProps,
    labelText,
    id,
    labelProps,
    inputProps,
    error,
    success,
  } = props;

  const labelClasses = classNames({
    [" " + classes.labelRootError]: error,
    [" " + classes.labelRootSuccess]: success && !error,
  });
  const underlineClasses = classNames({
    [classes.underlineError]: error,
    [classes.underlineSuccess]: success && !error,
    [classes.underline]: true,
  });
  const marginTop = classNames({
    [classes.marginTop]: labelText === undefined,
  });
  return (
    <FormControl
      {...formControlProps}
      className={formControlProps.className + " " + classes.formControl}
    >
      {labelText !== undefined ? (
        <InputLabel
          className={classes.labelRoot + labelClasses}
          htmlFor={id}
          {...labelProps}
        >
          {labelText}
        </InputLabel>
      ) : null}
      <Input
        classes={{
          root: marginTop,
          disabled: classes.disabled,
          underline: underlineClasses,
        }}
        inputRef={ref}
        id={id}
        name={id}
        {...inputProps}
      />
      {error ? (
        <Clear className={classes.feedback + " " + classes.labelRootError} />
      ) : success ? (
        <Check className={classes.feedback + " " + classes.labelRootSuccess} />
      ) : null}
    </FormControl>
  );
});

CustomInputWithRef.propTypes = {
  labelText: PropTypes.node,
  labelProps: PropTypes.object,
  id: PropTypes.string,
  inputProps: PropTypes.object,
  formControlProps: PropTypes.object,
  error: PropTypes.bool,
  success: PropTypes.bool,
};

export default CustomInputWithRef;

It fixed the error but still the register did not work :(

Can you please advise me what am I missing here?

[bluebill1049]

assume you are using v6, i think if you use Controller's render prop, it should solve the problem.

<Controller render={(props) => 
   <CustomInput
      onChange={props.onChange}
      onBlur={props.onBlur}
      value={props.value}
      labelText="Disabled"
      id="disabled"
      formControlProps={{
        fullWidth: true
      }}
    />} 
/>

[dandin84]

Thank you, I will try it!