From 21880843a78c7aabd8494bbd3c8d2384a7aed294 Mon Sep 17 00:00:00 2001
From: David Quartey <42542676+DavidQuartz@users.noreply.github.com>
Date: Mon, 28 Nov 2022 15:38:32 +0000
Subject: [PATCH] [Fixes #1309] HTML tags in the title on pressing enter from
 the edit info form (#1322)

---
 .../js/components/DetailsPanel/DetailsPanel.jsx  | 16 ++++++++++------
 .../themes/geonode/less/_details-panel.less      |  9 ++++++++-
 2 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index e4726067b4..a899ec261c 100644
--- 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
index 5b98341a0e..ad36623802 100644
--- 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 {