Chatbox text area issue

[freedompraise]

Issue Description

When the user types in multiple paragraphs, the textarea expands as expected. However, after sending the message, the textarea does not shrink back to its default size. It remains expanded even though the content has been cleared.

Steps to Reproduce

1. Open the chatbox.
2. Type a message with multiple lines or paragraphs, causing the textarea to expand.
3. Press "Enter" to send the message.
4. Observe that the textarea remains expanded even after the message is sent and the content is cleared.

Expected Behavior

The textarea should reset to its default height after the message is sent and the content is cleared.

Current Behavior

The textarea retains its expanded height after the message is sent, leading to unnecessary space being displayed.

Possible Solution

The issue might be due to the way the height is being handled. After clearing the textarea, it seems the height property isn’t recalculated. We need to ensure that the height is explicitly reset after the textarea is cleared.

Here’s a potential fix:

1. Reset the height manually after sending the message: Try the following update in the onSendButton method:

onSendButton() {
  const textField = this.chatBox.querySelector("#question-text-area");
  const text = textField.value.trim();
  if (text === "" || text === "\n") {
    return;
  }
  this.updateChatText(text);
  textField.value = "";

  // Explicitly reset the textarea height
  textField.style.height = ""; // Reset height to the default/minimum height
}

The key change should be that setting textField.style.height = "";, ensures the textarea reverts to its default height, but it's not working as supposed

Record

• [x] I have read the Contributing Guidelines
• [x] I have searched the issues for a similar request
• [ ] I want to work on this issue

[jsolly]

I don't think this has been entirely solved by https://github.com/jsolly/awesome-django-blog/pull/461

If I open the chatbox and immediately press enter, an empty message is sent (expected), but the chat send box remains expanded.

In this GIF, I am simply hitting the enter key repeatedly. The chatbox should be shrunk to the original size whenever a message is sent.