Hide description when field not focused

htdocs/src/components/hResourceValueInput.vue

@@ -38,8 +38,8 @@
     <label v-if="specs.label" :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.label }}</label>
     <label v-else :for="'spec-' + index + '-' + specs.id" :title="specs.label" class="col-md-4 col-form-label text-truncate text-md-right text-primary">{{ specs.id }}</label>
     <b-col md="8">
-      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" />
-      <p v-if="specs.description" class="text-justify" style="line-height: 1.1">
+      <h-resource-value-input-raw v-model="val" :edit="edit" :index="index" :specs="specs" @focus="show_description = true" @blur="show_description = false" />
+      <p v-if="specs.description" v-show="show_description" class="text-justify" style="line-height: 1.1">
         <small class="text-muted">{{ specs.description }}</small>
       </p>
     </b-col>
@@ -77,6 +77,12 @@ export default {
     }
   },
 
+  data: function () {
+    return {
+      show_description: false
+    }
+  },
+
   computed: {
     val: {
       get () {

htdocs/src/components/hResourceValueInputRaw.vue

@@ -39,6 +39,8 @@
       v-model="val"
       :required="specs.required !== undefined && specs.required"
       :options="specs.choices"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
     <b-form-input
       v-else
@@ -49,6 +51,8 @@
       :required="specs.required !== undefined && specs.required"
       :placeholder="specs.placeholder"
       :plaintext="!edit"
+      @focus="$emit('focus')"
+      @blur="$emit('blur')"
     />
   </b-input-group>
 </template>