React: How to trigger onChange event from a different onChange event?

Question

Im trying to implement the phone input field with select drop down window for country region.

You click on select window, chose a country code and it adds that country code to phone mask input: +1 (###) ###-#### or +44 (###) ###-#### or any other country code.

Right now, when i change country code from select window, it doesnt trigger onChange event from phone input field . Eg: we did input [+1] (123)111-1111, onChange event recorded the phone value +1 (123)111-1111 , we change the country code > [+44] (123)111-1111 and phone value stays the same +1 (123)111-1111

Question : how can i trigger onChange event from phone input field to be fired, when phone code value in select window is changed?

Here is the code of main component:

import {
  FormControl,
  InputBase,
  InputLabel,
  makeStyles,
  MenuItem,
  Select,
} from "@material-ui/core";
import React, { useState } from "react";
import PropTypes from "prop-types";
import OutlinedInput from "@material-ui/core/OutlinedInput";
import NumberFormat from "react-number-format";
import * as services from "../services/services";

const useStyles = makeStyles((theme) => ({
  root: {
    display: "flex",
    flexDirection: "row",
  },
  inputPhone: {
    right: theme.spacing(12),
  },
  inputPhoneField: {
    width: "113.5%",
  },
  selectPhoneCode: {
    width: "60%",
  },
}));

const countries = services.getCountries();

function NumberFormatCustom(props) {
  const { inputRef, value, phoneCode, isEditForm, ...other } = props;

  if (isEditForm) {
    return <InputBase {...other} value={value} />;
  } else {
    if (phoneCode == "") {
      return <NumberFormat {...other} type="text" />;
    } else {
      return (
        <NumberFormat
          {...other}
          ref={(ref) => {
            inputRef(ref ? ref.inputElement : null);
          }}
          format={"+" + phoneCode + " (###) ###-####"}
          value={value}
          mask="_"
        />
      );
    }
  }
}

NumberFormatCustom.propTypes = {
  inputRef: PropTypes.func.isRequired,
};

export default function PhoneMaskWithSelect(props) {
  const classes = useStyles();
  const { value, name, label, isEditForm, onChange } = props;

  const [phoneCode, setPhoneCode] = useState(1);

  const placeHolder = phoneCode
  ? "+" + phoneCode + " (123) 456-7890"
  : "type number...";

  const handleChange = (e) => {
    const { name, value } = e.target;
    setPhoneCode(value);
  };


  return (
    <div className={classes.root}>
      <FormControl variant="outlined">
        <Select
          disabled={isEditForm}
          className={classes.selectPhoneCode}
          labelId="demo-simple-select-outlined-label"
          id="demo-simple-select-outlined"
          color="primary"
          value={phoneCode}
          onChange={handleChange}
        >
          {countries.map((item) => (
            <MenuItem key={item.code} value={item.phoneCode}>
              {!isEditForm ? "(" + item.code + ")" + " +" + item.phoneCode : ""}
            </MenuItem>
          ))}
        </Select>
      </FormControl>
      <FormControl variant="outlined" className={classes.inputPhone}>
        <InputLabel shrink htmlFor="component-outlined">
          {label}
        </InputLabel>
        <OutlinedInput
          notched
          className={classes.inputPhoneField}
          labelWidth="50"
          name={name}
          onChange={onChange}
          id="formatted-text-mask-input"
          placeholder={placeHolder}
          inputComponent={NumberFormatCustom}
          inputProps={{
            value,
            phoneCode,
            isEditForm,
            inputPhoneValue,
          }}
        />
      </FormControl>
    </div>
  );
}

And services component code:

  export const getCountries = () => ([
    { code: "BY", label: "Belarus", phoneCode: 375 },
    { code: "CN", label: "China", phoneCode: 86 },
    { code: "FR", label: "France", phoneCode: 33 },
    { code: "GB", label: "United Kingdom", phoneCode: 44 },
    { code: "IN", label: "India", phoneCode: 91 },
    { code: "JP", label: "Japan", phoneCode: 81 },
    { code: "PL", label: "Poland", phoneCode: 48 },
    { code: "RU", label: "Russian Federation", phoneCode: 7 },
    { code: "UA", label: "Ukraine", phoneCode: 380 },
    { code: "US", label: "United States", phoneCode: 1 },
    { code: "Others", label: "Other codes", phoneCode: "" },
  ]);

Answer 1

According to what you describe the value of input doesn't seem to depend on phoneCode state. So either you have to do it here, something like:

inputProps={{
        value: phoneCode + value,
        phoneCode,
        isEditForm,
        inputPhoneValue,
      }}

Or you have to update your OutlinedInput to consider updates to phoneCode and update value accordingly, something like

<InputBase {...other} value={ phoneCode + value} />