From 919e98fa74ac73009b76804b05fd510606ce6c14 Mon Sep 17 00:00:00 2001
From: Sergey Makhnatkin <makhnatkin@yandex-team.ru>
Date: Thu, 25 Jul 2024 11:55:27 +0300
Subject: [PATCH] feat(markup search): updated SearchPopup

---
 src/markup/codemirror/search-plugin/plugin.ts |  1 +
 .../search-plugin/view/SearchPopup.tsx        | 39 +++++++------------
 2 files changed, 14 insertions(+), 26 deletions(-)

diff --git a/src/markup/codemirror/search-plugin/plugin.ts b/src/markup/codemirror/search-plugin/plugin.ts
index 359ac78a..9ce8ca8a 100644
--- a/src/markup/codemirror/search-plugin/plugin.ts
+++ b/src/markup/codemirror/search-plugin/plugin.ts
@@ -64,6 +64,7 @@ export const SearchPanelPlugin = ViewPlugin.fromClass(
                     .facet(ReactRendererFacet)
                     .createItem('cm-search', () =>
                         React.createElement(PortalWithPopup, {
+                            open: true,
                             anchor: this.anchor,
                             onChange: this.handleChange,
                             onClose: this.handleClose,
diff --git a/src/markup/codemirror/search-plugin/view/SearchPopup.tsx b/src/markup/codemirror/search-plugin/view/SearchPopup.tsx
index f194dbe6..59e8932c 100644
--- a/src/markup/codemirror/search-plugin/view/SearchPopup.tsx
+++ b/src/markup/codemirror/search-plugin/view/SearchPopup.tsx
@@ -8,7 +8,6 @@ import {
     Icon,
     PopoverAnchorRef,
     Popup,
-    Portal,
     TextInput,
     TextInputProps,
     sp,
@@ -16,8 +15,7 @@ import {
 
 import {cn} from '../../../../classname';
 import {i18n} from '../../../../i18n/search';
-import {Key} from '../../../../shortcuts';
-import {combinedKeyHandler} from '../../../../utils/handlers';
+import {enterKeyHandler} from '../../../../utils/handlers';
 
 import './SearchPopup.scss';
 
@@ -100,10 +98,7 @@ export const SearchCard: React.FC<SearchCardProps> = ({
         setInputFocus();
     };
 
-    const handleSearchKeyPress: TextInputProps['onKeyPress'] = combinedKeyHandler({
-        [Key.Enter]: handleNext,
-        [Key.Esc]: handleClose,
-    });
+    const handleSearchKeyPress: TextInputProps['onKeyPress'] = enterKeyHandler(handleNext);
 
     return (
         <Card className={b()}>
@@ -157,14 +152,19 @@ export interface SearchPopupProps {
     open: boolean;
 }
 
-export const SearchPopup: React.FC<SearchPopupProps> = ({open, anchor, ...props}) => {
+export const SearchPopup: React.FC<SearchPopupProps> = ({open, anchor, onClose, ...props}) => {
     const anchorRef = useRef<HTMLElement>(anchor);
 
     return (
         <>
             {anchorRef && (
-                <Popup open={open} anchorRef={anchorRef as PopoverAnchorRef} placement="bottom-end">
-                    <SearchCard {...props} />
+                <Popup
+                    onEscapeKeyDown={onClose}
+                    open={open}
+                    anchorRef={anchorRef as PopoverAnchorRef}
+                    placement="bottom-end"
+                >
+                    <SearchCard onClose={onClose} {...props} />
                 </Popup>
             )}
         </>
@@ -173,24 +173,11 @@ export const SearchPopup: React.FC<SearchPopupProps> = ({open, anchor, ...props}
 
 SearchPopup.displayName = 'SearchPopup';
 
-interface PopupWithRefProps extends Omit<SearchPopupProps, 'open' | 'anchor'> {
+interface PopupWithRefProps extends Omit<SearchPopupProps, 'anchor'> {
     anchor: HTMLElement | null;
 }
-export const PortalWithPopup: React.FC<PopupWithRefProps> = ({anchor, onClose, ...props}) => {
-    const [open, setOpen] = useState(true);
-
-    const handleClose = () => {
-        setOpen(false);
-        onClose();
-    };
-
+export const PortalWithPopup: React.FC<PopupWithRefProps> = ({anchor, open, onClose, ...props}) => {
     return (
-        <>
-            {anchor && (
-                <Portal container={anchor}>
-                    <SearchPopup open={open} onClose={handleClose} anchor={anchor} {...props} />
-                </Portal>
-            )}
-        </>
+        <>{anchor && <SearchPopup open={open} onClose={onClose} anchor={anchor} {...props} />}</>
     );
 };