From 0df02813a05d13cc0f1dea675bc2c209939bbbb4 Mon Sep 17 00:00:00 2001
From: Ahmed Awan <qe66653@umbc.edu>
Date: Tue, 1 Oct 2024 11:34:56 -0500
Subject: [PATCH] fix reactivity of `ClickToEdit` and add some styling

---
 .../ListDatasetCollectionElementView.vue      |  2 +-
 .../Collections/common/ClickToEdit.vue        | 19 ++++++++++++-------
 2 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/client/src/components/Collections/ListDatasetCollectionElementView.vue b/client/src/components/Collections/ListDatasetCollectionElementView.vue
index c6160c7ba879..0f17767c203b 100644
--- a/client/src/components/Collections/ListDatasetCollectionElementView.vue
+++ b/client/src/components/Collections/ListDatasetCollectionElementView.vue
@@ -43,7 +43,7 @@ function clickDiscard() {
         <span class="d-flex flex-gapx-1">
             {{ element.hid }}:
             <strong>
-                <ClickToEdit v-model="elementName" style="cursor: text" :title="localize('Click to rename')" />
+                <ClickToEdit v-model="elementName" :title="localize('Click to rename')" />
             </strong>
             <i> ({{ element.extension }}) </i>
         </span>
diff --git a/client/src/components/Collections/common/ClickToEdit.vue b/client/src/components/Collections/common/ClickToEdit.vue
index 84c413d7f1f1..b77925d65a1d 100644
--- a/client/src/components/Collections/common/ClickToEdit.vue
+++ b/client/src/components/Collections/common/ClickToEdit.vue
@@ -2,7 +2,7 @@
 import { faSave } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
 import { BButton } from "bootstrap-vue";
-import { ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
 interface Props {
     value: string;
@@ -18,12 +18,13 @@ const emit = defineEmits<{
 const editable = ref(false);
 const localValue = ref(props.value);
 
+const computedValue = computed(() => props.value);
+
 watch(
     () => editable.value,
     (value) => {
         if (!value) {
             emit("input", localValue.value);
-            localValue.value = props.value;
         }
     }
 );
@@ -34,10 +35,9 @@ watch(
         <input
             id="click-to-edit-input"
             v-model="localValue"
-            class="click-to-edit-input"
             tabindex="0"
             contenteditable
-            @blur="editable = false"
+            @blur.prevent.stop="editable = false"
             @keyup.prevent.stop.enter="editable = false"
             @keyup.prevent.stop.escape="editable = false"
             @click.prevent.stop />
@@ -50,15 +50,20 @@ watch(
         v-else
         role="button"
         for="click-to-edit-input"
+        class="click-to-edit-label"
         tabindex="0"
         @keyup.enter="editable = true"
         @click.stop="editable = true">
-        {{ localValue }}
+        <span v-if="computedValue">{{ computedValue }}</span>
+        <i v-else>{{ title }}</i>
     </label>
 </template>
 
 <style scoped lang="scss">
-.click-to-edit-input {
-    line-height: 1 !important;
+.click-to-edit-label {
+    cursor: text;
+    &:hover > * {
+        text-decoration: underline;
+    }
 }
 </style>