Fix: refのコードを修正

Author: su-u

src/app/json_formatter/JsonFormatter.tsx

@@ -29,7 +29,7 @@ export const JsonFormatter: FC = () => {
                   header={<PanelHeader title="入力文字" right={<ClearButton name="input" />} />}
                 >
                   <Controller
-                    render={({ field }) => <Editor extensions={[ex.json]} {...field} />}
+                    render={({ field }) => <Editor {...field} extensions={[ex.json]} />}
                     name="input"
                     control={methods.control}
                   />
@@ -39,11 +39,11 @@ export const JsonFormatter: FC = () => {
                     <Controller
                       render={({ field }) => (
                         <InputNumber
+                          {...field}
                           style={{ width: 250 }}
                           min={0}
                           max={10}
                           defaultValue={DEFAULT_VALUES.indentSpace}
-                          {...field}
                         />
                       )}
                       name="indentSpace"

src/components/common/Form/Input.tsx

@@ -1,15 +1,15 @@
 import styled from '@emotion/styled';
 import { Input as AntInput } from 'antd';
 import type { InputProps } from 'antd';
-import React, { FC } from 'react';
+import React, { forwardRef } from 'react';
 
 type Props = InputProps & {
   noResize?: string;
 };
 
-export const Input: FC<Props> = ({ noResize = 'vertical', ...field }) => {
-  return <StyleInput resize={noResize} {...field} />;
-};
+export const Input = forwardRef<any, Props>(({ noResize = 'vertical', ...field }, ref) => {
+  return <StyleInput resize={noResize} ref={ref} {...field} />;
+});
 
 const StyleInput = styled(AntInput)<{ resize: string }>`
   resize: ${({ resize }) => resize} !important;

src/components/common/Form/InputNumber.tsx

@@ -1,7 +1,7 @@
 import { InputNumber as AntInputNumber } from 'antd';
 import type { InputNumberProps } from 'antd';
-import React, { FC } from 'react';
+import React, { forwardRef } from 'react';
 
-export const InputNumber: FC<InputNumberProps> = (props) => {
+export const InputNumber = forwardRef<HTMLInputElement, InputNumberProps>((props, ref) => {
   return <AntInputNumber {...props} />;
-};
+});