Новый виды условных шагов (#6)

Co-authored-by: gorbenko.pavel <gorbenko.pavel@tansu.kz>
Reviewed-on: http://git.tnsu.kz/gorbenko.pavel/tnsu-approval-route/pulls/6

frontend/src/webparts/approvalAdmin/components/ui/SearchableSelect.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import styles from './SearchableSelect.module.scss';
+import { DropdownPortal } from './DropdownPortal';
 import { Icon } from './Icon';
 import { texts } from '../../texts';
 
@@ -40,6 +41,7 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState('');
   const rootRef = React.useRef<HTMLDivElement>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
   const searchRef = React.useRef<HTMLInputElement>(null);
 
   // Сохранённое значение может отсутствовать в справочнике (запись удалили в 1С
@@ -68,9 +70,10 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
     if (!open) return;
 
     const onDocumentMouseDown = (e: MouseEvent): void => {
-      if (rootRef.current && !rootRef.current.contains(e.target as Node)) {
-        setOpen(false);
-      }
+      const target = e.target as Node;
+      if (rootRef.current?.contains(target)) return;
+      if (menuRef.current?.contains(target)) return;
+      setOpen(false);
     };
     const onKeyDown = (e: KeyboardEvent): void => {
       if (e.key === 'Escape') setOpen(false);
@@ -113,42 +116,40 @@ export const SearchableSelect: React.FC<ISearchableSelectProps> = ({
         <Icon name="chevron-down" size="sm" className={styles.chevron} />
       </button>
 
-      {open && (
-        <div className={styles.menu}>
-          <input
-            ref={searchRef}
-            className={styles.search}
-            placeholder={searchPlaceholder}
-            value={query}
-            onChange={e => setQuery(e.target.value)}
-          />
-          <div className={styles.list}>
-            {filtered.length === 0 && (
-              <div className={styles.empty}>
-                {effectiveOptions.length === 0 ? emptyMessage : texts.select.nothingFound}
-              </div>
-            )}
-            {filtered.map(opt => (
-              <button
-                type="button"
-                key={opt.value}
-                className={`${styles.item} ${opt.value === value ? styles.selected : ''}`}
-                onClick={() => pick(opt.value)}
-              >
-                {opt.label}
-                {opt.sublabel && <span className={styles.itemSub}>{opt.sublabel}</span>}
-              </button>
-            ))}
-          </div>
-          {allowClear && value && (
-            <div className={styles.clear}>
-              <button type="button" className={styles.item} onClick={() => pick('')}>
-                {clearLabel}
-              </button>
+      <DropdownPortal anchorRef={rootRef} open={open} className={styles.menu} menuRef={menuRef}>
+        <input
+          ref={searchRef}
+          className={styles.search}
+          placeholder={searchPlaceholder}
+          value={query}
+          onChange={e => setQuery(e.target.value)}
+        />
+        <div className={styles.list}>
+          {filtered.length === 0 && (
+            <div className={styles.empty}>
+              {effectiveOptions.length === 0 ? emptyMessage : texts.select.nothingFound}
             </div>
           )}
+          {filtered.map(opt => (
+            <button
+              type="button"
+              key={opt.value}
+              className={`${styles.item} ${opt.value === value ? styles.selected : ''}`}
+              onClick={() => pick(opt.value)}
+            >
+              {opt.label}
+              {opt.sublabel && <span className={styles.itemSub}>{opt.sublabel}</span>}
+            </button>
+          ))}
         </div>
-      )}
+        {allowClear && value && (
+          <div className={styles.clear}>
+            <button type="button" className={styles.item} onClick={() => pick('')}>
+              {clearLabel}
+            </button>
+          </div>
+        )}
+      </DropdownPortal>
     </div>
   );
 };