fix reactivity of ClickToEdit and add some styling

ahmedhamidawan · Oct 1, 2024 · 0df0281 · 0df0281
1 parent eb24248
commit 0df0281
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 8 deletions.
diff --git 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
@@ -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>