Found 2 elements with non-unique id #logout-form

[ser-tec]

settings:1 [DOM] Found 2 elements with non-unique id #logout-form: (More info: https://goo.gl/9p2vKq) <form id=​"logout-form" action=​"http:​/​/​dashboard.test/​logout" method=​"POST" style=​"display:​ none;​">​…​​ <form id=​"logout-form" action=​"http:​/​/​dashboard.test/​logout" method=​"POST" style=​"display:​ none;​">​…​​

[takielias]

@ser-tec I did not get the issue. Could you please explain?

[ser-tec]

Issue Title

Duplicate id="logout-form" issue in "combo" layout mode (top-right.blade.php)

---

Issue Description

Hello,

I've encountered an issue where the id="logout-form" is duplicated when using the "combo" layout mode and top-right.blade.php is included in multiple places within the application (e.g., in both sidebar.blade.php and sidebar-top.blade.php). This results in a non-unique ID error in the browser console:

[DOM] Found 2 elements with non-unique id #logout-form: (More info: https://goo.gl/9p2vKq)

---

Steps to Reproduce

1. Enable the "combo" layout mode in the Tablar configuration:

   'layout' => 'combo',

2. Load the page and inspect the console for the error.

---

Current Behavior

The id="logout-form" is hardcoded in top-right.blade.php, leading to duplicate IDs in the DOM when the layout mode is set to "combo".

---

Expected Behavior

Each instance of the logout form should have a unique ID to comply with HTML specifications and avoid browser console errors.

---

Proposed Solution

To resolve this issue, modify the top-right.blade.php file to dynamically generate a unique ID for the logout form. For example, use uniqid() to ensure uniqueness:

Updated top-right.blade.php:

<form id="logout-form-{{ uniqid() }}" action="{{ $logout_url }}" method="POST" style="display: none;">
    @if(config('tablar.logout_method'))
        {{ method_field(config('tablar.logout_method')) }}
    @endif
    {{ csrf_field() }}
</form>

And update the logout link to use the dynamically generated ID:

<a class="dropdown-item"
   href="#" onclick="event.preventDefault(); document.getElementById('logout-form-{{ uniqid() }}').submit();">
    <i class="fa fa-fw fa-power-off text-red"></i>
    {{ __('tablar::tablar.log_out') }}
</a>

---

Why This Matters

don't know if it matter but i don't like to see console error

---

Environment

• Laravel Version: 11.x
• Tablar Version: Latest (as of today)
• Livewire Version: 3.x
• PHP Version: 8.2