Why does my bootstrap 5 popover lose the ability to open on focus after I close and reopen the modal it is on?

Question

I have an issue with my Bootstrap 5 modal and the popovers I've placed on to it.

In my HTML I have the following, which correctly displays when the user hovers over the button. The popover shows an 'Are you sure?' type prompt and advises the user to click the button (that is hovered) to continue. Clicking the button then takes the focus and keeps the popover open until clicked again, or clicked away from the element.

This allows the mouse pointer to enter the popover content and click the 'Continue' button.

This is the kind of thing I was going for: https://bootstrap-confirmation.js.org but with some more detail about the function shown when the button is hovered...

Anyway, it works great! First time around... If the modal is hidden and then shown again, only the hover part of the popover trigger works, and clicking the button does fire it's listener, but the popover refuses to stay open (as per the 'focus' trigger)..

Please help, it's driving me mad!

Frustratingly, the snippet below does seem to work, although will throw an error when the modal is closed and reopened, and I'm not sure why?

Edit to add: The problem is present in both Chrome and Safari, safari will create a console error:

[Error] TypeError: undefined is not an object (evaluating 't.nodeType')

    o (bootstrap.bundle.min.js:6:823)
    _typeCheckConfig (bootstrap.bundle.min.js:6:7060)
    _getConfig (bootstrap.bundle.min.js:6:69112)
    W (bootstrap.bundle.min.js:6:7420)
    cn (bootstrap.bundle.min.js:6:62612)
    un
    (anonymous function) (locate_dev.js:394)
    dispatchEvent
    trigger (bootstrap.bundle.min.js:6:5516)
    (anonymous function) (bootstrap.bundle.min.js:6:52949)
    a (bootstrap.bundle.min.js:6:2488)
    dispatchEvent
    s (bootstrap.bundle.min.js:6:736)
    (anonymous function) (bootstrap.bundle.min.js:6:2539)

The code at line 394 in locate_dev.js is the popover init, suspiciously:


// 1 - Init the popover
        var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

let locateScreen = new bootstrap.Modal(document.getElementById('locateScreen'));

const locateModal = document.getElementById('locateScreen')
locateModal.addEventListener('shown.bs.modal', event => {

  const locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
    html: true,
    sanitize: false,
    customClass: 'locate-footer-popover',
    title: "Are you sure?",
    //      trigger: 'focus',
    content: $('[data-name="close-btn-popover-content"]')
  });

  // 2 - Listen for clicks on the 'Close' button
  $('#locate-btn-close').off('click');
  $('#locate-btn-close').on('click', function() {

    // This is firing, but the popover is closing when the mouse moves towards
    // the buttons, after the modal is shown once, hidden, then re-displayed.

    // Show popover buttons in popover 
    $('[data-name="close-btn-popover-content"] .confirm-buttons').show();

    // Assign listeners to the popover confirm buttons
    //$('#locate-btn-close-confirm').off()
    $('#locate-btn-close-confirm').on('click', function() { // Close Session screen
      
      locateScreen.hide();
      
    });

    // Hide 'Click to continue' text
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').hide()
  });

  // When the popover is initially shown, hide the buttons and make sure the text reads:
  // 'click the button to continue', etc
  $('#locate-btn-close').on('inserted.bs.popover', function() {

    $('[data-name="close-btn-popover-content"] .confirm-buttons').hide()
    $('[data-name="close-btn-popover-content"] .input-group-sm .continue-text').show()
  });
  
  
});

locateModal.addEventListener('hidden.bs.modal', event => {
        
        // At this point the  $('[data-name="close-btn-popover-content"]') has been removed....
        // Lets add it back in
        $('#popover-close-btn-holder').html('You can choose to close or save this session at the next screen.
Click the button to continue...
');
        
    });











  
    
      
        Modal title
        
      
      
        Popover is on the Save Changes button. Click continue, which will hide the modal. Open it again from the button. On my own code the 'focus' part of the popover is lost and I can't get the mouse over the popover. Here it seems to work. No idea why. However the event listener on the confirm button is lost still.
      
      
        
        Save Changes

        

        
          
            
              Click the button to continue...

It would appear that the error is produced because the content for the popover disappears at some point between the modal being hidden and re-shown.

Consider:

        var locateBtnClosePopover = new bootstrap.Popover($('#locate-btn-close'), {
            html: true,
            sanitize: false,
            customClass: 'locate-footer-popover',
            title: "Are you sure?",
            content: $('[data-name="close-btn-popover-content"]')
        });

Testing for $('[data-name="close-btn-popover-content"]') returns nothing at all. Manually appending it to the parent div when init the modal (before init the popover) doesn't help either.

Why does my bootstrap 5 popover lose the ability to open on focus after I close and reopen the modal it is on?

Answers (1)

Related Questions