[frontend] UI components not working as expected

- Fix usage of slots in Dropdown, DateRangePicker & FacetSelector - Fix value emit in SearchInput
cloudera · Feb 25, 2021 · d691efc · d691efc
1 parent 3923611
commit d691efc
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 8 deletions.
diff --git a/desktop/core/src/desktop/js/components/DateRangePicker.vue b/desktop/core/src/desktop/js/components/DateRangePicker.vue
@@ -18,7 +18,7 @@
 
 <template>
   <dropdown-panel :text="selectedRange.title" :inline="inline">
-    <template #contents="{ closePanel }">
+    <template #default="{ closePanel }">
       <div class="date-range-picker-panel">
         <div class="date-range-picker-body">
           <div class="date-range-picker-preset">

diff --git a/desktop/core/src/desktop/js/components/FacetSelector.vue b/desktop/core/src/desktop/js/components/FacetSelector.vue
@@ -18,7 +18,7 @@
 
 <template>
   <dropdown-panel :text="label" :disabled="disabled">
-    <template #contents="{ closePanel }">
+    <template #default="slotProps">
       <div class="facet-selector">
         <div v-if="facet.values.length > 1" class="facet-select-all">
           <div class="facet-list-entry">
@@ -39,12 +39,12 @@
           </div>
         </div>
         <div class="facet-selector-actions">
-          <hue-link @click="cancel(closePanel)">{{ I18n('Cancel') }}</hue-link>
+          <hue-link @click="cancel(slotProps.closePanel)">{{ I18n('Cancel') }}</hue-link>
           <hue-button
             :small="true"
             :primary="true"
             :disabled="applyDisabled"
-            @click="apply(closePanel)"
+            @click="apply(slotProps.closePanel)"
           >
             {{ I18n('Apply') }}
           </hue-button>

diff --git a/desktop/core/src/desktop/js/components/SearchInput.vue b/desktop/core/src/desktop/js/components/SearchInput.vue
@@ -35,7 +35,7 @@
           @input="$emit('input', $event.target.value)"
           @focusin="hasFocus = true"
           @focusout="hasFocus = false"
-          @keyup.enter="$emit('search', value)"
+          @keyup.enter="$emit('search', $event.target.value)"
         />
         <input
           v-model="autocomplete"

diff --git a/desktop/core/src/desktop/js/components/dropdown/DropdownDrawer.vue b/desktop/core/src/desktop/js/components/dropdown/DropdownDrawer.vue
@@ -98,13 +98,16 @@
           this.position.left = '';
           this.position.right = `${rightOffset}px`;
         }
+
         defer(() => {
           addClickOutsideHandler(this.$el, event => {
             if (this.triggerElement !== event.target) {
               this.$emit('close');
             }
           });
         });
+
+        this.$forceUpdate();
       }
     },
     methods: {
@@ -123,7 +126,7 @@
 
   .hue-dropdown-drawer {
     position: fixed;
-    z-index: 1061;
+    z-index: 10610;
 
     &.open {
       .hue-dropdown-drawer-inner {

diff --git a/desktop/core/src/desktop/js/components/dropdown/DropdownPanel.vue b/desktop/core/src/desktop/js/components/dropdown/DropdownPanel.vue
@@ -24,8 +24,13 @@
     <hue-button v-else ref="triggerButtonElement" :disabled="disabled" @click="toggleDrawer">
       {{ text }} <i class="fa fa-caret-down" />
     </hue-button>
-    <DropdownDrawer :open="open" :trigger-element="triggerElement" @close="closeDrawer">
-      <slot />
+    <DropdownDrawer
+      :open="open"
+      :trigger-element="triggerElement"
+      :close-on-click="false"
+      @close="closeDrawer"
+    >
+      <slot :close-panel="closeDrawer" />
     </DropdownDrawer>
   </div>
 </template>