fix: remove overflowing of select dropdown inside modal

materializecss · Feb 24, 2025 · a28822c · a28822c
1 parent a6bea3d
commit a28822c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 3 deletions.
diff --git a/sass/components/_modal.scss b/sass/components/_modal.scss
@@ -4,6 +4,7 @@
   --modal-border-radius: 28px;
   --modal-padding: 24px;
   --modal-padding-bottom: 16px;
+  --modal-background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
 
   @extend .z-depth-5;
   border: none;
@@ -13,7 +14,7 @@
   width: 55%;
   border-radius: var(--modal-border-radius);
   will-change: top, opacity;
-  background-color: color-mix(in srgb, var(--md-sys-color-surface), var(--md-sys-color-surface-tint) 17%);
+  background-color: var(--modal-background-color);
 
   // Dialog open
   &[open] {
@@ -34,16 +35,22 @@
     padding: var(--modal-padding);
     padding-bottom: var(--modal-padding-bottom);
     flex-shrink: 0;
+    position: sticky;
+    top: 0;
+    background-color: var(--modal-background-color);
   }
   .modal-content {
     padding: 0 var(--modal-padding);
-    overflow-y: auto;
+    //overflow-y: auto; // causes select dropdown fail
   }
   .modal-footer {
     border-radius: 0 0 var(--modal-border-radius) var(--modal-border-radius);
     padding: var(--modal-padding);
     text-align: right;
     flex-shrink: 0;
+    position: sticky;
+    bottom: 0;
+    background-color: var(--modal-background-color);
   }
 
   .modal-close {

diff --git a/src/select.ts b/src/select.ts
@@ -57,7 +57,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     };
 
     this.isMultiple = this.el.multiple;
-    this.nativeTabIndex = (this.el.tabIndex ?? -1);
+    this.nativeTabIndex = this.el.tabIndex ?? -1;
     this.el.tabIndex = -1;
     this._values = [];
     this._setupDropdown();
@@ -204,6 +204,7 @@ export class FormSelect extends Component<FormSelectOptions> {
     // Create dropdown
     this.dropdownOptions = document.createElement('ul');
     this.dropdownOptions.id = `select-options-${Utils.guid()}`;
+    this.dropdownOptions.setAttribute('popover', 'auto');
     this.dropdownOptions.classList.add('dropdown-content', 'select-dropdown');
     this.dropdownOptions.setAttribute('role', 'listbox');
     this.dropdownOptions.ariaMultiSelectable = this.isMultiple.toString();