Выпадающее меню исчезает после отправки формы в компоненте livewire ⇐ Php

[Anonymous]

Я работаю над компонентом Laravel Livewire с раскрывающимся списком с возможностью выбора нескольких вариантов. Параметры раскрывающегося списка динамически генерируются с помощью JavaScript, но после отправки формы параметры раскрывающегося списка исчезают.
Вот HTML-код раскрывающегося списка:
class="absolute z-10 mt-1 w-full bg-white shadow-lg max-h-60 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm"
wire:ignore.self>



Проблема в том, что я не могу использовать последнюю версию Alpine.js с @livewireScripts, поскольку я использую библиотеку, включающую Alpine v2.8. К сожалению, я не могу извлечь необходимый код Alpine.js из библиотеки, поскольку он весь перемешан.
Все работает нормально, пока форма не будет отправлена ​​и компонент Livewire не обновится, после чего раскрывающийся список исчезнет.
Это код интерфейса:

Mention roles


Select roles
















let isDropdownInitialized = false; // Flag to track if dropdown is initialized

function initializeDropdown(roles) {
console.log('Initializing dropdown with roles:', roles); // Debug: Check roles passed to the function

const selectedRolesInput = document.getElementById('selectedRoles');
const toggleDropdownButton = document.getElementById('toggleDropdown');
const dropdown = document.getElementById('dropdown');
const displayText = document.getElementById('displayText');
const dropdownContainer = document.querySelector('.relative');

let selectedOptions = [];

// Function to create dropdown items
function createDropdownItems() {
console.log('Creating dropdown items'); // Debug: Track when dropdown items are created
dropdown.innerHTML = ''; // Clear previous dropdown items

roles.forEach(role => {
console.log('Creating item for role:', role); // Debug: Track each role being added

const div = document.createElement('div');
div.classList.add('cursor-pointer', 'select-none', 'relative', 'py-2', 'pl-3', 'pr-9',
'hover:bg-primary', 'hover:text-white');
div.setAttribute('data-role-id', role.id);
div.addEventListener('click', function(event) {
console.log('Role clicked:', role); // Debug: Track role selection
event.stopPropagation();
toggleOption(role);
});

const span = document.createElement('span');
span.textContent = role.name;
span.classList.add('block', 'truncate');

const checkIcon = document.createElement('span');
checkIcon.classList.add('absolute', 'inset-y-0', 'right-0', 'flex', 'items-center', 'pr-4',
'text-primary');
checkIcon.style.display = selectedOptions.some(selected => selected.id === role.id) ? 'block' :
'none';

const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('class', 'h-5 w-5');
svg.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
svg.setAttribute('viewBox', '0 0 20 20');
svg.setAttribute('fill', 'currentColor');

const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill-rule', 'evenodd');
path.setAttribute('d',
'M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z'
);
path.setAttribute('clip-rule', 'evenodd');

svg.appendChild(path);
checkIcon.appendChild(svg);
div.appendChild(span);
div.appendChild(checkIcon);
dropdown.appendChild(div);
});
}

// Toggle the dropdown visibility
toggleDropdownButton.addEventListener('click', function(event) {
console.log('Dropdown toggle clicked'); // Debug: Track toggle button click
event.stopPropagation();
dropdown.style.display = dropdown.style.display === 'none' ? 'block' : 'none';
});

// Toggle selection of a role
function toggleOption(role) {
console.log('Toggling selection for role:', role); // Debug: Track role selection toggle
const index = selectedOptions.findIndex(selected => selected.id === role.id);
if (index !== -1) {
selectedOptions.splice(index, 1);
} else {
selectedOptions.push(role);
}
updateDisplayText();
createDropdownItems();
updateSelectedRolesInput();
}

// Update the displayed text of selected roles
function updateDisplayText() {
console.log('Updating display text with selected options:',
selectedOptions); // Debug: Track selected options
displayText.textContent = selectedOptions.length ? selectedOptions.map(option => option.name)
.join(', ') : 'Select roles';
}

// Update the hidden input field with selected roles
function updateSelectedRolesInput() {
const selectedIds = selectedOptions.map(option => option.id).join(',');
selectedRolesInput.value = selectedIds;
selectedRolesInput.dispatchEvent(new Event('input'));
console.log('Updated selected roles input:', selectedIds); // Debug: Track updated input value
}

// Initialize the dropdown items
createDropdownItems();

// Close the dropdown if clicked outside
document.addEventListener('click', function(event) {
if (!dropdownContainer.contains(event.target) && dropdown.style.display === 'block') {
console.log('Closing dropdown (clicked outside)'); // Debug: Track dropdown close action
dropdown.style.display = 'none';
}
});
}

document.addEventListener('livewire:initialized', () => {
@this.on('send-message', (data) => {
console.log('Message sent!'); // Debug: Track when message is sent
console.log('Roles:', data.roles); // Debug: Check roles passed
roles = data.roles; // Assign the roles to the roles variable
initializeDropdown(roles); // Reinitialize the dropdown with the new roles
});
});

document.addEventListener('DOMContentLoaded', () => {
console.log('Document loaded'); // Debug: Track when the page is loaded
// Initialize dropdown when the page is loaded
initializeDropdown(
@json($roles)); // Assuming @json($roles) is available in the page
});


А это внутренний код:


Подробнее здесь: https://stackoverflow.com/questions/793 ... -component