Step-by-step guide on removing the focusin event listener from a Bootstrap 5 modal

Question

Step-by-step guide on removing the focusin event listener from a Bootstrap 5 modal

My current app has a legacy modal that uses a kendo dropdown list element bound to an ajax call with filtering. I'm trying to avoid rewriting this component if possible. However, there is an issue where when the modal opens and you focus on the dropdown list, the modal assumes you are clicking outside of it, causing it to close immediately after opening. In Bootstrap 4, I was able to fix this using the following code:

    $("#theModalId").on('shown.bs.modal',function () {
            $(document).off('focusin');
    })

Unfortunately, this solution no longer works in bootstrap 5. It seems like the focusin event may not be directly on the document element anymore. I can see that bootstrap is adding a focusin event, but I am unsure which element it is being added to since my previous code is now ineffective. I also attempted removing it from theModal element without success.

If anyone has any insights or solutions to this problem, I would greatly appreciate the help!

javascript bootstrap-5 bootstrap5-modal

Answer 1

Answer №1

After some investigation, I discovered that removing the filter option from the dropdown resolves the issue. However, this essentially turns it into a regular select element.

Alternatively, you can retain the filter functionality and fix the problem by implementing the solution provided by Levi in this thread: https://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option (Thanks Levi). None of the other methods I tried seemed to work. Here is Levi's suggested implementation:

// Popup extension.
// Sets up kendo popups (used in all sorts of widgets) to check if the widget
// is being included in a bootstrap modal. If so, the popup should append to
// the modal instead of the page body.
//
// For the most part, popups work fine without this. However, DropdownList with
// a filter option does not. This is because the filter attempts to focus on
// filter input, which is outside the modal By default, Bootstrap modal will
// block this. It has an option to allow, but then it must be remembered to add
// everywhere.
//
// This allows filtered dropdownlists to 'just work'.
//
// http://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option
//
// See for alternate solutions:
// http://www.telerik.com/forums/dropdownlist-with-server-filtering-on-bootstrap-modal
// http://stackoverflow.com/a/28471072/246561
//
(function ($, kendo) {
 
    var
        _init = kendo.ui.Popup.fn.init;
 
    var Popup = kendo.ui.Popup.extend({
        init: function (element, options) {           
            // Only set appendTo if nothing was manually set in the options.
            if (options.appendTo === undefined) {
                // Find the nearest parent bootstrap modal, if any.
                var parentModal = $(options.anchor).closest('.modal');
 
                // Found one!
                if (parentModal.length > 0) {
                    options.appendTo = parentModal[0];
                }
            }
 
            // Call the base constructor.
            _init.call(this, element, options);
        }
    });
 
    kendo.ui.plugin(Popup);
}(window.kendo.jQuery, window.kendo));

Answer 2

After some investigation, I discovered that removing the filter option from the dropdown resolves the issue. However, this essentially turns it into a regular select element.

Alternatively, you can retain the filter functionality and fix the problem by implementing the solution provided by Levi in this thread: https://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option (Thanks Levi). None of the other methods I tried seemed to work. Here is Levi's suggested implementation:

// Popup extension.
// Sets up kendo popups (used in all sorts of widgets) to check if the widget
// is being included in a bootstrap modal. If so, the popup should append to
// the modal instead of the page body.
//
// For the most part, popups work fine without this. However, DropdownList with
// a filter option does not. This is because the filter attempts to focus on
// filter input, which is outside the modal By default, Bootstrap modal will
// block this. It has an option to allow, but then it must be remembered to add
// everywhere.
//
// This allows filtered dropdownlists to 'just work'.
//
// http://www.telerik.com/forums/dropdownlist-closes-when-setting-filter-option
//
// See for alternate solutions:
// http://www.telerik.com/forums/dropdownlist-with-server-filtering-on-bootstrap-modal
// http://stackoverflow.com/a/28471072/246561
//
(function ($, kendo) {
 
    var
        _init = kendo.ui.Popup.fn.init;
 
    var Popup = kendo.ui.Popup.extend({
        init: function (element, options) {           
            // Only set appendTo if nothing was manually set in the options.
            if (options.appendTo === undefined) {
                // Find the nearest parent bootstrap modal, if any.
                var parentModal = $(options.anchor).closest('.modal');
 
                // Found one!
                if (parentModal.length > 0) {
                    options.appendTo = parentModal[0];
                }
            }
 
            // Call the base constructor.
            _init.call(this, element, options);
        }
    });
 
    kendo.ui.plugin(Popup);
}(window.kendo.jQuery, window.kendo));

Step-by-step guide on removing the focusin event listener from a Bootstrap 5 modal

Answer №1

Similar questions

Implementing a blur effect on a CSS loader

Adjust the dimensions of a Three.js-generated 3D Cylinder in real-time

Vue Router generates a URL containing %2F when dealing with slug routes

Use npm to include a new dependency from the current dependency structure

Scrolling down a jQuery div after each new item is added.OR

How to toggle the selection of all checkboxes in an AngularJS ng-repeat object array

Looking to enhance the accessibility of a dynamically generated file by implementing the ability to expand and collapse sections as parent nodes

Experience a magical Vue form wizard just like Wilio

Transfer information using cURL without the need to refresh the webpage

I'm encountering an issue with my array in JavaScript while using // @ts-check in VS Code. Why am I receiving an error stating that property 'find' does not exist on my array? (typescript 2.7

Looking to migrate my current firebase/react project to typescript. Any tips on how to batch.update?

The data retrieved from the $.ajax() request in Vue.js is not properly syncing with the table

Issue with kendo grid not properly saving recently added data

Discovering which particular check in the Express Validator is causing the errors can be done by following these steps

Ajax is working effectively as the first post is successful and the second post is able to retrieve data

Tips for retaining form inputs without the need for a submit event when the page is reloaded or refreshed

Choosing an option from a PHP MySQL table based on a JavaScript value

"Navigate back to a previous page in Vue Router without having to

Sharing data between promises in Node.jsExplanation: In Node.js, passing values

Reactjs is failing to display the page