diff --git a/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx b/geonode_mapstore_client/client/js/components/DetailsPanel/DetailsPanel.jsx
index 447d033eab..f4cea2c4df 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 (
- {
+ setTextValue(evt.target.value);
+ onEdit(evt.target.value);
+ }}
+ value={textValue}
disabled={disabled}
/>
);
@@ -543,7 +547,7 @@ function DetailsPanel({
- {!downloading ? : }
+ {!downloading ? : }
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 {