Level 15
I worked through the code top-to-bottom and found I was missing some enclosing s which, when added, fixed the problem. Thanks for the help, if you took a look!
Hi all - I'm in need of help for an Alpine JS issue, stemming from a Livewire implementation. I have a Livewire page with eight forms, each of which is triggered for display/hidden based on a variable in the Livewire controller. Each form has a focus() element defined as:
@if($displayForm === 'artists')
<div class="ml-8">
<div class="input-group" x-data x-init="$refs.artistTypeDescr.focus()">
<label>Artist Type</label>
<input wire:model="artistTypeDescr" class="short-text" x-ref="artistTypeDescr" type="text"/>
<div id="artistTypeList">{!! $artistTypeList !!}</div>
</div>
</div>
@endif
This works beautifully on the first six forms. The seventh form is:
@if($displayForm === 'tags')
<div class="ml-8">
<div class="input-group" x-data x-init="$refs.newTag.focus()">
<label>Tag Description</label>
<input wire:model="tag" class="short-text" x-ref="newTag" type="text" />
<div id="tagList">{!! $tagList !!}</div>
</div>
</div
@endif
This generates an Alpine error:
Alpine Expression Error: Cannot read properties of undefined (reading 'focus')
Expression: "$refs.newTag.focus()"
<div class="input-group" x-data x-init-"$refs.newTag.focus()">
<label>Tag Description</label>
<input wire:model="tag" class="short-text" x-ref="newTag" type=text" data-form-type="other">
<div id="tagList"></div>
</div>
Maybe it's my eyes, but can someone help me see/understand why this is failing? Thanks - Rick
I worked through the code top-to-bottom and found I was missing some enclosing s which, when added, fixed the problem. Thanks for the help, if you took a look!
Please or to participate in this conversation.