Expected behavior Clicking on a popover within a datatable with clickable rows should show the popover.

Actual behavior I have a datatable with clickable rows. When clicking on the row, the user is redirected to another page. Within the row there is also a popover. In line with the documentation I implemented the stopPropagation to block the redirect when clicking on the popover. However, the popover itself does not show.

Resources (screenshots, code snippets etc.)

Somewhat simplified, but this is the code:

<div id="active-projects-datatable"> </div>
<script>
    data = {
        columns: [
            { label: 'Name', field: 'name', },
            { label: 'Status', field: 'status',},
        ],
        rows: [
            {
                name: "Test!",
                status: [],
                url: "/home"
            }].map((row) => {
                if(row.status.length!=0){
                    status_button = `
                    <a
                    tabindex="0"
                    class="btn btn-danger"
                    role="button"
                    data-mdb-toggle="popover"
                    data-mdb-trigger="focus"
                    title="Error"
                    data-mdb-content="Oh no! Something went wrong."
                    >Error</a
                    >`

                }else{
                    status_button = `
                    <a
                    tabindex="0"
                    class="btn btn-success"
                    role="button"
                    data-mdb-toggle="popover"
                    data-mdb-trigger="focus"
                    title="Good"
                    data-mdb-content="All good!"
                    >Good</a
                    >`
                }
                return {
                ...row,
                status:  status_button};
            })
        };

        const tableDiv = document.getElementById('active-projects-datatable');
        // Add row clickable functionality
        tableDiv.addEventListener('rowClick.mdb.datatable', (e) => {
            window.location = data.rows[e.index].url;
        });
        // Make sure the buttons in a row are still clickable
        tableDiv.addEventListener('render.mdb.datatable', () => {
            Array.from(tableDiv.getElementsByClassName(`btn`)).forEach((button) => {
                button.addEventListener('click', (e) => {
                    e.stopPropagation();
                });
            });
        });
        // Create datatable
        table = new datatable(tableDiv , data, {
            sm: false,
            hover: true,
            clickableRows: true});
</script>