From 1ccfea62e292b1f8d476d68b80ad1d7e898c464a Mon Sep 17 00:00:00 2001
From: leekyuho <rbgh0114@naver.com>
Date: Mon, 18 Mar 2024 22:33:44 +0900
Subject: [PATCH] fix: fix last korean letter typing twice (#169, #171)

---
 src/contexts/StompContext.tsx       |  4 +++-
 src/pages/Buyer/BuyerChat.tsx       | 17 ++++++++++++++---
 src/pages/Seller/SellerChatTemp.tsx | 16 +++++++++++++++-
 3 files changed, 32 insertions(+), 5 deletions(-)

diff --git a/src/contexts/StompContext.tsx b/src/contexts/StompContext.tsx
index e408227a..86a55aad 100644
--- 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
index 6ff45682..565bedfb 100644
--- 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,7 +468,6 @@ export const BuyerChat = () => {
             ref={setTarget}
             style={{
               width: '100%',
-              // height: '0.1rem',
               backgroundColor: 'green',
             }}
           ></div>
@@ -472,7 +475,6 @@ export const BuyerChat = () => {
           <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
index e9565816..151e12d2 100644
--- 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`