fix(FE): refactor sales order form create

src/components/input/DebouncedTextArea.tsx

@@ -7,6 +7,7 @@ import TextArea, { TextAreaProps } from '@/components/input/TextArea';
 
 interface DebouncedTextAreaProps extends TextAreaProps {
   delay?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
@@ -19,6 +20,11 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   const [debouncedChangeEvent] = useDebounce(internalChangeEvent, delay ?? 300);
   const [debouncedValue] = useDebounce(internalValue, delay ?? 300);
 
+  // Sync internal value with external props.value when it changes (e.g., form reset)
+  useEffect(() => {
+    setInternalValue(props.value);
+  }, [props.value]);
+
   const internalChangeHandler: ChangeEventHandler<HTMLTextAreaElement> = (
     e
   ) => {
@@ -35,6 +41,7 @@ const DebouncedTextArea = (props: DebouncedTextAreaProps) => {
   return (
     <TextArea
       {...props}
+      ref={props.ref}
       value={internalValue}
       onChange={internalChangeHandler}
     />

src/components/input/TextArea.tsx

@@ -28,6 +28,7 @@ export interface TextAreaProps {
   onChange?: ChangeEventHandler<HTMLTextAreaElement>;
   onBlur?: FocusEventHandler<HTMLTextAreaElement>;
   rows?: number;
+  ref?: React.RefObject<HTMLTextAreaElement | null>;
 }
 
 const TextArea = ({
@@ -49,6 +50,7 @@ const TextArea = ({
   readOnly = false,
   isLoading = false,
   rows = 3,
+  ref,
 }: TextAreaProps) => {
   return (
     <div
@@ -99,6 +101,7 @@ const TextArea = ({
         onBlur={onBlur}
         disabled={disabled}
         readOnly={readOnly}
+        ref={ref}
       />
 
       {(isLoading || endAdornment) && (