Rretzko's avatar
Level 15

Cannot read properties of undefined (reading 'focus')

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

0 likes
1 reply
Rretzko's avatar
Rretzko
OP
Best Answer
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!

Please or to participate in this conversation.