[Fixes #1309] HTML tags in the title on pressing enter from the edit …

…info form (#1322) (#1355) Co-authored-by: David Quartey <[email protected]>
GeoNode · Dec 2, 2022 · e241a5a · e241a5a
1 parent 0127df4
commit e241a5a
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 7 deletions.
diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
@@ -36,13 +36,17 @@ Map.displayName = 'Map';
 const MapThumbnailButtonToolTip = tooltip(Button);
 const CopyToClipboard = tooltip(CopyToClipboardCmp);
 
-const EditTitle = ({ title, onEdit, tagName, disabled }) => {
+const EditTitle = ({ title, onEdit, disabled }) => {
+    const [textValue, setTextValue] = React.useState(title);
     return (
         <div className="editContainer">
-            <TextEditable
-                tagName={tagName}
-                onEdit={onEdit}
-                text={title}
+            <input
+                className="editContainer-input"
+                onChange={(evt) => {
+                    setTextValue(evt.target.value);
+                    onEdit(evt.target.value);
+                }}
+                value={textValue}
                 disabled={disabled}
             />
         </div>);
@@ -543,7 +547,7 @@ function DetailsPanel({
 
                     <div className="gn-details-panel-content-text">
                         <div className="gn-details-panel-title" >
-                            <span className="gn-details-panel-title-icon" >{!downloading ? <FaIcon name={icon} /> : <Spinner />} </span> <EditTitle disabled={!activeEditMode} tagName="h1"  title={resource?.title} onEdit={editTitle} >
+                            <span className="gn-details-panel-title-icon" >{!downloading ? <FaIcon name={icon} /> : <Spinner />} </span> <EditTitle disabled={!activeEditMode}  title={resource?.title} onEdit={editTitle} >
 
                             </EditTitle>
 

diff --git a/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less b/geonode_mapstore_client/client/themes/geonode/less/_details-panel.less
@@ -104,7 +104,14 @@
         h6 {
             margin-top: 0
         }
-        [contenteditable]:focus-visible {
+        .editContainer-input {
+            border: none;
+            font-size: 1.4rem;
+            width: 100%;
+            text-overflow: ellipsis;
+            line-height: 1.4;
+        }
+        [contenteditable]:focus-visible, .editContainer-input {
             outline-color: @gn-editable-border;
         }
         &.imagepreview {