Issue with Logout Method Changing to PUT in Laravel When Using Flowbite DataTables

[angeliicp]

Hi everyone, I’m currently working on a web system using laravel and flowbite. For displaying tables (users, departments, etc.), I’m using flowbite’s datatables, which includes a built-in search bar that can be enabled with javascript. I also tried to customized the table header using the template option, like this

if (document.getElementById("search-table") && typeof simpleDatatables.DataTable !== 'undefined') {
    const dataTable = new simpleDatatables.DataTable("#search-table", {
        searchable: true,
        sortable: false,
        template: (options, dom) => `
            <div class='${options.classes.top} flex flex-col sm:flex-row sm:justify-between w-full gap-2'>

                <!-- Search Bar -->
                ${
                    options.searchable 
                    ? `<div class='${options.classes.search} w-full sm:w-auto'>
                        <input class='${options.classes.input} w-full sm:w-auto px-3 py-2 border rounded-lg' 
                            placeholder='${options.labels.placeholder}' 
                            type='search' 
                            title='${options.labels.searchTitle}' 
                            ${dom.id ? ` aria-controls="${dom.id}"` : ""}>
                    </div>` 
                    : ""
                }

                <!-- Add Department Button -->
                <div class="w-full sm:w-auto">
                    <a type="button" href="{{ route('department.create') }}" 
                        class="inline-flex items-center justify-center w-full sm:w-auto px-3 py-2 text-sm font-medium text-white rounded-lg bg-primary-700 hover:bg-primary-800 focus:ring-4 focus:ring-primary-300">
                        <svg class="w-5 h-5 mr-2 -ml-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" d="M10 5a1 1 0 011 1v3h3a1 1 0 110 2h-3v3a1 1 0 11-2 0v-3H6a1 1 0 110-2h3V6a1 1 0 011-1z" clip-rule="evenodd"></path>
                        </svg>
                        Add department
                    </a>
                </div>
            </div>

            <div class='${options.classes.container}'${options.scrollY.length ? ` style='height: ${options.scrollY}; overflow-Y: auto;'` : ""}></div>
            <div class='${options.classes.bottom}'>
                ${options.paging ? `<div class='${options.classes.info}'></div>` : ""}
                <nav class='${options.classes.pagination}'></nav>
            </div>
        `
    });
}

The problem is:
-> When I don’t customize the table (just use the default settings), I can log out just fine from the navbar.
-> But when I do customize the table like in the script above, logging out gives me this error:
"The PUT method is not supported for route logout. Supported methods: POST."
-> If I try logging out from another page (without the customized table), it works normally.

I suspect that DataTables (or something related) might be interfering with the form submission, but I’m not sure how. Does anyone know what could be causing this issue? Any help would be appreciated!