Restrict querySelectorAll to the upload form component

2 files changed, 16 insertions, 5 deletions

diff --git a/app/javascript/flavours/glitch/features/composer/index.js b/app/javascript/flavours/glitch/features/composer/index.js
index b823f966f..bc409f0a3 100644
--- a/app/javascript/flavours/glitch/features/composer/index.js
+++ b/app/javascript/flavours/glitch/features/composer/index.js
@@ -222,7 +222,7 @@ const handlers = {
 
   //  Submits the status.
   handleSubmit () {
-    const { textarea: { value } } = this;
+    const { textarea: { value }, uploadForm } = this;
     const {
       onChangeText,
       onSubmit,
@@ -249,9 +249,11 @@ const handlers = {
     // Submit unless there are media with missing descriptions
     if (mediaDescriptionConfirmation && onMediaDescriptionConfirm && media && media.some(item => !item.get('description'))) {
       const firstWithoutDescription = media.findIndex(item => !item.get('description'));
-      const inputs = document.querySelectorAll('.composer--upload_form--item input');
-      if (inputs.length == media.size && firstWithoutDescription !== -1) {
-        inputs[firstWithoutDescription].focus();
+      if (uploadForm) {
+        const inputs = uploadForm.querySelectorAll('.composer--upload_form--item input');
+        if (inputs.length == media.size && firstWithoutDescription !== -1) {
+          inputs[firstWithoutDescription].focus();
+        }
       }
       onMediaDescriptionConfirm();
     } else if (onSubmit) {
@@ -259,6 +261,11 @@ const handlers = {
     }
   },
 
+  //  Sets a reference to the upload form.
+  handleRefUploadForm (uploadFormComponent) {
+    this.uploadForm = uploadFormComponent;
+  },
+
   //  Sets a reference to the textarea.
   handleRefTextarea (textareaComponent) {
     if (textareaComponent) {
@@ -365,6 +372,7 @@ class Composer extends React.Component {
       handleSecondarySubmit,
       handleSelect,
       handleSubmit,
+      handleRefUploadForm,
       handleRefTextarea,
       handleRefSpoilerText,
     } = this.handlers;
@@ -455,6 +463,7 @@ class Composer extends React.Component {
             onRemove={onUndoUpload}
             progress={progress}
             uploading={isUploading}
+            handleRef={handleRefUploadForm}
           />
         ) : null}
         <ComposerOptions
diff --git a/app/javascript/flavours/glitch/features/composer/upload_form/index.js b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
index f3cadc2f5..c2ff66623 100644
--- a/app/javascript/flavours/glitch/features/composer/upload_form/index.js
+++ b/app/javascript/flavours/glitch/features/composer/upload_form/index.js
@@ -17,12 +17,13 @@ export default function ComposerUploadForm ({
   onRemove,
   progress,
   uploading,
+  handleRef,
 }) {
   const computedClass = classNames('composer--upload_form', { uploading });
 
   //  The result.
   return (
-    <div className={computedClass}>
+    <div className={computedClass} ref={handleRef}>
       {uploading ? <ComposerUploadFormProgress progress={progress} /> : null}
       {media ? (
         <div className='content'>
@@ -55,4 +56,5 @@ ComposerUploadForm.propTypes = {
   onRemove: PropTypes.func.isRequired,
   progress: PropTypes.number,
   uploading: PropTypes.bool,
+  handleRef: PropTypes.func,
 };