fix: fix last korean letter typing twice (#169, #171)

sharemindteam · Mar 18, 2024 · 1ccfea6 · 1ccfea6
1 parent 494671c
commit 1ccfea6
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 5 deletions.
diff --git a/src/contexts/StompContext.tsx b/src/contexts/StompContext.tsx
@@ -66,7 +66,9 @@ export const StompProvider: React.FC<{ children: ReactNode }> = ({
 
   const connectChat = () => {
     const socket = new SockJs(process.env.REACT_APP_CHAT_URL + '/chat');
-    stompClient.current = Stomp.over(socket);
+    stompClient.current = Stomp.over(() => {
+      return socket;
+    });
     // 연결
     stompClient.current.connect(
       {

diff --git a/src/pages/Buyer/BuyerChat.tsx b/src/pages/Buyer/BuyerChat.tsx
@@ -56,6 +56,7 @@ export const BuyerChat = () => {
   const [startRequestActive, setStartRequestActive] = useState<boolean>(true);
   //useRefs
   const inputRef = useRef<HTMLTextAreaElement>(null); //input ref 높이 초기화를 위함
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
   const sectionPaddingRef = useRef<number>(2.4); // section 추가 padding bottom
 
   const { stompClient } = useStompContext();
@@ -322,7 +323,10 @@ export const BuyerChat = () => {
       sendMessage();
       setInput('');
     }
-    if (inputRef.current) {
+    if (inputRef.current && hiddenInputRef.current) {
+      // hiddenInput에 focus를 옮기고, 다시 input으로 옮기는 방식을 사용하여
+      // ios 환경에서 한글(받침없는 글자) 입력시 buffer가 남아있는 문제를 해결했음
+      hiddenInputRef.current.focus();
       inputRef.current.focus();
     }
     if (inputRef.current) inputRef.current.style.height = '2.4rem';
@@ -464,15 +468,13 @@ export const BuyerChat = () => {
             ref={setTarget}
             style={{
               width: '100%',
-              // height: '0.1rem',
               backgroundColor: 'green',
             }}
           ></div>
         ) : (
           <div
             style={{
               width: '100%',
-              // height: '0.1rem',
               backgroundColor: 'pink',
             }}
           ></div>
@@ -690,6 +692,7 @@ export const BuyerChat = () => {
                 }
               }}
             />
+            <input ref={hiddenInputRef} className="hidden-input" />
           </ChatTextareaWrapper>
           <button style={{ margin: '0', padding: '0' }} onClick={handleSubmit}>
             <SearchIcon InputValid={inputValid} />
@@ -846,6 +849,14 @@ const ChatTextareaWrapper = styled.div`
   width: 78.66%;
   border-radius: 1.2rem;
   box-sizing: border-box;
+  position: relative;
+  .hidden-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background-color: transparent;
+    pointer-events: none;
+  }
 `;
 
 const ChatTextarea = styled.textarea`

diff --git a/src/pages/Seller/SellerChatTemp.tsx b/src/pages/Seller/SellerChatTemp.tsx
@@ -48,8 +48,10 @@ export const SellerChatTemp = () => {
   //useRefs
   const inputRef = useRef<HTMLTextAreaElement>(null); //input ref 높이 초기화를 위함
   const sectionPaddingRef = useRef<number>(2.4); // section 추가 padding bottom
+  const hiddenInputRef = useRef<HTMLInputElement>(null);
 
   const { stompClient } = useStompContext();
+
   const preventRef = useRef(false); // observer 중복방지, 첫 mount 시 message 가져온 후 true로 전환
   const preventScrollRef = useRef(true); // message 변경 시 모바일에서 오버 스크롤로 인해 여러번 불리는 오류 발생, scrollintoview 완료 전까지 observe 막기
   const isLastElem = useRef(false); //마지막 채팅인지 확인
@@ -274,7 +276,10 @@ export const SellerChatTemp = () => {
       sendMessage();
       setInput('');
     }
-    if (inputRef.current) {
+    if (inputRef.current && hiddenInputRef.current) {
+      // hiddenInput에 focus를 옮기고, 다시 input으로 옮기는 방식을 사용하여
+      // ios 환경에서 한글(받침없는 글자) 입력시 buffer가 남아있는 문제를 해결했음
+      hiddenInputRef.current.focus();
       inputRef.current.focus();
     }
     if (inputRef.current) inputRef.current.style.height = '2.4rem';
@@ -596,6 +601,7 @@ export const SellerChatTemp = () => {
                     }
                   }}
                 />
+                <input ref={hiddenInputRef} className="hidden-input" />
               </ChatTextareaWrapper>
               <button
                 style={{ margin: '0', padding: '0' }}
@@ -765,6 +771,14 @@ const ChatTextareaWrapper = styled.div`
   width: 78.66%;
   border-radius: 1.2rem;
   box-sizing: border-box;
+  position: relative;
+  .hidden-input {
+    position: absolute;
+    width: 0;
+    height: 0;
+    background-color: transparent;
+    pointer-events: none;
+  }
 `;
 
 const ChatTextarea = styled.textarea`