How to reset a property to " " when clicking away

#1

What seems to be the problem:

Hi!, I’ve been learning to code with Livewire, so far I’ve been able to do everything I need, I’m very happy I found it.

I have a shared search dropdown that deploys with a wire:model that sets the id of a specific iteration from a loop, everything works great, but I haven’t figured out how to reset that property when clicking anywhere else. Even when I click the search bar deploying button of any other loop, the search resumes right where I left it from the last loop. I read about some sort of click away with Alpine in the docs, but I don’t have any knowledge about that tool whatsoever, or any Js. Is there another way I can solve this?

I extracted what I think is the relevant part of my code, sorry if my code is not well pasted, didn’t figure out how to do it right. Thanks a lot for any help

#2 
loop blade:

<div class="row">

<button wire:click="$emit('selectedPart',{{$carpart}})" class="btn btn-danger col-2">Search</button>

</div>

@if($carpart->id == $part['id'])

@livewire('querybar', ['part' => $part])

@endif

Loop component:

public function selectedPart($part)

{

    $this->part = $part;

}

querybar blade:

<div>

    <input type="text" class="form-control" placeholder="Search Part..." wire:model="query" />

    @if(!empty($query))

    <div class="list-group">

        @if(!empty($products))

        @foreach($products as $product)

        <div class="container">

            <small wire:click="choosePart({{$product['id']}})">

                <p class="col-10">{{$product['supercode']}} <strong class="col-2">${{$product['price']}}</strong>

                    @if($product['existR']-$product['reservR']>=$part['quantity'])

                    <a style='font-size:12px;color:green'> 5 minutes </a>

                    @elseif($product['existR']-$product['reservR']+$product['existB']-$product['reservB']>=$part['quantity'])

                    <a style='font-size:12px;color:orange'> 10 minutes </a>

                    @else

                    <a style='font-size:12px;color:red'> Only: {{$product['existR']+$product['existB']-$product['reservR']-$product['reservB']}} </a>

                    @endif

                </p>

            </small>

        </div>

        @endforeach

        @else

        <div class="list-item">No Results!</div>

        @endif

    </div>

    @endif

</div>

querybar component

public $query;

public function mount($part)

{

    $this->part = $part;

}

public function updatedQuery()

{

    $this->products = Product::where('supercode', 'like', '%' . $this->query . '%')

        ->take(10)

        ->get()

        ->toArray();
#3

hey @0bi-juan you can try this out

<div x-data="{isTyped: false}"> 
        <input class="your-css-classes-here"
                type="search"
                name="search"
                id="search"
                x-ref="searchField"
                x-on:input.debounce.400ms="isTyped = ($event.target.value != '')"
                placeholder='Search... Press / to focus'
                autocomplete="off"
                wire:model.debounce.500ms="search"
                x-on:keydown.window.prevent.slash="$refs.searchField.focus()"
                x-on:keyup.escape="isTyped = false; $refs.searchField.blur()">
</div>

I use it in my blog and it works perfectly

search

1 Like
#4

in the Search Component, you can do something like that

// ....
    public $search, $isEmpty = '';

    public function render()
    {
        if (!is_null($this->search)) {
            $posts = Post::search($this->search)
                        ->with('category')
                        ->take(5)
                        ->get();
        } else {
            $posts = [];
            $this->isEmpty = __('Nothings Found.');
        }

        return view('livewire.your-path-the-search-blade', [
            'posts' => $posts
        ]);
    }
// ...
#5

Thanks a lot @skywalker for the solution!

#6

happy to help @0bi-juan