Resolve remaining issues with dropdown positioning and broken help tooltips

contentcuration/contentcuration/frontend/channelEdit/components/edit/AccessibilityOptions.vue

@@ -16,6 +16,7 @@
         >
           <template #label>
             <span class="text-xs-left">{{ accessibilityItem.label }}</span>
+            &nbsp;
             <HelpTooltip
               :text="$tr(accessibilityItem.help)"
               bottom

contentcuration/contentcuration/frontend/channelEdit/components/edit/ActivityDuration.vue

@@ -10,6 +10,7 @@
       </VFlex>
       <VFlex
         v-else-if="selectedDuration === 'shortActivity' || selectedDuration === 'longActivity'"
+        class="activity-duration-container"
         md3
         sm3
       >
@@ -19,6 +20,8 @@
           box
           :label="$tr('minutesRequired')"
           :items="availableNumbers"
+          :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+          attach=".activity-duration-container"
         />
       </VFlex>
       <VFlex v-else md3 sm3>
@@ -192,7 +195,11 @@
   };
 
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
+
+  .activity-duration-container {
+    position: relative;
+  }
 
   .defaultUpload {
     margin: 0.8em;

contentcuration/contentcuration/frontend/channelEdit/components/edit/CategoryOptions.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div id="app">
+  <div class="category-container">
     <VAutocomplete
       :value="selected"
       :items="categoriesList"
@@ -13,6 +13,8 @@
       multiple
       item-value="value"
       item-text="text"
+      :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+      attach=".category-container"
       @click:clear="$nextTick(() => removeAll())"
     >
       <template #selection="data">
@@ -39,7 +41,7 @@
       </template>
 
       <template #item="{ item }">
-        <div style="width: 100%; height: 100%" aria-hidden="true">
+        <div style="width: 100%; height: 100%">
           <VDivider v-if="!item.value.includes('.')" />
           <KCheckbox
             :checked="dropdownSelected[item.value]"
@@ -214,8 +216,16 @@
 </script>
 <style lang="less" scoped>
 
+  .category-container {
+    position: relative;
+  }
+
   /deep/ .v-list__tile {
     flex-wrap: wrap;
   }
 
+  /deep/ div[role='listitem']:first-child hr {
+    display: none;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/CompletionOptions.vue

@@ -4,7 +4,7 @@
     <!-- Layout when practice quizzes are enabled -->
     <VLayout v-if="hideCompletionDropdown" xs6 md6>
       <!-- "Completion" dropdown menu  -->
-      <VFlex xs6 md6 class="pr-2">
+      <VFlex xs6 md6 class="completion-container pr-2">
         <VSelect
           ref="completion"
           v-model="completionDropdown"
@@ -13,6 +13,8 @@
           :label="translateMetadataString('completion')"
           :required="required"
           :rules="completionRules"
+          :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+          attach=".completion-container"
           @focus="trackClick('Completion')"
         />
       </VFlex>
@@ -58,7 +60,7 @@
     </VLayout>
 
     <VLayout row wrap>
-      <VFlex xs6 md6 class="pr-2">
+      <VFlex xs6 md6 class="completion-duration-container pr-2">
         <VSelect
           v-if="!hideDurationDropdown"
           ref="duration"
@@ -68,6 +70,8 @@
           :label="translateMetadataString('duration')"
           :required="required"
           :rules="durationRules"
+          :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+          attach=".completion-duration-container"
           @focus="trackClick('Duration')"
         />
       </VFlex>
@@ -876,5 +880,11 @@
   };
 
 </script>
-<style lang="scss">
+<style lang="less" scoped>
+
+  .completion-container,
+  .completion-duration-container {
+    position: relative;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/LearningActivityOptions.vue

@@ -1,17 +1,20 @@
 <template>
 
-  <VSelect
-    v-model="learningActivity"
-    :items="learningActivities"
-    box
-    chips
-    clearable
-    :label="translateMetadataString('learningActivity')"
-    multiple
-    deletableChips
-    :rules="learningActivityRules"
-    attach="#learning_activities"
-  />
+  <div class="learning-activity-container">
+    <VSelect
+      v-model="learningActivity"
+      :items="learningActivities"
+      box
+      chips
+      clearable
+      :label="translateMetadataString('learningActivity')"
+      multiple
+      deletableChips
+      :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+      :rules="learningActivityRules"
+      :attach="$attrs.id ? `#${$attrs.id}` : '.learning-activity-container'"
+    />
+  </div>
 
 </template>
 
@@ -53,5 +56,10 @@
   };
 
 </script>
-<style lang="scss">
+<style lang="less" scoped>
+
+  .learning-activity-container {
+    position: relative;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/LevelsOptions.vue

@@ -1,17 +1,20 @@
 <template>
 
-  <VSelect
-    ref="level"
-    v-model="level"
-    :items="levels"
-    box
-    chips
-    clearable
-    :label="translateMetadataString('level')"
-    multiple
-    deletableChips
-    attach="#levels"
-  />
+  <div class="levels-container">
+    <VSelect
+      ref="level"
+      v-model="level"
+      :items="levels"
+      box
+      chips
+      clearable
+      :label="translateMetadataString('level')"
+      multiple
+      deletableChips
+      :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+      :attach="$attrs.id ? `#${$attrs.id}` : '.levels-container'"
+    />
+  </div>
 
 </template>
 
@@ -66,6 +69,10 @@
   };
 
 </script>
-<style lang="scss">
+<style lang="less" scoped>
+
+  .levels-container {
+    position: relative;
+  }
 
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/ResourcesNeededOptions.vue

@@ -1,17 +1,20 @@
 <template>
 
-  <VSelect
-    ref="need"
-    v-model="need"
-    :items="resources"
-    box
-    chips
-    :label="$tr('resourcesNeededLabel')"
-    multiple
-    deletableChips
-    clearable
-    attach="#resources_needed"
-  />
+  <div class="resources-needed-container">
+    <VSelect
+      ref="need"
+      v-model="need"
+      :items="resources"
+      box
+      chips
+      :label="$tr('resourcesNeededLabel')"
+      multiple
+      deletableChips
+      clearable
+      :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
+      :attach="$attrs.id ? `#${$attrs.id}` : '.resources-needed-container'"
+    />
+  </div>
 
 </template>
 
@@ -73,5 +76,10 @@
   };
 
 </script>
