Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

hotfix: maintain keyboard submit #173

Merged
merged 2 commits into from
Mar 18, 2024
Merged

hotfix: maintain keyboard submit #173

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1ccfea6
fix: fix last korean letter typing twice (#169, #171)
kyuhho Mar 18, 2024
ba17a83
docs: add issue number in pr template
kyuhho Mar 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions .github/pull_request_Template.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,12 @@
PR 내용을 작성해주세요.
<br>

## Related Issues

<br>
관련된 이슈 number를 작성해주세요.
<br>

## To Reveiwer

<br>
Expand Down
4 changes: 3 additions & 1 deletion src/contexts/StompContext.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(
{
Expand Down
17 changes: 14 additions & 3 deletions src/pages/Buyer/BuyerChat.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -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} />
Expand Down Expand Up @@ -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`
Expand Down
16 changes: 15 additions & 1 deletion src/pages/Seller/SellerChatTemp.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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); //마지막 채팅인지 확인
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -596,6 +601,7 @@ export const SellerChatTemp = () => {
}
}}
/>
<input ref={hiddenInputRef} className="hidden-input" />
</ChatTextareaWrapper>
<button
style={{ margin: '0', padding: '0' }}
Expand Down Expand Up @@ -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`
Expand Down
Loading