feat(markup search): updated SearchPopup

gravity-ui · Jul 25, 2024 · 919e98f · 919e98f
1 parent 91bdf5d
commit 919e98f
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 26 deletions.
diff --git 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
@@ -8,16 +8,14 @@ import {
     Icon,
     PopoverAnchorRef,
     Popup,
-    Portal,
     TextInput,
     TextInputProps,
     sp,
 } from '@gravity-ui/uikit';
 
 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} />}</>
     );
 };