fix: LSDV-5482: Fix autocomplete Escape in modal (#4692)

* fix: LSDV-5482: Fix autocomplete Escape in modal

Don't close modal when Escape is pressed during config editing.

This switches Create Project modal's escape handler from capture to bubble event phase.

* ci: Build frontend

Workflow run: https://github.com/HumanSignal/label-studio/actions/runs/5975239509

---------

Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com>

label_studio/frontend/src/components/Modal/ModalPopup.js

@@ -7,7 +7,7 @@ import { aroundTransition } from '../../utils/transition';
 import { Button } from '../Button/Button';
 import "./Modal.styl";
 
-const {Block, Elem} = BemWithSpecifiContext();
+const { Block, Elem } = BemWithSpecifiContext();
 
 const ModalContext = createContext();
 
@@ -32,11 +32,13 @@ export class Modal extends React.Component {
       setTimeout(() => this.show(), 30);
     }
 
-    document.addEventListener('keydown', this.closeOnEscape, {capture: true});
+    // with `allowToInterceptEscape` we can prevent closing modal on escape
+    // by handling it inside modal, before event will be bubbled here
+    document.addEventListener('keydown', this.closeOnEscape, { capture: !this.props.allowToInterceptEscape });
   }
 
   componentWillUnmount() {
-    document.removeEventListener('keydown', this.closeOnEscape, {capture: true});
+    document.removeEventListener('keydown', this.closeOnEscape, { capture: !this.props.allowToInterceptEscape });
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -71,7 +73,7 @@ export class Modal extends React.Component {
     });
   }
 
-  render () {
+  render() {
     if (!this.state.visible) return null;
 
     const bare = this.props.bare;
@@ -105,7 +107,7 @@ export class Modal extends React.Component {
                   )}
                 </Modal.Header>
               )}
-              <Elem name="body" mod={{bare}}>
+              <Elem name="body" mod={{ bare }}>
                 {this.body}
               </Elem>
               {this.props.footer && (
@@ -124,7 +126,7 @@ export class Modal extends React.Component {
 
   onClickOutside = (e) => {
     if (!this.modalRef.current) return;
-    const {closeOnClickOutside} = this.props;
+    const { closeOnClickOutside } = this.props;
     const allowClose = this.props.allowClose !== false;
     const isInModal = this.modalRef.current.contains(e.target);
     const content = cn('modal').elem('content').closest(e.target);
@@ -180,6 +182,7 @@ export class Modal extends React.Component {
   get body() {
     if (this.state.body) {
       const Content = this.state.body;
+
       return Content instanceof Function ? <Content/> : Content;
     } else {
       return this.props.children;
@@ -189,6 +192,7 @@ export class Modal extends React.Component {
   get footer() {
     if (this.state.footer) {
       const Content = this.state.footer;
+
       return Content instanceof Function ? <Content/> : Content;
     }
 
@@ -197,13 +201,13 @@ export class Modal extends React.Component {
 }
 
 Modal.Header = ({ children, divided }) => (
-  <Elem name="header" mod={{divided}}>
+  <Elem name="header" mod={{ divided }}>
     {children}
   </Elem>
 );
 
 Modal.Footer = ({ children, bare }) => (
-  <Elem name="footer" mod={{bare}}>
+  <Elem name="footer" mod={{ bare }}>
     {children}
   </Elem>
 );

label_studio/frontend/src/pages/CreateProject/Config/Config.js

@@ -444,6 +444,8 @@ const Configurator = ({ columns, config, project, template, setTemplate, onBrows
                   },
                   hintOptions: { schemaInfo: tags },
                 }}
+                // don't close modal with Escape while editing config
+                onKeyDown={(editor, e) => { if (e.code === 'Escape') e.stopPropagation(); }}
                 onChange={(editor, data, value) => onChange(value)}
               />
             </div>

label_studio/frontend/src/pages/CreateProject/CreateProject.js

@@ -141,7 +141,14 @@ export const CreateProject = ({ onClose }) => {
   }, [project]);
 
   return (
-    <Modal onHide={onDelete} fullscreen visible bare closeOnClickOutside={false}>
+    <Modal
+      onHide={onDelete}
+      closeOnClickOutside={false}
+      allowToInterceptEscape
+      fullscreen
+      visible
+      bare
+    >
       <div className={rootClass}>
         <Modal.Header>
           <h1>Create Project</h1>