feat(phone/ui): forward ref properly on NPWD input wrapper components

project-error · Dec 3, 2021 · 6c34bec · 6c34bec
1 parent 3062ead
commit 6c34bec
Showing 1 changed file with 38 additions and 40 deletions.
diff --git a/phone/src/ui/components/Input.tsx b/phone/src/ui/components/Input.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { forwardRef } from 'react';
 import MUITextField, { TextFieldProps } from '@mui/material/TextField';
 import MUIInputBase, { InputBaseProps } from '@mui/material/InputBase';
 import { PhoneEvents } from '@typings/phone';
@@ -10,43 +10,41 @@ const toggleKeys = (keepGameFocus: boolean) =>
     keepGameFocus,
   }).catch((e) => (isEnvBrowser() ? () => {} : console.error(e)));
 
-export const TextField: React.FC<TextFieldProps> = (props) => {
-  return (
-    <MUITextField
-      {...props}
-      variant={props.variant ?? 'standard'}
-      onFocus={(e) => {
-        toggleKeys(false);
-        if (props.onFocus) {
-          props.onFocus(e);
-        }
-      }}
-      onBlur={(e) => {
-        toggleKeys(true);
-        if (props.onBlur) {
-          props.onBlur(e);
-        }
-      }}
-    />
-  );
-};
+export const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => (
+  <MUITextField
+    ref={ref}
+    {...props}
+    variant={props.variant ?? 'standard'}
+    onFocus={(e) => {
+      toggleKeys(false);
+      if (props.onFocus) {
+        props.onFocus(e);
+      }
+    }}
+    onBlur={(e) => {
+      toggleKeys(true);
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    }}
+  />
+));
 
-export const InputBase: React.FC<InputBaseProps> = (props) => {
-  return (
-    <MUIInputBase
-      {...props}
-      onFocus={(e) => {
-        toggleKeys(false);
-        if (props.onFocus) {
-          props.onFocus(e);
-        }
-      }}
-      onBlur={(e) => {
-        toggleKeys(true);
-        if (props.onBlur) {
-          props.onBlur(e);
-        }
-      }}
-    />
-  );
-};
+export const InputBase: React.FC<InputBaseProps> = forwardRef((props, ref) => (
+  <MUIInputBase
+    ref={ref}
+    {...props}
+    onFocus={(e) => {
+      toggleKeys(false);
+      if (props.onFocus) {
+        props.onFocus(e);
+      }
+    }}
+    onBlur={(e) => {
+      toggleKeys(true);
+      if (props.onBlur) {
+        props.onBlur(e);
+      }
+    }}
+  />
+));