Textarea autoresize

src/components/Inbox/DialogCard.tsx

@@ -1,8 +1,8 @@
 import './DialogCard.module.scss'
-import styles from './DialogCard.module.scss'
 import DialogAvatar from './DialogAvatar'
 import type { Author } from '../../graphql/types.gen'
 import { apiClient } from '../../utils/apiClient'
+import styles from './DialogCard.module.scss'
 
 type Props = {
   online?: boolean

src/components/Views/Inbox.tsx

@@ -121,9 +121,14 @@ export const InboxView = () => {
       console.error('[post message error]:', error)
     }
   }
+
+  let formParent // autoresize ghost element
   const handleChangeMessage = (event) => {
     setPostMessageText(event.target.value)
   }
+  createEffect(() => {
+    formParent.dataset.replicatedValue = postMessageText()
+  })
 
   return (
     <div class="messages container">
@@ -197,12 +202,16 @@ export const InboxView = () => {
             </div>
           </div>
 
-          <div class="conversation__message-form">
+          <div class="message-form">
+            <div class="wrapper">
+              <div class="grow-wrap" ref={formParent}>
                 <textarea
                   value={postMessageText()}
+                  rows={1}
                   onInput={(event) => handleChangeMessage(event)}
                   placeholder="Написать сообщение"
                 />
+              </div>
               <button type="submit" disabled={postMessageText().length === 0} onClick={handleSubmit}>
                 <Icon name="send-message" />
               </button>
@@ -210,5 +219,6 @@ export const InboxView = () => {
           </div>
         </div>
       </div>
+    </div>
   )
 }

src/styles/Inbox.scss

@@ -161,30 +161,64 @@ body {
   position: relative;
 }
 
-.conversation__message-form {
+.message-form {
-  border-top: 1px solid #141414;
+  background: #fff;
+  padding: 2px 0 12px 0;
+
+  > .wrapper {
+    border: 2px solid #cccccc;
+    border-radius: 16px;
+    padding: 4px;
     display: flex;
     flex-direction: row;
     align-items: center;
-  padding: 1em 1em 1em 0;
 
-  textarea {
+    > .grow-wrap {
-    @include font-size(2rem);
+      display: grid;
-
-    font-family: inherit;
-    height: 4.4em;
       width: 100%;
-    padding: 1em;
+
-    margin-bottom: 0;
+      &::after {
-    min-height: unset;
+        content: attr(data-replicated-value) ' ';
+        white-space: pre-wrap;
+        visibility: hidden;
+        transition: height 1.3s ease-in-out;
       }
 
-  button {
+      & > textarea {
+        margin-bottom: 0;
+        font-family: inherit;
+        border: none;
+        resize: none;
+        overflow: hidden;
+
+        &:focus,
+        &:focus-visible,
+        &:active {
+          border: none;
+          outline: none;
+          box-shadow: none;
+        }
+      }
+
+      &::after,
+      & > textarea {
+        /* Identical styling required!! */
+        font-weight: 400;
+        font-size: 14px;
+        line-height: 20px;
+        padding: 8px;
+        grid-area: 1 / 1 / 2 / 2;
+        width: 100%;
+      }
+    }
+
+    > button {
       border: none;
       cursor: pointer;
-    padding: 0 0 0 0.4em;
       text-align: center;
-    width: 5.6rem;
+      width: 20px;
+      height: 20px;
+      margin: auto 8px 8px 0;
 
       &:hover {
         .icon {
@@ -192,12 +226,12 @@ body {
         }
       }
 
-    .icon {
+      > .icon {
-      height: 50%;
+        width: 100%;
-      margin: 0 auto;
+        height: 100%;
         opacity: 0.2;
         transition: opacity 0.3s;
-      width: 50%;
+      }
     }
   }
 }

src/utils/config.ts

@@ -1,4 +1,5 @@
 export const isDev = import.meta.env.MODE === 'development'
 
+// export const apiBaseUrl = 'https://testapi.discours.io'
 export const apiBaseUrl = 'https://newapi.discours.io'
 // export const apiBaseUrl = 'http://localhost:8080'