smartSelect in scrollable popover: scrollToSelectedItem issue

Inside a view I’m trying to use scrollToSelectedItem for a (simple) smartSelect opened in a popover. I’m getting an error (indicating that the .page-content element is undefined in the scrolling calculation) so not sure what I’m doing wrong… or whether the scrollToSelectedItem has a flaw if it’s in a modal?

Here’s the basic HTML:

The options are being loaded dynamically and there can be anywhere from 10-25 instances - more than what is viewable in the modal without scrolling so are looking to have the popover opened to the selected one. (For other reasons there’s a strong preference to use a popover for this particular case.)

Can anybody advise how to solve?

Ok… Just realised that the HTML part was hidden (as part of the post formatting). Here’s what it was:
< a id=“otwOptLink” href="#" class=“item-link smart-select otwOpt” data-open-in=“popover” data-close-on-select=“true”>

Update: I’ve found a way around the problem:
$$(document).on(‘click’, ‘.otwOpt’, function(e) {
var sd = app.smartSelect.get(’.otwOpt’);
var si = sd.selectEl.selectedIndex; // Gets the index of the selected item
var el = sd.$containerEl[0].querySelector(’.popover-inner’); // Get the popover element
var ih = el.querySelector(‘li’).clientHeight; // Get the height of each list item
var sy = ih * si; // Calculate the scroll amount
el.scrollBy(0, sy ); // Apply the scroll.

Note: if you’ve used CSS to increase the height of the popover then use the following instead:
var el = sd.$containerEl[0]; // Get the popover element

1 Like