From eae2a483b52bf1fc7d7b06288bfaf5acfd1743f6 Mon Sep 17 00:00:00 2001
From: Lukian <lulul7018@gmail.com>
Date: Sun, 6 Apr 2025 23:12:57 +0200
Subject: [PATCH] fix: fixed mentions menu position and focus

---
 front/src/pages/ChannelPage.tsx  |  8 +++++---
 front/src/styles/ChannelPage.css | 23 +++++++++++++++++++++++
 2 files changed, 28 insertions(+), 3 deletions(-)

diff --git a/front/src/pages/ChannelPage.tsx b/front/src/pages/ChannelPage.tsx
index e8f8656..d747d5c 100644
--- a/front/src/pages/ChannelPage.tsx
+++ b/front/src/pages/ChannelPage.tsx
@@ -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
diff --git a/front/src/styles/ChannelPage.css b/front/src/styles/ChannelPage.css
index 034693e..bf14d8f 100644
--- a/front/src/styles/ChannelPage.css
+++ b/front/src/styles/ChannelPage.css
@@ -16,6 +16,29 @@
 
 .message-form {
     margin: 16px 0;
+    position: relative;
+}
+
+.mentions {
+    position: absolute;
+    top: 100%;
+    border: 1px solid #270722;
+    padding: 5px;
+    display: flex;
+    flex-direction: column;
+    justify-content: start;
+    align-items: left;
+    gap: 5px;
+    width: 20%;
+    background-color: white;
+}
+
+.mention {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: top;
+    gap: 5px;
 }
 
 .login-prompt {