Uncaught (in promise) TypeError

[sxshateri]

I'm trying to use alpine on a Livewire view for simple show dropdown on focus and hide it on click away but once the filed is updated after the I get the following error in the console.

Uncaught (in promise) TypeError: Cannot read property 'replace' of null
    at alpinifyElementsForMorphdom (SupportAlpine.js:143)
    at onBeforeElUpdated (index.js:461)
    at callHook (morphdom.js:35)
    at morphEl (morphdom.js:199)
    at morphdom.js:332
    at morphEl (morphdom.js:219)
    at morphdom.js:332
    at morphEl (morphdom.js:219)
    at morphdom.js:332
    at morphEl (morphdom.js:219)

Here is the part of the Livewire view that I'm using the alpine on:

<div class="col-md-6 mt-2" x-data="{ isOpen: false }">
    <div class="form-group">
        <label class="justify-content-start pr-0" for="webSkills">Search and add skills</label>
        <div class="input-group input-group-alternative ">
            <div class="input-group-prepend">
                <span class="input-group-text"><i class="ni ni-zoom-split-in"></i></span>
            </div>
            <input class="form-control form-control-alternative" name="webskills" id="webSkills" placeholder="" wire:model.debounce.350ms="skillsQuery" x-on:focus="isOpen = true" @click.away="isOpen = false" />
        </div>

        @if (count($skillResults))
            <div class="position-relative mt-2" x-show="isOpen">
                <div class="bg-secondary text-left p-2 justify-content-end rounded position-absolute w-100 shadow-sm skills-search-dropdown" dir="ltr">
                    <ul class="mb-0 list-group list-group-flush bg-secondary">
                            @foreach ($skillResults as $result)
                                <li class="list-group-item bg-secondary">{{ $result['name'] }}</li>
                            @endforeach
                    </ul>
                </div>
            </div>
        @elseif (strlen($skillsQuery) > 0)
            <div class="position-relative mt-2">
                <div class="bg-secondary text-left p-2 justify-content-end rounded position-absolute w-100 shadow-sm skills-search-dropdown" dir="ltr">
                    <ul class="mb-0 list-group list-group-flush bg-secondary">
                        <li class="list-group-item bg-secondary text-right" dir="rtl">No results found</li>
                    </ul>
                </div>
            </div>
        @endif
    </div>
</div>

[sxshateri]

Found the issue and fixed it.

[bramcou]

I'm getting the same error, and I've been putting alpine.js in multiple livewire components before this. Seems to be going wrong when the alpine.js stuff in the livewire component is getting more complex.

Could you explain what you did to fix it?

I get the same error but arbitrary, not always, despite doing the exact same thing.

[jimmybsilva]

fixed

it's crazy you asked for help but you can't put how you solved it to help others?

[KevinBatdorf]

@jimmybsilva Open a new discussion with your error, or share it in the Discord and someone will eventually help out.

[umahatokula]

@sxshateri How did you solve this issue?