Skip to content

Commit

Permalink
fix: Message input not focusing after enable (#408)
Browse files Browse the repository at this point in the history
## Changes
- Fixed a bug where message input is not being focused after receiving a
bot reply

ticket: [AC-4630]

## Additional Notes
- 

## Checklist
Before requesting a code review, please check the following:
- [ ] **[Required]** CI has passed all checks.
- [ ] **[Required]** A self-review has been conducted to ensure there
are no minor mistakes.
- [ ] **[Required]** Unnecessary comments/debugging code have been
removed.
- [ ] **[Required]** All requirements specified in the ticket have been
accurately implemented.
- [ ] Ensure the ticket has been updated with the sprint, status, and
story points.


[AC-4630]:
https://sendbird.atlassian.net/browse/AC-4630?atlOrigin=eyJpIjoiNWRkNTljNzYxNjVmNDY3MDlhMDU5Y2ZhYzA5YTRkZjUiLCJwIjoiZ2l0aHViLWNvbS1KU1cifQ
  • Loading branch information
liamcho authored Jan 6, 2025

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
1 parent 0028b41 commit d53c973
Showing 2 changed files with 24 additions and 1 deletion.
14 changes: 13 additions & 1 deletion src/components/chat/ui/ChatInput.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { css, cx } from '@linaria/core';
import { useRef, useState } from 'react';
import { useEffect, useRef, useState } from 'react';

import useSendbirdStateContext from '@uikit/hooks/useSendbirdStateContext';
import MessageInputWrapperView from '@uikit/modules/GroupChannel/components/MessageInputWrapper/MessageInputWrapperView';

import { themedColors } from '../../../foundation/colors/css';
import { useBlockWhileBotResponding } from '../../../hooks/useBlockWhileBotResponding';
import { usePrevious } from '../../../hooks/usePrevious';
import { isIOSMobile } from '../../../utils';
import { AlertModal } from '../../ui/AlertModal';
import { useChatContext } from '../context/ChatProvider';
@@ -15,13 +16,24 @@ export const ChatInput = () => {
const { channel, botUser, dataSource, handlers } = useChatContext();

const ref = useRef<HTMLDivElement>(null);

const [limitError, setLimitError] = useState(false);

const { config } = useSendbirdStateContext();
const isMessageInputDisabled = useBlockWhileBotResponding({
lastMessage: dataSource.messages[dataSource.messages.length - 1],
botUser,
});
const prevIsMessageInputDisabled = usePrevious(isMessageInputDisabled);

// Focus the input only when isMessageInputDisabled changes from true to false
useEffect(() => {
if (prevIsMessageInputDisabled === true && !isMessageInputDisabled) {
if (ref.current) {
ref.current.focus();
}
}
}, [isMessageInputDisabled, prevIsMessageInputDisabled]);

return (
<div className={cx(container, isIOSMobile && iosMobileContainer)}>
11 changes: 11 additions & 0 deletions src/hooks/usePrevious.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { useEffect, useRef } from 'react';

export function usePrevious(value: any) {
const ref = useRef();

useEffect(() => {
ref.current = value;
});

return ref.current; // Return the previous value
}

0 comments on commit d53c973

Please sign in to comment.