Bootstrap Popover cannot interact touchstart with trigger focus

Question

I tried to create a button to popover a menu to allow user select different action. The button work great with mouse, but it cannot function with touchpad in notebook device.

When I use the popover without focus trigger, the modal button can interact with touchpad and display the modal dialog. But when I use focus trigger, it's look like dismiss event fired before the button click.

How should I handle the touchpad event in this case? Thanks!

Here is the code

const popoverTriggerList = [].slice.call(document.querySelectorAll('a.btn[data-bs-toggle=\'popover\'][data-bs-content-id]'));
popoverTriggerList.map((popoverTriggerEle) => {
    if (bootstrap.Popover.getInstance(popoverTriggerEle) !== null) {
        return null;
    }

    const contentId = popoverTriggerEle.attributes['data-bs-content-id'].value;

    bootstrap.Tooltip.Default.allowList.a.push(/^data-bs-[\w]+/);

    const contentEle = document.getElementById(contentId);
    if (contentEle) {
        return new bootstrap.Popover(popoverTriggerEle, {
            container: 'body',
            content: contentEle.innerHTML,
            html: true,
        });
    }

    return null;
});





  Popover content with HTML.



     Link 1

     Link 2

     Modal1

     Modal 2



    
        
            
                Header
            
            
                Body
            
            
                
            
        
    



    
        
            
                Header
            
            
                Body
            
            
                
            
        
    


Popover without focus
Popover with focus

Bootstrap Popover cannot interact touchstart with trigger focus

0 Answers