chore: close on esc

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/CellOptionsPopup.tsx

@@ -30,6 +30,7 @@ export const CellOptionsPopup = ({
   onOutsideClick: () => void;
 }) => {
   const ref = useRef<HTMLDivElement>(null);
+  const inputRef = useRef<HTMLInputElement>(null);
   const { t } = useTranslation('');
   const [adjustedTop, setAdjustedTop] = useState(-100);
   const [value, setValue] = useState('');
@@ -50,6 +51,12 @@ export const CellOptionsPopup = ({
     onOutsideClick();
   });
 
+  useEffect(() => {
+    if (inputRef?.current) {
+      inputRef.current.focus();
+    }
+  }, [inputRef]);
+
   const onKeyDown: KeyboardEventHandler = async (e) => {
     if (e.key === 'Enter' && value.length > 0) {
       await new SelectOptionCellBackendService(cellIdentifier).createOption({ name: value });
@@ -75,14 +82,16 @@ export const CellOptionsPopup = ({
     setValue('');
   };
 
-  useEffect(() => {
-    console.log('loaded data: ', data);
-    console.log('have stored ', databaseStore.fields[cellIdentifier.fieldId]);
-  }, [data]);
+  const onKeyDownWrapper: KeyboardEventHandler = (e) => {
+    if (e.key === 'Escape') {
+      onOutsideClick();
+    }
+  };
 
   return (
     <div
       ref={ref}
+      onKeyDown={onKeyDownWrapper}
       className={`fixed z-10 rounded-lg bg-white px-2 py-2 text-xs shadow-md transition-opacity duration-300 ${
         adjustedTop === -100 ? 'opacity-0' : 'opacity-100'
       }`}
@@ -101,6 +110,7 @@ export const CellOptionsPopup = ({
             )) || ''}
           </div>
           <input
+            ref={inputRef}
             className={'py-2'}
             value={value}
             onChange={(e) => setValue(e.target.value)}

frontend/appflowy_tauri/src/appflowy_app/components/_shared/EditRow/EditRow.tsx

@@ -120,8 +120,14 @@ export const EditRow = ({
       className={`fixed inset-0 z-10 flex items-center justify-center bg-black/30 backdrop-blur-sm transition-opacity duration-300 ${
         unveil ? 'opacity-100' : 'opacity-0'
       }`}
+      onClick={() => onCloseClick()}
     >
-      <div className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12`}>
+      <div
+        onClick={(e) => {
+          e.stopPropagation();
+        }}
+        className={`relative flex h-[90%] w-[70%] flex-col gap-8 rounded-xl bg-white px-8 pb-4 pt-12`}
+      >
         <div onClick={() => onCloseClick()} className={'absolute top-4 right-4'}>
           <button className={'block h-8 w-8 rounded-lg text-shade-2 hover:bg-main-secondary'}>
             <CloseSvg></CloseSvg>