Arrow selection issue when live-search is false - Cannot read properties of null (reading '_selectMenuItem')

[dkrvl]

Getting issue with arrow selection in bootstrap select with below mentions version and configuration.

• Link to issue: https://jsfiddle.net/y9oae3jv/2/
• bootstrap-select.min.js - Bootstrap-select v1.14.0-beta2
• bootstrap.bundle.min.js - Bootstrap v5.0.2

if($('.location-select').length > 0){ $('.location-select').selectpicker({ style:"", styleBase: 'form-control' }) }

Note: if add data-live-search=true then not getting any kind of issue.

<select class="location-select form-select" data-live-search="false" placeholder="Location" name="location" title="Select a number" data-actions-box="false" data-virtual-scroll="false"> <option value="AL">Alabama</option> <option value="WY">Wyoming</option> </select>

bootstrap.bundle.min.js:6 Uncaught TypeError: Cannot read properties of null (reading '_selectMenuItem') at HTMLUListElement.dataApiKeydownHandler (bootstrap.bundle.min.js:6:45805) at HTMLDocument.n (bootstrap.bundle.min.js:6:5102) dataApiKeydownHandler @ bootstrap.bundle.min.js:6 n @ bootstrap.bundle.min.js:6

[dkrvl]

Is it issue in bootstrap select OR in Bootstrap 5?

[bazineta]

The problem is occurring in BS 5 due to these 3 lines: https://github.com/snapappointments/bootstrap-select/blob/939e94b14a34759e193f616b753e0a33081cc0c5/js/bootstrap-select.js#L3587-L3589 The issue is that with 5, Bootstrap is no longer using jQuery for event management; rather, it's using a native event handler.

The plugin is attempting to turn off the normal event handling that Bootstrap's Dropdown is doing, then turning it back on with the :not(.bootstrap-select) > preamble there to say basically, Dear Dropdown, handle these events only if they're not for one of mine; I'll deal with those myself, thanks.

However, since BS 5 is now dealing with that using a native event handler, those three lines of jQuery event management do absolutely nothing now, so the Dropdown class is still handling the arrow keys, resulting in the exceptions you're seeing.

I'm not sure what an optimal solution would be, but as a quick and dirty, we just removed those 3 lines, then added the :not(.bootstrap-select) > preamble to Bootstrap's own Dropdown event handling setup, using patch-package to effect the change. In the 5.2.0 ESM distribution code, it looks like this:

/**
 * Data API implementation
 */

EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `:not(.bootstrap-select) > ${SELECTOR_DATA_TOGGLE$3}`, Dropdown.dataApiKeydownHandler);
EventHandler.on(document, EVENT_KEYDOWN_DATA_API, `:not(.bootstrap-select) > ${SELECTOR_MENU}`,          Dropdown.dataApiKeydownHandler);
EventHandler.on(document, EVENT_CLICK_DATA_API$3, Dropdown.clearMenus);
EventHandler.on(document, EVENT_KEYUP_DATA_API, Dropdown.clearMenus);
EventHandler.on(document, EVENT_CLICK_DATA_API$3, SELECTOR_DATA_TOGGLE$3, function (event) {
  event.preventDefault();
  Dropdown.getOrCreateInstance(this).toggle();
});

That's about as grimy a solution as there is, but for the moment, it resolves the arrow key handling.

[dkrvl]

@bazineta , Thank you for your explanation.

[vistree]

This is quite an old issue - but it seems, there is still no official fix for this problem. One question to @bazineta : You removed 3 lines from bootstrap-select.js - but modified only 2 in bootstrap.js. Do we need to do anything regarding the line .off('keydown.bs.dropdown.data-api') ?

[vistree]

Trying your fix, I get the following error: event-handler.js:108 Uncaught DOMException: Failed to execute 'querySelectorAll' on 'Document': ':not(.bootstrap-select) > ${SELECTOR_DATA_TOGGLE$3}' is not a valid selector. at HTMLDocument.handler (http://example.com/themes/custom/mytheme/vendor/bootstrap-5.1.3/js/bootstrap.bundle.js?v=9.5.9:378:35)

[bazineta]

@vistree My fix was against 5.2.0, and it appears that you're using 5.1.3 there; you'll likely need to adjust to whatever the specific requirements of 5.1.3 are.

Unfortunately, we no longer use this package, having moved on to an alternative, so that's all the insight I've got.

[vistree]

Hi @bazineta - thanx for your reply. Can you give a link to your alternative?

[bazineta]

@vistree We moved to https://tom-select.js.org/, and have been pleased with it.