-<style lang="scss">
+<style lang="less">
+
+  .resources-needed-container {
+    position: relative;
+  }
+
 </style>

contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/learningActivityOptions.spec.js

@@ -20,10 +20,12 @@ describe('LearningActivityOptions', () => {
     expect(wrapper.isVueInstance()).toBe(true);
   });
 
-  it('number of items in the dropdown should be equal to number of items available in ', () => {
-    const wrapper = shallowMount(LearningActivityOptions);
+  it('number of items in the dropdown should be equal to number of items available in ', async () => {
+    const wrapper = makeWrapper([]);
+    await wrapper.find('.v-input__slot').trigger('click');
+
     const numberOfDropdownItems = Object.keys(LearningActivities).length;
-    const dropdownItems = wrapper.attributes()['items'].split(',').length;
+    const dropdownItems = wrapper.find('.v-list').element.children.length;
 
     expect(dropdownItems).toBe(numberOfDropdownItems);
   });

contentcuration/contentcuration/frontend/channelEdit/components/edit/__tests__/levelsOptions.spec.js

@@ -21,10 +21,12 @@ describe('LevelsOptions', () => {
     expect(wrapper.isVueInstance()).toBe(true);
   });
 
-  it('number of items in the dropdown should be equal to number of items available in ContentLevels', () => {
-    const wrapper = shallowMount(LevelsOptions);
+  it('number of items in the dropdown should be equal to number of items available in ContentLevels', async () => {
+    const wrapper = makeWrapper([]);
+    await wrapper.find('.v-input__slot').trigger('click');
+
     const numberOfAvailableLevels = Object.keys(ContentLevels).length;
-    const dropdownItems = wrapper.attributes()['items'].split(',').length;
+    const dropdownItems = wrapper.find('.v-list').element.children.length;
 
     expect(dropdownItems).toBe(numberOfAvailableLevels);
   });

contentcuration/contentcuration/frontend/shared/views/HelpTooltip.vue

@@ -1,8 +1,8 @@
 <template>
 
   <VTooltip maxWidth="150px" v-bind="$attrs">
-    <template #activator>
-      <Icon color="primary" :small="small">
+    <template #activator="{ on }">
+      <Icon color="primary" :small="small" v-on="on">
         {{ icon }}
       </Icon>
     </template>

contentcuration/contentcuration/frontend/shared/views/LicenseDropdown.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <div>
+  <div class="license-container">
     <VLayout class="license-dropdown" row align-center>
       <VSelect
         ref="license"
@@ -15,10 +15,10 @@
         :readonly="readonly"
         :rules="licenseRules"
         :placeholder="placeholder"
-        menu-props="offsetY"
+        :menu-props="{ offsetY: true, lazy: true, top: true, zIndex: 4 }"
         class="ma-0"
         box
-        attach="#license"
+        :attach="$attrs.id ? `#${$attrs.id}` : '.license-container'"
         @focus="$emit('focus')"
       >
         <template #append-outer>
@@ -178,3 +178,11 @@
   };
 
 </script>
+
+<style lang="less" scoped>
+
+  .license-container {
+    position: relative;
+  }
+
+</style>

contentcuration/contentcuration/frontend/shared/views/VisibilityDropdown.vue

@@ -1,6 +1,6 @@
 <template>
 
-  <VLayout grid wrap align-center>
+  <VLayout grid wrap align-center class="role-visibility-container">
     <VSelect
       ref="visibility"
       v-model="role"
@@ -12,9 +12,9 @@
       :readonly="readonly"
       :required="required"
       :rules="rules"
-      menu-props="offsetY"
+      :menu-props="{ offsetY: true, lazy: true, zIndex: 4 }"
       box
-      attach="#role_visibility"
+      :attach="$attrs.id ? `#${$attrs.id}` : '.role-visibility-container'"
       @focus="$emit('focus')"
     >
       <template #append-outer>
@@ -138,4 +138,8 @@
     vertical-align: text-top;
   }
 
+  .role-visibility-container {
+    position: relative;
+  }
+
 </style>

contentcuration/contentcuration/frontend/shared/views/__tests__/licenseDropdown.spec.js

@@ -27,7 +27,8 @@ describe('licenseDropdown', () => {
   });
 
   describe('on load', () => {
-    it.each(LicensesList)('%s license option should be an option to select', license => {
+    it.each(LicensesList)('%s license option should be an option to select', async license => {
+      await wrapper.find('.v-input__slot').trigger('click');
       expect(wrapper.find('.v-list').text()).toContain(license.license_name);
     });
     it.each(LicensesList)(

contentcuration/contentcuration/frontend/shared/views/__tests__/visibilityDropdown.spec.js

@@ -25,7 +25,8 @@ describe('visibilityDropdown', () => {
   });
 
   describe('on load', () => {
-    it.each(RolesArray)('all visibility options should be an option to select', role => {
+    it.each(RolesArray)('all visibility options should be an option to select', async role => {
+      await wrapper.find('.v-input__slot').trigger('click');
       expect(wrapper.find('.v-list').text()).toContain(constantStrings.$tr(role));
     });
     it.each(RolesArray)('should render according to visibility prop %s', visibility => {