Как увеличивать высоту textarea верх, когда много текста?

Question

[QnaTwitt]

У меня есть вот такой React компонент

const textarea = useRef<HTMLTextAreaElement | null>(null);

  const textareaInputHandler = () => {
    if (textarea.current) {
      textarea.current.style.height = '18px';
      textarea.current.style.height = `${Math.min(textarea.current.scrollHeight, 100)}px`;
    }
  };

<label className="chat-input" htmlFor="messageInput" title={tr.get('chats.textarea')}>
      <label>
        <input type="file" accept="image/png , image/jpeg, image/webp" />
        <i className="icon icon-attachment"></i>
      </label>
      <textarea
        ref={textarea}
        onInput={textareaInputHandler}
        id="messageInput"
      />
      <button type="submit">
        <i className="icon icon-send-message"></i>
      </button>
    </label>

Когда много текста height textarea увеличивается...
Но увеличивается вниз, нужно как-то увеличивать его вверх, похоже сделано в телеграмм...

Стили

.chat-input {
  position: sticky;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  cursor: text;
  column-gap: 20px;

  &::before {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    content: "";
    z-index: -1;
    background-color: rgba(#ececec, 0.8);
    backdrop-filter: blur(50px);
  }

  button i {
    font-size: 14px;
    color: black;
    cursor: pointer;
    transition: color 0.3s ease-in-out;

    &:hover {
      color: lighten(black, 40%);
    }
  }

  textarea {
    width: 100%;
    font-style: italic;
    font-weight: 300;
    letter-spacing: 0.02em;
    color: black;
    background: none;
    border: none;
    resize: none;

    &::placeholder {
      font-style: inherit;
      font-weight: inherit;
      font-size: inherit;
      line-height: inherit;
      letter-spacing: inherit;
      color: inherit;
      user-select: none;
    }
  }

  label {
    cursor: pointer;

    input {
      display: none;
    }

    i {
      font-size: 16px;
      transition: color 0.3s ease-in-out;

      &:hover {
        color: lighten(black, 40%);
      }
    }
  }
  @media (min-width: 320px) {
    padding: 20px 24px;

    textarea {
      height: 14px;
      font-size: 14px;
      line-height: 14px;
    }
  }

  @media (max-width: 1024px) {
    padding: 20px 32px;

    textarea {
      height: 15px;
      font-size: 15px;
      line-height: 15px;
    }
  }

  @media (max-width: 1280px) {
    padding: 23px 40px;
    column-gap: 40px;

    button i {
      font-size: 16px;
    }

    textarea {
      height: 16px;
      font-size: 16px;
      line-height: 16px;
    }

    label i {
      font-size: 18px;
    }
  }

  @media (max-width: 1920px) {
    padding: 32px 78px;

    button i {
      font-size: 20px;
    }

    textarea {
      height: 22px;
      font-size: 18px;
      line-height: 22px;
    }

    label i {
      font-size: 22px;
    }
  }
}

Comments

[QnaTwitt]

Ankhena извеняюсь, может знаете решение)

Answer 1

[ka-terok]

Высота увеличивается не в какую-то сторону, а меняет свое значение. Посмотрите расположение блоков в верстке и их ограничения с разных сторон, а так же вертикальную и горизонтальную позицию.
Ниже приведу инлайновые стили для примера, чтобы было понятно о чем я говорю.

<div
            style={{
              display: "flex",
              flexDirection: "column",
              justifyContent: "flex-end",
            }}
          >
            <label className="chat-input" htmlFor="messageInput">
              <label>
                <input
                  type="file"
                  accept="image/png , image/jpeg, image/webp"
                />
                <i className="icon icon-attachment"></i>
              </label>
              <textarea
                ref={textarea}
                onInput={textareaInputHandler}
                id="messageInput"
              />
              <button type="submit">
                <i className="icon icon-send-message"></i>
              </button>
            </label>
          </div>

Comments

[QnaTwitt]

Что-то не совсем понял что нужно сделать)

[ka-terok]

QnaTwitt, со style, который я написала работает как надо?

[QnaTwitt]

ka-terok, Нет

[ka-terok]

У тебя блок с кнопкой зеленой видимо ограничивает движение вверх и единственное место куда он может расширить блок это низ добавь высоту

display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-height: 100px;
    height: 100px;