fix: fix problems caused by uncontrolled components

ui/src/common/interface.ts

@@ -195,7 +195,7 @@ export interface PostAnswerReq {
 }
 
 export interface PageUser {
-  id;
+  id?;
   displayName;
   userName?;
   avatar_url?;

ui/src/components/Comment/components/Form/index.tsx

@@ -29,7 +29,9 @@ const Form = ({
   const handleChange = (e) => {
     setValue(e.target.value);
   };
-
+  const handleSelected = (val) => {
+    setValue(val);
+  };
   return (
     <div
       className={classNames(
@@ -37,7 +39,7 @@ const Form = ({
         className,
       )}>
       <div>
-        <Mentions pageUsers={pageUsers.getUsers()}>
+        <Mentions pageUsers={pageUsers.getUsers()} onSelected={handleSelected}>
           <TextArea size="sm" value={value} onChange={handleChange} />
         </Mentions>
         <div className="form-text">{t(`tip_${mode}`)}</div>

ui/src/components/Comment/components/Reply/index.tsx

@@ -13,13 +13,18 @@ const Form = ({ userName, onSendReply, onCancel, mode }) => {
   const handleChange = (e) => {
     setValue(e.target.value);
   };
+  const handleSelected = (val) => {
+    setValue(val);
+  };
 
   return (
     <div className="mb-2">
       <div className="fs-14 mb-2">Reply to {userName}</div>
       <div className="d-flex mb-1 align-items-start flex-column flex-md-row">
         <div>
-          <Mentions pageUsers={pageUsers.getUsers()}>
+          <Mentions
+            pageUsers={pageUsers.getUsers()}
+            onSelected={handleSelected}>
             <TextArea size="sm" value={value} onChange={handleChange} />
           </Mentions>
           <div className="form-text">{t(`tip_${mode}`)}</div>

ui/src/components/Mentions/index.tsx

@@ -6,11 +6,12 @@ import * as Types from '@answer/common/interface';
 interface IProps {
   children: React.ReactNode;
   pageUsers;
+  onSelected: (val: string) => void;
 }
 
 const MAX_RECODE = 5;
 
-const Mentions: FC<IProps> = ({ children, pageUsers }) => {
+const Mentions: FC<IProps> = ({ children, pageUsers, onSelected }) => {
   const menuRef = useRef<HTMLDivElement>(null);
   const dropdownRef = useRef<HTMLDivElement>(null);
   const [val, setValue] = useState('');
@@ -71,23 +72,17 @@ const Mentions: FC<IProps> = ({ children, pageUsers }) => {
     if (!selectionStart) {
       return;
     }
-    const str = value.substring(
-      value.substring(0, selectionStart).lastIndexOf('@'),
-      selectionStart,
-    );
+
     const text = `@${item?.displayName}[${item?.userName}] `;
-    element.value = `${value.substring(
+    onSelected(
+      `${value.substring(
         0,
         value.substring(0, selectionStart).lastIndexOf('@'),
-    )}${text}${value.substring(selectionStart)}`;
+      )}${text}${value.substring(selectionStart)}`,
+    );
     setUsers([]);
     setValue('');
-    const newSelectionStart = selectionStart + text.length - str.length;
-
-    element.setSelectionRange(newSelectionStart, newSelectionStart);
-    element.focus();
   };
-
   const filterData = val
     ? users.filter(
         (item) =>

ui/src/hooks/usePageUsers/index.tsx

@@ -14,11 +14,11 @@ const usePageUsers = () => {
     getUsers,
     setUsers: (data: Types.PageUser | Types.PageUser[]) => {
       if (data instanceof Array) {
-        setUsers(uniqBy([...users, ...data], 'name'));
-        globalUsers = uniqBy([...globalUsers, ...data], 'name');
+        setUsers(uniqBy([...users, ...data], 'userName'));
+        globalUsers = uniqBy([...globalUsers, ...data], 'userName');
       } else {
-        setUsers(uniqBy([...users, data], 'name'));
-        globalUsers = uniqBy([...globalUsers, data], 'name');
+        setUsers(uniqBy([...users, data], 'userName'));
+        globalUsers = uniqBy([...globalUsers, data], 'userName');
       }
     },
   };

ui/src/pages/Questions/Detail/index.tsx

@@ -55,7 +55,16 @@ const Index = () => {
       }
 
       res.list.forEach((item) => {
-        setUsers([item.user_info, item?.update_user_info]);
+        setUsers([
+          {
+            displayName: item.user_info.display_name,
+            userName: item.user_info.username,
+          },
+          {
+            displayName: item?.update_user_info?.display_name,
+            userName: item?.update_user_info?.username,
+          },
+        ]);
       });
     }
   };