InputValue Handling

[Satoshi S.]

Describe the bug

This bugs were mentioned by @Arol15

1. clear the input field after a message has been successfully posted;
2. fix TS warning for this line: const text = form.get("message").valueOf(); - text can be null;
3. make input field required or disable send message button if no input entered;

Steps to reproduce

1. Go to a chat room.
2. Submit the empty string. You can see the party server received the empty text
3. Put any message in the input field. The message stays after submission.

Expected behavior

• Users should not be able to submit an empty text.
• Input field should be cleared after submission.

Screenshots

Possible Solution

Right now, we use the FormData to get the input value

const form = new FormData(event.target as HTMLFormElement);
          const text = form.get("message").valueOf();

I think it's better to utilize useState for inputValue to reset the input field after submission.

I would add const [inputValue, setInputValue] = useState(""); to the line 15,
add value={inputValue} onChange={(e) => { setInputValue(e.target.value); }} to the input element at the line 52,
and modify form onSubmit like this

<form
        className="mt-2 flex flex-col gap-4"
        onSubmit={(event) => {
          if (inputValue !== "") {
            socket.send(JSON.stringify({ user: username, text: inputValue }));
            setInputValue("");}
          event.preventDefault();
        }}
      >

[github-actions]

Thanks for the issue, our team will look into it as soon as possible! If you would like to work on this issue, please wait for us to decide if it's ready. The issue will be ready to work on once we remove the "needs triage" label.

To claim an issue that does not have the "needs triage" label, please leave a comment that says ".take".

For full info on how to contribute, please check out our contributors guide.

[Nick Taylor]

It's currently an uncontrolled input. I opted to not use component state. Once it runs socket.send, you can run form.reset() and it will clear the message.

[Lora Rusinouskaya]

.take