Autocomplete won't work inside Wire Elements Modal

[kfkok]

Hi Josh, Autocomplete is broken if I place the it inside the wire elements modal which is a livewire popup dialog-box component. The console warns that "Alpine Expression Error: autocomplete is not defined".

But it works when it is not placed inside any modal or is dynamically created.

The reason is due to autocomplete function defined in resources/views/autocomplete.blade.php was not registered into the window object when it is called by wire elements modal. A relevant post discussing that alpine not working inside the wire element modal might be having the same issue as this.

I suspect the @livewire(...) blade directive used inside the wire elements modal does not register functions defined inside the components when called dynamically.

The temporary solution was to assign the autocomplete function to window.autocomplete inside the autocomplete.blade.php
window.autocomplete = (config){ showDropdown: false, ...config, focusIndex, ... }

However, I was not able to publish the autocomplete.blade.php to my views folder to do this.

Any idea how can I make it work inside wire elements modal?

[joshhanley]

@kfkok thanks for reporting!

I haven't used the Wire Elements Modal, but going off what you described, the reason it won't be working is because Livewire (currently) won't dynamically load scripts. It's an issue with any Alpine based component using an external function.

Personally, I'm hesitant to assign package scripts to the window object, as it runs the risk of conflicts.

One work around would be, if you add an autocomplete component somewhere on the page and hide it. Then when the modal dynamically loads one, it will work, as the function already exists on the page.

This issue is something we've been working on fixing in Livewire, but we ran into some breaking changes, so it's now going to have to wait until V3 is released.

The other way around it would be to not use the Wire Elements Modal. I use a modal, that I took from Jetstream and modified, that just makes use of Alpine, that way there is no dynamic @livewire calls necessary and all the components and scripts are already rendered on the page.

Hope this helps!

[joshhanley]

@kfkok no worries! 🙂

Yep fair enough! Good to know that worked ok.

I wonder if there is a way we can move the javascript to its own file that can be imported in app.js but still remain in the vendor folder, so you don't need to copy/publish the javascript assets (which can lead to them becoming out of date).

[flameblue59]

any news regarding "wire elements modal"?

[joshhanley]

@flameblue59 the next version of this package will make use of Livewire's @script/@assets blade directives, so this won't be a problem 🙂 There is a WIP branch here https://github.com/joshhanley/livewire-autocomplete/tree/next

[flameblue59]

Well, hopefully you can release it soon. It would be great for us

[joshhanley]

@flameblue59 yep, I'm speaking at Laracon AU in a couple of weeks, but plan to finish the docs after that and get it released 🙂