Add kselect dropdown to overlay el

learningequality · Dec 20, 2024 · ac742b6 · ac742b6
1 parent b5ee9d3
commit ac742b6
Show file tree

Hide file tree

Showing 4 changed files with 105 additions and 143 deletions.
diff --git a/lib/KModal.vue b/lib/KModal.vue
@@ -24,7 +24,7 @@
             :style="[
               modalSizeStyles,
               { background: $themeTokens.surface },
-              containsKSelect ? { overflowY: 'unset' } : { overflowY: 'auto' },
+              { overflowY: 'auto' },
             ]"
           >
             <!-- Modal Title -->
@@ -65,7 +65,6 @@
                 ]"
                 :class="{
                   'scroll-shadow': scrollShadow,
-                  'contains-kselect': containsKSelect,
                 }"
               >
                 <!-- @slot Main content of modal -->
@@ -216,7 +215,6 @@
       return {
         lastFocus: null,
         maxContentHeight: '1000',
-        containsKSelect: false,
         scrollShadow: false,
         delayedEnough: false,
       };
@@ -278,9 +276,6 @@
       window.addEventListener('focus', this.focusElementTest, true);
       window.setTimeout(() => (this.delayedEnough = true), 500);
 
-      // if modal contains KSelect, special classes & styles will be applied
-      const kSelectCheck = document.querySelector('div.modal div.ui-select');
-      this.containsKSelect = !!kSelectCheck;
       this.updateContentSectionStyle();
     },
     updated() {
@@ -320,9 +315,7 @@
 
           // make sure that overflow-y won't be updated to 'auto' if this function is running
           // for the first time (otherwise Firefox would add a vertical scrollbar right away)
-          // + don't apply if modal contains KSelect
-          // (otherwise KSelect will be trapped inside modal if KSelect is opened a second time)
-          if (this.$refs.content.clientHeight !== 0 && !this.containsKSelect) {
+          if (this.$refs.content.clientHeight !== 0) {
             // add a vertical scrollbar if content doesn't fit
             if (this.$refs.content.scrollHeight > this.$refs.content.clientHeight) {
               this.$refs.content.style.overflowY = 'auto';
@@ -453,10 +446,6 @@
       100% 10px;
   }
 
-  .contains-kselect {
-    overflow: unset;
-  }
-
   .actions {
     padding: 24px;
     text-align: right;