Feat: Add keyboard shortcuts for closing modal (Escape) and submitting (Enter) in File Upload Window

[dhairyashiil]

Brief Title

Feat: Add keyboard shortcuts for closing modal (Escape) and submitting (Enter) in File Upload Window

Acceptance Criteria fulfillment

• Pressing the Enter key triggers the submission of the file and prevents the default behavior (such as adding a new line in the text area) when the user is inside the input fields for the filename or description.
• Pressing the Escape key closes the window when the user is inside the input fields for the filename or description.

Fixes #801

Video/Screenshots

Enter.key.file.upload.mp4

PR Test Details

Note: The PR will be ready for live testing at https://rocketchat.github.io/EmbeddedChat/pulls/pr-802 after approval. Contributors are requested to replace <pr_number> with the actual PR number.

[Spiral-Memory]

LGTM !

[dhairyashiil]

LGTM !

Thank you Zishan😄

[Spiral-Memory]

Hey, this only works, when i am focussed on input box, can't we do it without that ?

[dhairyashiil]

Hey, this only works, when i am focussed on input box, can't we do it without that ?

Yes, at first, I tried that by setting an event listener for the 'Enter' and 'Escape' keys, but that is causing one issue: after pressing the 'Enter' key, it uploads the given file and then opens another window to select the file.

Please refer to this screenshot:
this window is opened again -

[Spiral-Memory]

The reason is, after click on the attachment button, the focus is still on the attachment icon and not on the modal

[dhairyashiil]

The reason is, after click on the attachment button, the focus is still on the attachment icon and not on the modal

Hello @Spiral-Memory,
I believe this issue has been fixed by my PR #736.

I have added the event listener logic for the 'Enter' key. I haven't added logic for the 'Escape' key since its default behavior is to close the window.

Please take a look at the video below to see the changes:

Added.EventListener.for.Enter.key.mp4