Type submit on enter press is not working in react-phone-input-international

Question

I am using PhoneInput from react-phone-input-international, and formik for form builder, and when i am trying to use type submit on enter press, it is not working. Here is my code

<form onSubmit={formik.handleSubmit}>
    <PhoneInput
        name="mobileNumber"
        country={'in'}
        value={formik.values.mobileNumber}
        placeholder=""
        countryCodeEditable={false}
        onChange={(value, country, e, formattedValue) => {
            formik.setValues({
                ...formik.values,
                "mobileNumber": formattedValue && formattedValue.replace(/ /g, '')
            })
        }
        }
    />
    <Box className="send-otp">
        <Button
            otpBtn
            type='submit'
            name={(t(`btn.send_otp`))}
        />
    </Box>
</form>

I am trying type submit on button but not working. Here is codesandbox https://codesandbox.io/s/phoneinput-react-gybgzd

Answer 1

Your solution is to add another event

    <PhoneInput
        name="mobileNumber"
        country={"in"}
        value={formik.values.mobileNumber}
        style={{ width: "unset" }}
        placeholder=""
        onEnterKeyPress={()=>handleSubmit(formik.values)} // <-- here
        countryCodeEditable={false}
        onChange={(value, country, e, formattedValue) => {
          formik.setValues({
            ...formik.values,
            mobileNumber: formattedValue && formattedValue.replace(/ /g, "")
          });
        }}
      />