lucien/tanuki-s-forum
1
0
Fork 0
generated from lucien/api-template
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: fixed mentions menu position and focus

Browse source
This commit is contained in:
Lukian 2025-04-06 23:12:57 +02:00
parent 477fff18fd
commit eae2a483b5
2 changed files with 28 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

8
front/src/pages/ChannelPage.tsx
View file

@ -16,6 +16,7 @@ export default function ChannelPage() {
const [message, setMessage] = useState<string>("");
const [maxMessageToShown, setMaxMessageToShown] = useState<number>(10);
const [searchedUsers, setSearchedUsers] = useState<User[]>([]);
const ref = React.createRef<HTMLInputElement>();
function handleSubmit(e: React.FormEvent) {
e.preventDefault();
@ -121,13 +122,13 @@ export default function ChannelPage() {
placeholder="Message"
value={message}
onChange={(e) => setMessage(e.target.value)}
ref={ref}
/>
<button type="submit">Send</button>
{searchedUsers.length > 0 && (
<div>
<p>Mentions:</p>
<div className="mentions">
{searchedUsers.map((user) => (
<div key={user.id}>
<div key={user.id} className="mention">
<Link to={`/u/${user.username}`}>{user.username}</Link>
<button
type="button"
@ -136,6 +137,7 @@ export default function ChannelPage() {
message.split(" ").slice(0, -1).join(" ") + " @" + user.username + " "
);
setSearchedUsers([]);
ref.current?.focus();
}}
>
Mention