diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt index 509c80e491..3a583d03be 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/bookings/list.tt @@ -432,6 +432,7 @@ $("#cancellation-reason").comboBox({ displayProperty: 'name', placeholder: _("Select or type a reason"), + context: 'modal', }); }); diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt index 7c78d55b6c..b0af7fc7a0 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/circ/circulation.tt @@ -1250,6 +1250,7 @@ $("#cancellation-reason").comboBox({ displayProperty: 'name', placeholder: _("Select or type a reason"), + context: 'modal', }); }); diff --git a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt b/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt index 5884fae94c..3c8813fef0 100644 --- a/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt +++ b/koha-tmpl/intranet-tmpl/prog/en/modules/members/moremember.tt @@ -862,6 +862,7 @@ $("#cancellation-reason").comboBox({ displayProperty: 'name', placeholder: _("Select or type a reason"), + context: 'modal', }); }); diff --git a/koha-tmpl/intranet-tmpl/prog/js/combobox.js b/koha-tmpl/intranet-tmpl/prog/js/combobox.js index 813b649849..c7ad9d2efe 100644 --- a/koha-tmpl/intranet-tmpl/prog/js/combobox.js +++ b/koha-tmpl/intranet-tmpl/prog/js/combobox.js @@ -11,6 +11,7 @@ * @param {boolean} [config.useKeyAsValue=false] - Whether to use the option's key (either HTML data-* or JavaScript `valueProperty`) as the value of the input (default: false). * @param {string} [config.placeholder='Select or type a value'] - Placeholder text for the input element. * @param {string} [config.labelId=''] - Optional ID of the associated label element. + * @param {string} [config.context='default'] - Positioning context ('default' or 'modal'). * * @example * ```html @@ -35,9 +36,10 @@ * displayProperty: 'name', * valueProperty: 'id', * useKeyAsValue: true, + * context: 'modal', * }); * // or using jQuery - * $("#generic-combobox").comboBox({ ... }); + * $("#generic-combobox").comboBox({ displayProperty: 'name', context: 'modal' }); * * ``` */ @@ -51,6 +53,7 @@ placeholder = "Select or type a value", labelId = "", useKeyAsValue = false, + context = "default", } = config; const input = document.getElementById(inputId); @@ -60,9 +63,16 @@ return; } - const bootstrapDropdown = new bootstrap.Dropdown(input, { + const dropdownOptions = { autoClose: false, - }); + popperConfig: { + strategy: { default: "absolute", modal: "fixed" }[context], + }, + }; + const bootstrapDropdown = new bootstrap.Dropdown( + input, + dropdownOptions + ); // Existing options from HTML const existingOptions = Array.from(dropdownMenu.querySelectorAll("li"))