search

victorybiz / laravel-simple-select

Laravel Simple Select inputs component for Blade and Livewire.
MIT License
125 stars 18 forks source link

Uncaught (in promise) TypeError: this.$dispatch is not a function #5

Closed rstanislav closed 2 years ago

rstanislav commented 2 years ago

Hello! Trying to use simple select:

<div class="mt-1">
                    <x-simple-select wire:model="selectedCar" name="country" id="country" :options="$cars" value-field='id' text-field='vin' placeholder="Select Country" search-input-placeholder="Search Country" :searchable="true" class="form-select" />
                </div>

When selecting value it throws error:

Alpine Error: "TypeError: this.$dispatch is not a function"

Expression: "selectOption(getOptionValue(option, index))"

Strange thing is that selectedCar value gets updated in livewire and after that it throws error.

victorybiz commented 2 years ago

@rstanislav Thanks for trying out this package.

Ensure Alpine.js v3 and all dependencies stated in the README are installed and imported in your project. If error persist, please post snippets of your js import codes and step to reproduce.

rstanislav commented 2 years ago

I have checked and found that old version of alpine used, updated to v3 and its working, thanks! But now on page load every select element is "opened", i think its not supposed to work like this ?

victorybiz commented 2 years ago

@rstanislav Check your console if any errors or conflicting packages because it ought to work without any issue if dependencies are installed correctly.

rstanislav commented 2 years ago

No errors in console, by open i mean they are all opened for split-second, looks like while page is loading, when its finished they are all working as intended

victorybiz commented 2 years ago

I think this has to do with Alpine.js, this package uses the Alpine.js' x-cloak directive, please add the following to your CSS file.

[x-cloak] { 
  display: none !important;
}

x-cloak addresses this scenario by hiding the element it's attached to until Alpine is fully loaded on the page.

https://alpinejs.dev/directives/cloak