Merge pull request #1982 from Ateina/1966-ListItemAttachments-cancel-event

1966 ListItemAttachments cancel event is hanging the control

Author: joaojmendes

src/controls/listItemAttachments/IUploadAttachmentProps.ts

@@ -9,4 +9,5 @@ export interface IUploadAttachmentProps {
   context: BaseComponentContext;
   fireUpload?: boolean;
   onAttachmentUpload: (file?: File) => void;
+  onUploadDialogClosed: () => void;
 }

src/controls/listItemAttachments/ListItemAttachments.tsx

@@ -93,6 +93,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
       }, () => this.loadAttachments().then(resolve));
     });
   }
+
   protected loadAttachmentsPreview(files: IListItemAttachmentFile[]): Promise<void> {
     const filePreviewImages = files.map(file => this.loadAttachmentPreview(file));
     return Promise.all(filePreviewImages).then(filePreviews => {
@@ -252,6 +253,7 @@ export class ListItemAttachments extends React.Component<IListItemAttachmentsPro
           context={this.props.context}
           onAttachmentUpload={this._onAttachmentUpload}
           fireUpload={this.state.fireUpload}
+          onUploadDialogClosed={() => this.setState({ fireUpload: false })}
         />
 
         {

src/controls/listItemAttachments/UploadAttachment.tsx

@@ -89,6 +89,25 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
 
   }
 
+  /**
+   * Called when the hidden file input is clicked (activated).
+   * @param e - Mouse click event on the file input element.
+  */
+  private onInputActivated = (e: React.MouseEvent<HTMLInputElement>): void => {
+    setTimeout(() => {
+      window.addEventListener('focus', this.handleFocusAfterDialog);
+    }, 300);
+  }
+
+  /**
+   * Handles window focus event after the file picker dialog is closed.
+  */
+  private handleFocusAfterDialog = (): void => {
+    window.removeEventListener('focus', this.handleFocusAfterDialog);
+    this._isFileExplorerOpen = false;
+    this.props.onUploadDialogClosed();
+  };
+
   /**
    * Close dialog
    */
@@ -109,7 +128,9 @@ export class UploadAttachment extends React.Component<IUploadAttachmentProps, IU
                style={{ display: 'none' }}
                type="file"
                onChange={(e) => this.addAttachment(e)}
-               ref={this.fileInput} />
+               onClick={(e) => this.onInputActivated(e)}
+               ref={this.fileInput}
+               />
         <div className={styles.uploadBar}>
           <CommandBar
             items={[{