keyboardNavigation: true is breaking tabbing of global navigation if more than one level deep in Dropdown Menu

[glennpowell2]

Currently on a legacy system, it uses Bootstrap 3. Can't speak for later versions of Bootstrap. While bootstrap doesn't allow for multilevel global navigation out of the box, we use a modified version that does allow for it.

Global Navigation = Navigation Dropdown at the top of the website.

We use Liquid Slider for Announcements.

If I have keyboardNavigation set to the value of true while using Liquid Slider, when you tab through our Global Navigation (multilevel dropdown) it auto closes the dropdown once you attempt to tab into the lower ul li past the first level. If I set it the value to false, the global navigation tabs as expected. But setting it to true is the only way to allow the arrow keys to navigate through the Liquid Slider tabs.

Any advice on how to solve this issue?

[KevinBatdorf]

It's been so long since I've worked on this I barely remember the api.

Looking at the code examples, maybe you could disable/enable the keyboard navigation dynamically?

const api = $.data( $('#my-slider')[0], 'liquidSlider');
api.options.keyboardNavigation = false;
// do something
api.options.keyboardNavigation = true;