Clearing Textarea Field

#1

Having a small issue trying to clear a textarea of its content after a reply has been submitted.

Ive tried:

$this->reset('reply');
$this->reply = ''
$this->reply = null
$this->reply = 'Im gonna headbutt the screen if you dont disappear' :smile:

Here’s the full contents of the function:

$this->validate();

# Reply
Posts::create([
  'userID' => Auth::user()->id,
  'threadID' => $this->threadID,
  'description' => $this->reply,
]);

# Close Form
$this->showReply = false;

# Update The Component 
$this->emitSelf('refreshPosts');

# Display Toast
$this->dispatchBrowserEvent('toast', [
  'message' => 'Reply posted.',
  'type' => 'success',
]);

# Empty Reply Field (Or try anyway LOL)
$this->reset('reply');

PS: I didnt try the last one but I feel like I’m gonna try it shortly :smile:

#2

Hey, @AtomCoder

Is the textarea has initial value?

Ex:

<textarea>{{ $this->reply }}</textarea>

Can you paste the full code?

#3

@skywalker

Eh, no it doesnt have a value initially

<textarea wire:model.lazy="reply" class="forum-reply @error('reply') error @enderror" placeholder="Post a reply..."></textarea>
#4

In general cases what you do is the following:

in Reply Component

public $reply = '';

public function reply()
{
    // reply
   $this->reply = '';
}

But, you can debug your own code after and before the reply for example

public function reply()
{
     // reply
     $this->reply = '';
     if (empty($this->reply) {
         dd('empty!');
     }
}

You can come up with a solution while debug your own code and understand how it works behind the since.

1 Like
#5

@skywalker

Yea thats what I do but for whatever reason its not clearing it.

Ive tried the dump and it is dumping “empty”, but the text remains in the text field.

So weird!

#6

Have you checked the response?

#7

Yes its running the dd() function.

When I add $this->reply = ''; to the render method, its removing the text as expected, but thats not ideal as I want to be able to open/close the reply box and keep the text in the text area, only removing the text after the form is submitted.

#8

Solved this.

I was using wire:model.lazy on the textarea and it was updating the value when I posted the post and for some reason it kept the last value.

I used wire:model.defer and that solved all the issues.

Thanks @skywalker for your help as always!

#9

Cool! I’m glade you solved your issue.

I have been using *.lazy in the model binding and I have no issue with it, It’s weird but the most important thing, the issue was solved :smile:

#10

Yea me too but in this instance for some reason ‘lazy’ doesnt want to do any work lol.