edit form add task

resources/views/tasks/create.blade.php

@@ -84,11 +84,11 @@ if (isset($task)) {
                     </select>
                 </div>
 
-                <div class="ui-form-field">
+                <div class="ui-form-field ui-form-field--dropdown">
                     <label for="dropdown-btn">انتصاب کاربران</label>
-                    <div class="relative" id="dropdown-container">
+                    <div id="dropdown-container">
                         <button type="button" id="dropdown-btn"
-                                class="ui-input text-right flex justify-between items-center">
+                                class="ui-input text-right flex justify-between items-center w-full">
                             <span id="selected-count">انتخاب کاربران</span>
                             <svg class="w-4 h-4 transition-transform" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                 <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
@@ -97,7 +97,7 @@ if (isset($task)) {
                         </button>
 
                         <div id="dropdown-list"
-                             class="hidden absolute z-20 w-full ui-panel border border-gray-300 rounded-lg shadow-lg mt-1">
+                             class="hidden ui-form-dropdown-panel">
 
                             <div class="p-2 border-b">
                                 <input type="text" id="search-input"
@@ -151,21 +151,30 @@ if (isset($task)) {
     <script>
         const dropdownBtn = document.getElementById('dropdown-btn');
         const dropdownList = document.getElementById('dropdown-list');
+        const dropdownField = document.querySelector('.ui-form-field--dropdown');
         const searchInput = document.getElementById('search-input');
         const usersList = document.getElementById('users-list');
         const selectedCountSpan = document.getElementById('selected-count');
 
+        function setAssigneeDropdownOpen(open) {
+            dropdownList.classList.toggle('hidden', !open);
+            if (dropdownField) {
+                dropdownField.classList.toggle('is-open', open);
+            }
+        }
+
         dropdownBtn.addEventListener('click', (e) => {
             e.stopPropagation();
-            dropdownList.classList.toggle('hidden');
-            if (!dropdownList.classList.contains('hidden')) {
+            const willOpen = dropdownList.classList.contains('hidden');
+            setAssigneeDropdownOpen(willOpen);
+            if (willOpen) {
                 searchInput.focus();
             }
         });
 
         document.addEventListener('click', (e) => {
             if (!dropdownBtn.contains(e.target) && !dropdownList.contains(e.target)) {
-                dropdownList.classList.add('hidden');
+                setAssigneeDropdownOpen(false);
             }
         });