2 LWA on page -> bad interference

[BrinkmoellerMartin]

I have two LWAs on the same page. One to search and complete for "submitters" and one to search and complete for "projects". When I load the page with the form and type a name into the search for submitters and then select one of those submitters that are shown to me, the drop down with the result-rows shortly disappears and shows up again shortly after. If I click to select one of the presented submitters again, it then works. I can then also go to the LWA for projects and search for a project and it will work on the first try.
However, if I refresh the page and start with the projects, then I'd get the same issue, but then the submitters would work on the first select, not just the on the second.

Investigating it further, I found my browsers network tab would send this update the first time I'd select a submitter:
(Payload of the update, inside "components")

updates
:
{projectSearch: null}
projectSearch
:
null

And on the 2nd click of the exact same result row, I'd get
updates
:

{submitterSearch: "Max Muster Musterinstitut", submitterId: 4149}
submitterId
:
4149
submitterSearch
:
"Max Muster Musterinstitut"

If I wouldn't have the project LWA in my blade, my code works as intendend from the get go.

I don't understand why my selection of a submitter triggers an update for something project related and unintended. How can I fix this?

Here is my blade file for context:
`

{{-- Submitter Autocomplete --}}
<div class="mb-4">
    <label class="form-label">Submitter</label>
    <x-lwa::autocomplete
        name="submitter-autocomplete"

        {{-- bind to the three Livewire props --}}
        wire:model-text="submitterSearch"
        wire:model-id="submitterId"
        wire:model-results="submitterResults"
        :key="'submitter-autocomplete'"
        :options="[
            'id'        => 'id',   // must match the array keys you build in PHP
            'text'      => 'text', // ^
            'allow-new' => false,
        ]"
    />
</div>

{{-- Submitter info --}}
@if($submitter)
    <div class="bg-light p-3 rounded mb-4">
        <h2 class="h5 mb-2">
            {{ $submitter->einVorname }} {{ $submitter->einNachname }}
        </h2>
        <p class="mb-1"><strong>Institute:</strong> {{ $submitter->einInstitution }}</p>
        @if(method_exists($submitter, 'getAddress'))
            <p class="mb-0"><strong>Address:</strong> {{ $submitter->getAddress() }}</p>
        @endif
    </div>
@else
    <p class="text-muted">No submitter selected.</p>
@endif

<hr class="my-4">

{{-- Project Autocomplete --}}
<div class="mb-4">
    <label class="form-label">Project</label>
    <x-lwa::autocomplete
        name="project-autocomplete"

        {{-- bind to second trio --}}
        wire:model-text="projectSearch"
        wire:model-id="projectId"
        wire:model-results="projectResults"
        :key="'project-autocomplete'"
        :options="[
            'id'        => 'id',
            'text'      => 'text',
            'allow-new' => false,
        ]"
    />
</div>

{{-- Project info --}}
@if($project)
    <div class="bg-light p-3 rounded">
        <h2 class="h6 mb-0">{{ $project->prjName }}</h2>
    </div>
@else
    <p class="text-muted">No project selected.</p>
@endif

`

[BrinkmoellerMartin]

I found the mistake I made. In my Component, I initially used:

  public ?string $submitterSearch  = '';
  public ?string $projectSearch  = '';

So it wasn't null so the update was send. Changing it to:

  public ?string $submitterSearch  = null;
  public ?string $projectSearch  = null;

Solved the issue. Of course I find the solution hours after I posted here, when I didn't find it in the last 3 days constantly working on it. Forgive me, I am new to Laravel and Livewire.

[joshhanley]

@BrinkmoellerMartin no worries! Glad you managed to work it out 😊