How to reset a property to " " when clicking away

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

loop blade:

<div class="row">

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


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

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


Loop component:

public function selectedPart($part)


    $this->part = $part;


querybar blade:


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


    <div class="list-group">


        @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>


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


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


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







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





querybar component

public $query;

public function mount($part)


    $this->part = $part;


public function updatedQuery()


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




hey @0bi-juan you can try this out

<div x-data="{isTyped: false}"> 
        <input class="your-css-classes-here"
                x-on:input.debounce.400ms="isTyped = ($ != '')"
                placeholder='Search... Press / to focus'
                x-on:keyup.escape="isTyped = false; $refs.searchField.blur()">

I use it in my blog and it works perfectly


1 Like

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)
        } else {
            $posts = [];
            $this->isEmpty = __('Nothings Found.');

        return view('livewire.your-path-the-search-blade', [
            'posts' => $posts
// ...

Thanks a lot @skywalker for the solution!

happy to help @0bi-juan