<select> Disappears after submitting the form

[claytongf]

Summary

The select disappears after submiting a form with validation errors.

Steps to Reproduce

Using: "tailwindcss": "^3.1.0", "preline": "^2.3.0" "php": "^8.2", "livewire/livewire": "^3.4",

I've created a component with search. Everything is fine but, when I submit the form and has validation errors. The error messages appears and the disappears.

Here is the code

select.blade.php

@props(['search' => false, 'text' => 'Selecione...', 'values', 'name' => ''])
<label for="city" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">{{ $text }}</label>
@php
    $hasSearch = '';
    if($search)
        $hasSearch = '"hasSearch": true,';
@endphp
<select {!! $attributes !!} data-hs-select='{
    {{ $hasSearch }}
    "searchPlaceholder": "Buscar...",
    "searchClasses": "block w-full text-sm border-gray-200 rounded-lg focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-neutral-900 dark:border-neutral-700 dark:text-neutral-400 dark:placeholder-neutral-500 py-2 px-3",
    "searchWrapperClasses": "bg-white p-2 -mx-1 sticky top-0 dark:bg-neutral-900",
    "placeholder": "Selecione",
    "toggleTag": "<button type=\"button\"><span class=\"me-2\" data-icon></span><span class=\"text-gray-800 dark:text-neutral-200\" data-title></span></button>",
    "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative py-3 px-4 pe-9 flex text-nowrap w-full cursor-pointer bg-white border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500 before:absolute before:inset-0 before:z-[1] dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400",
    "dropdownClasses": "mt-2 max-h-72 pb-1 px-1 space-y-0.5 z-20 w-full bg-gray-50 border border-gray-200 rounded-lg overflow-hidden overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-track]:bg-gray-100 [&::-webkit-scrollbar-thumb]:bg-gray-300 dark:[&::-webkit-scrollbar-track]:bg-neutral-700 dark:[&::-webkit-scrollbar-thumb]:bg-neutral-500 dark:bg-neutral-900 dark:border-neutral-700",
    "optionClasses": "py-2 px-4 w-full text-sm text-gray-800 cursor-pointer hover:bg-gray-100 rounded-lg focus:outline-none focus:bg-gray-100 dark:bg-neutral-900 dark:hover:bg-neutral-800 dark:text-neutral-200 dark:focus:bg-neutral-800",
    "optionTemplate": "<div><div class=\"flex items-center\"><div class=\"me-2\" data-icon></div><div class=\"text-gray-800 dark:text-neutral-200\" data-title></div></div></div>",
    "extraMarkup": [

        "<div class=\"absolute top-1/2 end-3 -translate-y-1/2\"><svg class=\"flex-shrink-0 size-3.5 text-gray-500 dark:text-neutral-500\" xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"m7 15 5 5 5-5\"/><path d=\"m7 9 5-5 5 5\"/></svg></div>"
    ]
    }' class="hidden">
    <option selected>{{ $text }}</option>
    @foreach ($values as $key => $value)
        <option value="{{ $key }}">{{ $value }}</option>
    @endforeach
</select>
@error($name)
<p class="mt-2 text-sm text-red-600">{{ $message }}</p>
@enderror

the form code

<div>
    <x-header :links="$links" :title="$title" />
    <div class="py-6 mx-auto max-w-7xl sm:px-6 lg:px-8">
        <div class="lg:grid lg:grid-cols-12 lg:gap-x-5">
            <div class="space-y-6 sm:px-6 lg:px-0 lg:col-span-12">
                <form wire:submit.prevent="store">
                    <div class="shadow sm:rounded-md sm:overflow-hidden">
                        <div class="px-4 py-6 space-y-6 bg-white sm:p-6 dark:bg-gray-800 dark:text-gray-100">
                            <div>
                                <h3 class="text-lg font-medium leading-6 text-gray-900 dark:text-gray-100">
                                    {{ $title }}
                                </h3>
                            </div>
                            <div class="grid grid-cols-6 gap-6">
                                <div class="col-span-6 sm:col-span-3">
                                    <x-select :values="$cities" wire:model='city_id' name="city_id" text="Selecione a Cidade"/>
                                </div>
                            </div>
                        </div>
                        <div class="px-4 py-3 text-left bg-gray-50 sm:px-6 dark:bg-gray-800 dark:text-gray-300">
                            <a href="{{ route('admin.guide-categories.index') }}"
                                class="inline-flex items-center px-4 py-2 mr-4 text-sm font-medium text-blue-700 bg-blue-100 border border-transparent rounded-md dark:text-gray-100 dark:bg-gray-700 hover:bg-blue-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Cancel
                            </a>
                            <button type="submit"
                                class="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm dark:text-indigo-700 dark:bg-gray-100 hover:dark:bg-gray-300 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
                                Save
                            </button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

Demo Link

https://livewire.com

Expected Behavior

The select cannot disappears after submitting the form.

Actual Behavior

The select disappears after submitting the form.

Screenshots

[olegpix]

@claytongf Hi, I can assume that after submitting this component has been completely updated and it needs to be reinitialized. You can use the function HSStaticMethods.autoInit(['select']) which should be called after submitting.

[claytongf]

Hi @olegpix I've tried to add the function as your instructions but it's not working

<button id="submit"
class="font-medium text-white bg-blue-600 border border-transparent rounded-md shadow-sm">Save
</button>
<script>
    document.getElementById("submit").addEventListener("click", function() {
        HSStaticMethods.autoInit(['select']);
    });
</script>

Is this the correct approach?

[olegpix]

@claytongf Hi, Yes, that is correct. But maybe the function should be called after the error occurs, not immediately upon clicking. I can't see the form in the link you provided (https://www.livewire.com/). What steps should I follow to see the form you provided in the screenshots?