From 8515bc79628c6e753a09a7da42eff9ce7ed4ade7 Mon Sep 17 00:00:00 2001
From: Sunny Ripert <sunny@sunfox.org>
Date: Mon, 7 Nov 2022 15:41:42 +0100
Subject: [PATCH] Add form element on focal point modal (#19834)

* Add form element on focal point modal

* Add type="button" for detection button
---
 .../ui/components/focal_point_modal.js        | 27 +++++++++++++------
 1 file changed, 19 insertions(+), 8 deletions(-)

diff --git a/app/javascript/mastodon/features/ui/components/focal_point_modal.js b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
index a2e6b3d16..ba8aa8f03 100644
--- a/app/javascript/mastodon/features/ui/components/focal_point_modal.js
+++ b/app/javascript/mastodon/features/ui/components/focal_point_modal.js
@@ -176,14 +176,14 @@ class FocalPointModal extends ImmutablePureComponent {
 
   handleKeyDown = (e) => {
     if (e.keyCode === 13 && (e.ctrlKey || e.metaKey)) {
-      e.preventDefault();
-      e.stopPropagation();
       this.props.onChangeDescription(e.target.value);
-      this.handleSubmit();
+      this.handleSubmit(e);
     }
   }
 
-  handleSubmit = () => {
+  handleSubmit = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
     this.props.onSave(this.props.description, this.props.focusX, this.props.focusY);
   }
 
@@ -313,7 +313,7 @@ class FocalPointModal extends ImmutablePureComponent {
         </div>
 
         <div className='report-modal__container'>
-          <div className='report-modal__comment'>
+          <form className='report-modal__comment' onSubmit={this.handleSubmit} >
             {focals && <p><FormattedMessage id='upload_modal.hint' defaultMessage='Click or drag the circle on the preview to choose the focal point which will always be in view on all thumbnails.' /></p>}
 
             {thumbnailable && (
@@ -361,12 +361,23 @@ class FocalPointModal extends ImmutablePureComponent {
             </div>
 
             <div className='setting-text__toolbar'>
-              <button disabled={detecting || media.get('type') !== 'image' || is_changing_upload} className='link-button' onClick={this.handleTextDetection}><FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' /></button>
+              <button
+                type='button'
+                disabled={detecting || media.get('type') !== 'image' || is_changing_upload}
+                className='link-button'
+                onClick={this.handleTextDetection}
+              >
+                <FormattedMessage id='upload_modal.detect_text' defaultMessage='Detect text from picture' />
+              </button>
               <CharacterCounter max={1500} text={detecting ? '' : description} />
             </div>
 
-            <Button disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload} text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)} onClick={this.handleSubmit} />
-          </div>
+            <Button
+              type='submit'
+              disabled={!dirty || detecting || isUploadingThumbnail || length(description) > 1500 || is_changing_upload}
+              text={intl.formatMessage(is_changing_upload ? messages.applying : messages.apply)}
+            />
+          </form>
 
           <div className='focal-point-modal__content'>
             {focals && (