AdvancedSelect is not submitted in the form data

bekaddourelhadjali commented 3 months ago

Summary

Steps to Reproduce

I'm using laravel with vite and i added preline package but it's not submitting the select in the form should i create a hidden input and implement on change function so it can put the values in the hidden input ?

`

                <div class="flex gap-4 flex-col sm:flex-row">
                    <h1 class="block antialiased tracking-normal font-sans font-semibold text-blue-gray-900 !leading-snug lg:!text-3xl !text-2xl max-w-2xl">Add New Lease</h1>
                    <button type="submit" class="inline-block align-middle text-center select-none border font-normal whitespace-no-wrap rounded-full py-1 px-6 leading-normal no-underline bg-blue-800 text-white hover:bg-blue-800">Save Property</button>
                </div>
                @csrf
                <div class=" p-4 px-4 md:p-8 mb-6">
                    <div class="grid gap-4 gap-y-2 text-sm grid-cols-1 md:grid-cols-4">
                        <div class="md:col-span-2">
                            <label for="property_id" class="block mb-2 font-sans text-sm antialiased font-medium leading-normal text-blue-gray-900">
                                Property
                            </label>
                            <div class="relative h-10 w-full">
                                <!-- Select -->
                                <select name="property_id" multiple="" :hasSearch data-hs-select='{
                                          "placeholder": "Select property...",
                                          "toggleTag": "<button type=\"button\"></button>",
                                          "toggleClasses": "hs-select-disabled:pointer-events-none hs-select-disabled:opacity-50 relative 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",
                                          "dropdownClasses": "mt-2 z-50 w-full max-h-72 p-1 space-y-0.5 bg-white 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",
                                          "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",
                                          "mode": "tags",
                                          "wrapperClasses": "relative ps-0.5 pe-9 min-h-[46px] flex items-center flex-wrap text-nowrap w-full border border-gray-200 rounded-lg text-start text-sm focus:border-blue-500 focus:ring-blue-500",
                                          "tagsItemTemplate": "<div class=\"flex flex-nowrap items-center relative z-10 bg-white border border-gray-200 rounded-full p-1 m-1\"><div class=\"size-6 me-1\" data-icon></div><div class=\"whitespace-nowrap text-gray-800\" data-title></div><div class=\"inline-flex flex-shrink-0 justify-center items-center size-5 ms-2 rounded-full text-gray-800 bg-gray-200 hover:bg-gray-300 focus:outline-none focus:ring-2 focus:ring-gray-400 text-sm cursor-pointer\" data-remove><svg class=\"flex-shrink-0 size-3\" 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=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg></div></div>",
                                          "tagsInputClasses": "py-3 px-2 rounded-lg order-1 text-sm outline-none",
                                          "optionTemplate": "<div class=\"flex items-center\"><div class=\"size-8 me-2\" data-icon></div><div><div class=\"text-sm font-semibold text-gray-800\" data-title></div><div class=\"text-xs text-gray-500\" data-description></div></div><div class=\"ms-auto\"><span class=\"hidden hs-selected:block\"><svg class=\"flex-shrink-0 size-4 text-blue-600\" xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" fill=\"currentColor\" viewBox=\"0 0 16 16\"><path d=\"M12.736 3.97a.733.733 0 0 1 1.047 0c.286.289.29.756.01 1.05L7.88 12.01a.733.733 0 0 1-1.065.02L3.217 8.384a.757.757 0 0 1 0-1.06.733.733 0 0 1 1.047 0l3.052 3.093 5.4-6.425a.247.247 0 0 1 .02-.022Z\"/></svg></span></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\" 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 value="">Choose</option>
                                    @foreach($properties as $property)
                                        <option value="{{$property->property_id}}" data-hs-select-option='{
                                              "description": "{{$property->name}}",
                                              "icon": "<img class=\"inline-block rounded-full h-full\" src=\"{{$property->getPhotoUrl()}}\" />"
                                            }'>{{$property->name}}</option>
                                    @endforeach
                                </select>
                                <!-- End Select -->
                            </div>
                        </div>`

Demo Link

https://preline.co/plugins/html/advanced-select.html

Expected Behavior

I expect the select to be sent with the form

Actual Behavior

It works fine but it's not sending the select in the request

Screenshots

No response

bekaddourelhadjali commented 3 months ago

and if someone also has a solution for this

the multiselect is working but when i remove an option the onchange event doesn't trigger

abdelbk commented 1 week ago

I encountered the same issue. Adding/Removing tags should update the native select tag options.

htmlstreamofficial / preline