Wrap components with forward ref

Author: ArtyomVancyan

development/src/ant-phone/index.tsx

@@ -1,4 +1,14 @@
-import {ChangeEvent, KeyboardEvent, useCallback, useContext, useEffect, useMemo, useRef, useState} from "react";
+import {
+	ChangeEvent,
+	forwardRef,
+	KeyboardEvent,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState
+} from "react";
 import useFormInstance from "antd/es/form/hooks/useFormInstance";
 import {FormContext} from "antd/es/form/context";
 import Select from "antd/es/select";
@@ -21,22 +31,22 @@ import {PhoneInputProps, PhoneNumber} from "./types";
 
 injectMergedStyles();
 
-const PhoneInput = ({
-						value: initialValue = "",
-						country = getDefaultISO2Code(),
-						enableSearch = false,
-						disableDropdown = false,
-						onlyCountries = [],
-						excludeCountries = [],
-						preferredCountries = [],
-						searchNotFound = "No country found",
-						searchPlaceholder = "Search country",
-						onMount: handleMount = () => null,
-						onInput: handleInput = () => null,
-						onChange: handleChange = () => null,
-						onKeyDown: handleKeyDown = () => null,
-						...antInputProps
-					}: PhoneInputProps) => {
+const PhoneInput = forwardRef(({
+								   value: initialValue = "",
+								   country = getDefaultISO2Code(),
+								   enableSearch = false,
+								   disableDropdown = false,
+								   onlyCountries = [],
+								   excludeCountries = [],
+								   preferredCountries = [],
+								   searchNotFound = "No country found",
+								   searchPlaceholder = "Search country",
+								   onMount: handleMount = () => null,
+								   onInput: handleInput = () => null,
+								   onChange: handleChange = () => null,
+								   onKeyDown: handleKeyDown = () => null,
+								   ...antInputProps
+							   }: PhoneInputProps, ref: any) => {
 	const formInstance = useFormInstance();
 	const formContext = useContext(FormContext);
 	const backRef = useRef<boolean>(false);
@@ -164,6 +174,7 @@ const PhoneInput = ({
 		<div className="ant-phone-input-wrapper"
 			 ref={node => setMinWidth(node?.offsetWidth || 0)}>
 			<Input
+				ref={ref}
 				inputMode="tel"
 				value={value}
 				onInput={onInput}
@@ -174,6 +185,6 @@ const PhoneInput = ({
 			/>
 		</div>
 	)
-}
+})
 
 export default PhoneInput;

development/src/mui-phone/index.tsx

@@ -1,4 +1,4 @@
-import {ChangeEvent, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
+import {ChangeEvent, forwardRef, KeyboardEvent, useCallback, useEffect, useMemo, useRef, useState} from "react";
 import {InputAdornment, MenuItem, Select, TextField} from "@mui/material";
 
 import {
@@ -18,7 +18,7 @@ import {PhoneInputProps, PhoneNumber} from "./types";
 
 injectMergedStyles();
 
-const PhoneInput = ({
+const PhoneInput = forwardRef(({
 						value: initialValue = "",
 						variant = undefined,
 						searchVariant = undefined,
@@ -35,7 +35,7 @@ const PhoneInput = ({
 						onChange: handleChange = () => null,
 						onKeyDown: handleKeyDown = () => null,
 						...muiInputProps
-					}: PhoneInputProps) => {
+					}: PhoneInputProps, ref: any) => {
 	searchVariant = searchVariant || variant;
 	const backRef = useRef<boolean>(false);
 	const searchRef = useRef<boolean>(false);
@@ -148,6 +148,7 @@ const PhoneInput = ({
 				</div>
 			</Select>
 			<TextField
+				ref={ref}
 				type="tel"
 				value={value}
 				variant={variant}
@@ -170,6 +171,6 @@ const PhoneInput = ({
 			/>
 		</div>
 	)
-}
+})
 
 export default PhoneInput;

development/src/mui-phone/types.ts

@@ -33,6 +33,5 @@ export interface PhoneInputProps extends Omit<TextFieldProps, "onChange"> {
 
 	onKeyDown?(event: KeyboardEvent<HTMLInputElement>): void;
 
-	/** NOTE: This differs from the antd Input onChange interface */
 	onChange?(value: PhoneNumber, event: ChangeEvent<HTMLInputElement>): void;
 }