settings_emoji: Fix file upload bug in upload emoji modal.

Before this commit if a user pressed enter to submit the add emoji form
the uploaded emoji was getting cleared.

This was happening because when we pressed enter the browser tried to
submit the form, because we had two buttons inside that form one for
clearing uploaded emoji and one for uploading emoji they were being
treated as "submit" button and hence their callback ran which in result
was responsible for the bug.

Fixed this by explicitly setting the `type` attribute for those buttons
to `type=button` so that they will not be treated as "submit" button.
Also added the `form_id` option for `dialog_widget` which is needed if
we do want to correctly submit the form by pressing enter.

Fixes: #24972
This commit is contained in:
Lalit 2023-06-28 22:26:40 +05:30 committed by Tim Abbott
parent a361c23aac
commit 1676d0b638
2 changed files with 3 additions and 2 deletions

View File

@ -290,6 +290,7 @@ function show_modal() {
html_body,
html_submit_button: $t_html({defaultMessage: "Confirm"}),
id: "add-custom-emoji-modal",
form_id: "add-custom-emoji-form",
loading_spinner: true,
on_click: add_custom_emoji,
post_render: add_custom_emoji_post_render,

View File

@ -2,8 +2,8 @@
<div>
<input type="file" name="emoji_file_input" class="notvisible"
id="emoji_file_input" value="{{t 'Upload image or GIF' }}"/>
<button class="button white rounded" style="display: none;" id="emoji_image_clear_button">{{t "Clear image" }}</button>
<button class="button rounded" id="emoji_upload_button">{{t "Upload image or GIF" }}</button>
<button type="button" class="button white rounded" style="display: none;" id="emoji_image_clear_button">{{t "Clear image" }}</button>
<button type="button" class="button rounded" id="emoji_upload_button">{{t "Upload image or GIF" }}</button>
<div style="display: none;" id="emoji_preview_text">
Preview: <i id="emoji_placeholder_icon" class="fa fa-file-image-o" aria-hidden="true"></i><img class="emoji" id="emoji_preview_image" src=""/>
</div>