[Fixes 1122] Issues with pressing Enter in Clone dialog (#1133) (#1140)

* Fixes 1122 * Added enter for new maps
GeoNode · Aug 5, 2022 · 8f53b49 · 8f53b49
1 parent 1246727
commit 8f53b49
Showing 1 changed file with 18 additions and 22 deletions.
diff --git a/geonode_mapstore_client/client/js/plugins/save/SaveModal.jsx b/geonode_mapstore_client/client/js/plugins/save/SaveModal.jsx
@@ -64,30 +64,25 @@ function SaveModal({
 
     const isLoading = loading || saving;
 
-
-    useEffect(() => {
-        // clone on enter key press
-        if (copy && currentModal?.current) {
-            currentModal?.current?.addEventListener('keyup', (event) => {
-                if (event.keyCode === 13) {
-                    event.stopPropagation();
-                    onSave(
-                        update ? contentId : undefined,
-                        {
-                            thumbnail,
-                            name,
-                            description
-                        },
-                        true);
-                }
-            });
-        }
-        return () => currentModal?.current?.removeEventListener('keyup', () => {});
-    }, []);
+    const handleEnterPress = options => {
+        const {title, isUpdate, content, image, text, reload} = options;
+        return onSave(
+            isUpdate ? content : undefined,
+            {
+                thumbnail: image,
+                name: title,
+                description: text
+            },
+            reload);
+    };
 
     return (
         <Portal>
-            <div ref={currentModal}>
+            <div ref={currentModal} onKeyUp={(e) => {
+                e.stopPropagation();
+                return (e.keyCode === 13 || e.code === 'Enter') && (copy ? handleEnterPress({title: name, isUpdate: update, content: contentId, image: thumbnail, text: description, reload: false}) : handleEnterPress({title: name, isUpdate: update, content: contentId, image: thumbnail, text: description, reload: true}));
+            }
+            }>
                 <ResizableModal
                     title={<Message msgId={labelId}/>}
                     show={enabled}
@@ -122,7 +117,8 @@ function SaveModal({
                     {success && <Alert bsStyle="success" style={{ margin: 0 }}>
                         <div><Message msgId="saveDialog.saveSuccessMessage" /></div>
                     </Alert>}
-                    <Form>
+                    {/* prevent reload on enter key press from implicit submission */}
+                    <Form onSubmit={(e) => e.preventDefault()}>
                         <FormGroup
                             validationState={nameValidation}
                         >