From c5d6caef6360577841e425959aba682d1b6fc712 Mon Sep 17 00:00:00 2001
From: Jesse Chan <jc@linux.com>
Date: Tue, 27 Oct 2020 02:21:55 +0800
Subject: [PATCH] client: FilesystemBrowserTextbox, TagSelect: use more precise
 detection of out-of-view click

---
 .../filesystem/FilesystemBrowserTextbox.tsx   | 11 ++++---
 .../general/form-elements/TagSelect.tsx       | 14 ++++++---
 .../javascript/ui/components/FormRowGroup.tsx | 10 ++++--
 .../javascript/ui/components/FormRowItem.tsx  | 31 +++++++++----------
 4 files changed, 38 insertions(+), 28 deletions(-)

diff --git a/client/src/javascript/components/general/filesystem/FilesystemBrowserTextbox.tsx b/client/src/javascript/components/general/filesystem/FilesystemBrowserTextbox.tsx
index 4e8fc3a9..0fd3ebfa 100644
--- a/client/src/javascript/components/general/filesystem/FilesystemBrowserTextbox.tsx
+++ b/client/src/javascript/components/general/filesystem/FilesystemBrowserTextbox.tsx
@@ -26,9 +26,8 @@ interface FilesystemBrowserTextboxStates {
 
 class FilesystemBrowserTextbox extends React.Component<FilesystemBrowserTextboxProps, FilesystemBrowserTextboxStates> {
   contextMenuInstanceRef: ContextMenu | null = null;
-
   contextMenuNodeRef: HTMLDivElement | null = null;
-
+  formRowRef = React.createRef<HTMLDivElement>();
   textboxRef: HTMLInputElement | null = null;
 
   constructor(props: FilesystemBrowserTextboxProps) {
@@ -114,8 +113,10 @@ class FilesystemBrowserTextbox extends React.Component<FilesystemBrowserTextboxP
     this.setState({destination, isDirectoryListOpen: isDirectory});
   };
 
-  handleDocumentClick = () => {
-    this.closeDirectoryList();
+  handleDocumentClick = (e: Event) => {
+    if (!this.formRowRef.current?.contains((e.target as unknown) as Node)) {
+      this.closeDirectoryList();
+    }
   };
 
   handleModalDismiss = () => {
@@ -167,7 +168,7 @@ class FilesystemBrowserTextbox extends React.Component<FilesystemBrowserTextboxP
     }
 
     return (
-      <FormRowGroup>
+      <FormRowGroup ref={this.formRowRef}>
         <FormRow>
           <Textbox
             addonPlacement="after"
diff --git a/client/src/javascript/components/general/form-elements/TagSelect.tsx b/client/src/javascript/components/general/form-elements/TagSelect.tsx
index 858a5ef8..031be01d 100644
--- a/client/src/javascript/components/general/form-elements/TagSelect.tsx
+++ b/client/src/javascript/components/general/form-elements/TagSelect.tsx
@@ -21,8 +21,8 @@ interface TagSelectStates {
 }
 
 export default class TagSelect extends Component<TagSelectProps, TagSelectStates> {
+  formRowRef = React.createRef<HTMLDivElement>();
   menuRef: HTMLDivElement | null = null;
-
   textboxRef: HTMLInputElement | null = null;
 
   tagMenuItems = Object.keys(TorrentFilterStore.taxonomy.tagCounts).reduce((accumulator: React.ReactNodeArray, tag) => {
@@ -66,13 +66,13 @@ export default class TagSelect extends Component<TagSelectProps, TagSelectStates
       window.addEventListener('scroll', this.handleWindowScroll, {
         capture: true,
       });
-      document.addEventListener('click', this.toggleOpenState);
+      document.addEventListener('click', this.handleDocumentClick);
     } else if (!isOpen && prevState.isOpen) {
       window.addEventListener('keydown', this.handleKeyDown);
       window.removeEventListener('scroll', this.handleWindowScroll, {
         capture: true,
       });
-      document.removeEventListener('click', this.toggleOpenState);
+      document.removeEventListener('click', this.handleDocumentClick);
     }
   }
 
@@ -97,6 +97,12 @@ export default class TagSelect extends Component<TagSelectProps, TagSelectStates
     }, []);
   }
 
+  handleDocumentClick = (e: Event) => {
+    if (!this.formRowRef.current?.contains((e.target as unknown) as Node)) {
+      this.toggleOpenState();
+    }
+  };
+
   handleItemClick = (tag: string) => {
     let {selectedTags} = this.state;
 
@@ -147,7 +153,7 @@ export default class TagSelect extends Component<TagSelectProps, TagSelectStates
     });
 
     return (
-      <FormRowItem>
+      <FormRowItem ref={this.formRowRef}>
         <label className="form__element__label">{label}</label>
         <div className={classes}>
           <Textbox
diff --git a/client/src/javascript/ui/components/FormRowGroup.tsx b/client/src/javascript/ui/components/FormRowGroup.tsx
index 07f1ba0c..294109f9 100644
--- a/client/src/javascript/ui/components/FormRowGroup.tsx
+++ b/client/src/javascript/ui/components/FormRowGroup.tsx
@@ -4,8 +4,12 @@ interface FormRowGroupProps {
   children: React.ReactNode;
 }
 
-const FormRowGroup: React.FC<FormRowGroupProps> = ({children}: FormRowGroupProps) => {
-  return <div className="form__row form__row--group">{children}</div>;
-};
+const FormRowGroup = React.forwardRef<HTMLDivElement, FormRowGroupProps>(({children}: FormRowGroupProps, ref) => {
+  return (
+    <div className="form__row form__row--group" ref={ref}>
+      {children}
+    </div>
+  );
+});
 
 export default FormRowGroup;
diff --git a/client/src/javascript/ui/components/FormRowItem.tsx b/client/src/javascript/ui/components/FormRowItem.tsx
index ac9f645e..c2e5a2ed 100644
--- a/client/src/javascript/ui/components/FormRowItem.tsx
+++ b/client/src/javascript/ui/components/FormRowItem.tsx
@@ -20,23 +20,22 @@ export interface FormRowItemProps {
     | 'seven-eighths';
 }
 
-const FormRowItem: React.FC<FormRowItemProps> = ({
-  children,
-  className,
-  type,
-  width,
-  grow,
-  shrink,
-}: FormRowItemProps) => {
-  const classes = classnames('form__row__item', className, {
-    [`form__row__item--${width}`]: width,
-    'form__row__item--grow': grow,
-    'form__row__item--shrink': shrink,
-    'form__row__item--error': type === 'error',
-  });
+const FormRowItem = React.forwardRef<HTMLDivElement, FormRowItemProps>(
+  ({children, className, type, width, grow, shrink}: FormRowItemProps, ref) => {
+    const classes = classnames('form__row__item', className, {
+      [`form__row__item--${width}`]: width,
+      'form__row__item--grow': grow,
+      'form__row__item--shrink': shrink,
+      'form__row__item--error': type === 'error',
+    });
 
-  return <div className={classes}>{children}</div>;
-};
+    return (
+      <div className={classes} ref={ref}>
+        {children}
+      </div>
+    );
+  },
+);
 
 FormRowItem.defaultProps = {
   grow: true,