admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add auto focus to chat message send box.

Browse Source
This commit is contained in:
Patrick Fic
2020-07-15 08:27:47 -07:00
parent 5d1876e277
commit fc02824ff0
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/components/chat-send-message/chat-send-message.component.jsx
View File

@@ -1,6 +1,6 @@
import { Input, Spin } from "antd"; import { Input, Spin } from "antd";
import { LoadingOutlined } from "@ant-design/icons"; import { LoadingOutlined } from "@ant-design/icons";
import React, { useState, useEffect } from "react"; import React, { useState, useEffect, useRef } from "react";
import { useTranslation } from "react-i18next"; import { useTranslation } from "react-i18next";
import { connect } from "react-redux"; import { connect } from "react-redux";
import { createStructuredSelector } from "reselect"; import { createStructuredSelector } from "reselect";
@@ -23,11 +23,12 @@ function ChatSendMessageComponent({
isSending, isSending,
}) { }) {
const [message, setMessage] = useState(""); const [message, setMessage] = useState("");
const inputArea = useRef(null);
useEffect(() => { useEffect(() => {
if (isSending === false) { if (isSending === false) {
setMessage(""); setMessage("");
} }
inputArea.current.focus();
}, [isSending, setMessage]); }, [isSending, setMessage]);
const { t } = useTranslation(); const { t } = useTranslation();
@@ -46,6 +47,7 @@ function ChatSendMessageComponent({
<Input.TextArea <Input.TextArea
allowClear allowClear
autoFocus autoFocus
ref={inputArea}
suffix={<span>a</span>} suffix={<span>a</span>}
autoSize={{ minRows: 1, maxRows: 4 }} autoSize={{ minRows: 1, maxRows: 4 }}
value={message} value={message}