Allow page scrolling in multi-query picker popover if the popover doesn't contain a scrolbar

This commit is contained in:
HighImKevin
2026-10-15 12:15:19 -04:00
parent a5d642157e
commit ad5c3aeaf3
2 changed files with 17 additions and 4 deletions
+6
View File
@@ -1875,6 +1875,8 @@
initialFocus: selectedItemElement,
anchor: selectButton,
dialogClassName: 'kefin-multi-query-modal',
// Match breadcrumb season popover: page scrolls unless the list itself overflows
lockPageScroll: false,
onOpen: (modal) => {
if (modal.backdrop) modal.backdrop.style.background = 'transparent';
// Document-absolute shell via ModalSystem.positionNearAnchor.
@@ -1883,6 +1885,10 @@
modal.dialogContent.style.overflowY = 'auto';
modal.dialogContent.style.minHeight = '0';
modal.dialogContent.style.flex = '0 1 auto';
modal.dialogContent.style.overscrollBehavior = 'auto';
}
if (modal.dialog) {
modal.dialog.style.overscrollBehavior = 'auto';
}
if (selectedItemElement) {
requestAnimationFrame(() => {
+11 -4
View File
@@ -438,6 +438,7 @@ window.ModalSystem = (function() {
/**
* Create a Jellyfin-style modal dialog
* @param {Object} options - Modal configuration
* @param {boolean} [options.lockPageScroll=true] - When true, contain overscroll so wheel on the dialog does not chain to the page. Set false for anchored popovers so short lists allow page scroll.
* @returns {Object} Modal instance
*/
function createModal(options = {}) {
@@ -458,6 +459,9 @@ window.ModalSystem = (function() {
trapFocus,
anchor = null,
dialogClassName = '',
// When true (default), contain overscroll so wheel on the dialog does not chain to the page.
// Set false for anchored popovers (e.g. multi-query) so short lists let the page scroll.
lockPageScroll = true,
} = options;
if (!id) {
@@ -559,10 +563,12 @@ window.ModalSystem = (function() {
dialogContent.style.overflowY = 'auto';
dialogContent.style.flex = '1';
dialogContent.style.minHeight = '0';
// Contain overscroll so nested wheel/touch scroll does not chain to the page
// (avoids a non-passive wheel listener that delays input while the main thread is busy)
dialogContent.style.overscrollBehavior = 'contain';
dialog.style.overscrollBehavior = 'contain';
if (lockPageScroll) {
// Contain overscroll so nested wheel/touch scroll does not chain to the page
// (avoids a non-passive wheel listener that delays input while the main thread is busy)
dialogContent.style.overscrollBehavior = 'contain';
dialog.style.overscrollBehavior = 'contain';
}
// Add content
if (content) {
@@ -614,6 +620,7 @@ window.ModalSystem = (function() {
dialogFooter,
isOpen: true,
closeOnBackdrop: !!closeOnBackdrop,
lockPageScroll: !!lockPageScroll,
onClose: typeof onClose === 'function' ? onClose : null,
returnFocusEl,
close: () => closeModal(id),