classcard-ui 0.2.1488 → 0.2.1489

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.1488",
+  "version": "0.2.1489",
   "main": "dist/classcard-ui.umd.min.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CGroupedSelect/CGroupedSelect.vue

@@ -14,7 +14,7 @@
       <!-- asterisk sign to render if field is required -->
       <p v-if="isRequired" class="ml-1 text-red-600">*</p>
     </div>
-    <div class="relative mt-1">
+    <div class="relative mt-1" ref="inputContainer">
       <div class="relative">
         <input
           type="text"
@@ -98,7 +98,10 @@
     -->
       <div
         v-if="showDropDown"
-        class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm"
+        :class="[
+          shouldOpenAbove ? 'bottom-full mb-1' : 'top-full mt-1',
+          'absolute z-10 max-h-60 w-full',
+        ]"
       >
         <ul
           tabindex="-1"
@@ -106,6 +109,7 @@
           aria-labelledby="listbox-label"
           aria-activedescendant="listbox-option-3"
           v-if="options.length > 0"
+          class="max-h-60 overflow-auto overscroll-contain rounded-md bg-white py-1 text-base ring-1 ring-black ring-opacity-5 shadow-lg focus:outline-none sm:text-sm"
         >
           <!--
           Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
@@ -247,9 +251,11 @@
               </template>
             </li>
           </span>
-
         </ul>
-        <p v-else class="text-center">
+        <p
+          v-else
+          class="rounded-md bg-white py-2 text-center text-sm ring-1 ring-black ring-opacity-5 shadow-lg"
+        >
           No match found. Try a different search.
         </p>
       </div>
@@ -304,9 +310,24 @@ export default {
     return {
       showDropDown: false,
       inputValue: "",
+      shouldOpenAbove: false,
     };
   },
   methods: {
+    updateDropdownPlacement() {
+      if (!this.$refs.inputContainer) {
+        this.shouldOpenAbove = false;
+        return;
+      }
+
+      const rect = this.$refs.inputContainer.getBoundingClientRect();
+      const dropdownMaxHeight = 240; // max height of the dropdown in pixels - max-h-60
+      const bottomSpace = window.innerHeight - rect.bottom;
+      const topSpace = rect.top;
+
+      this.shouldOpenAbove =
+        bottomSpace < dropdownMaxHeight && topSpace > bottomSpace;
+    },
     handleCrossClick(event) {
       event.preventDefault();
       this.$emit("hide-grouped-select-dropdown");
@@ -352,6 +373,11 @@ export default {
     value(newValue) {
       this.inputValue = newValue.label;
     },
+    showDropDown(newValue) {
+      if (newValue) {
+        this.$nextTick(this.updateDropdownPlacement);
+      }
+    },
   },
   mounted() {
     this.inputValue = this.value.label;