Build a Multi-room Realtime Chat with Livewire and Reverb
Playing
04. Textarea behaviour

Episodes

0%
Your progress
  • Total: 1h 23m
  • Played: 0m
  • Remaining: 1h 23m
Join or sign in to track your progress

Transcript

00:00
Inside the chat section on the right-hand side, we're going to have all of the messages
00:04
within its own container. That will be its own LiveWire component. But for now, let's focus on the text area and how we get this to submit through when we hit Enter,
00:15
as well as all the conditions around this. So I'm going to go ahead and build out a form in here. We'll get rid of the action. And we'll, of course, use LiveWire
00:23
to submit this through. And let's output a text area just inside of here as well. And let's go ahead and add some of the attributes that we need here.
00:32
So we're going to set this to a name of body, an ID of body. While we're here, we'll also go and add in a label. So let's add a label for body. And we'll just say message.
00:44
We'll go ahead and set this to screen reader only. So it's hidden, but available for screen readers. Okay, so inside of our text area, we need to start this up.
00:55
At the moment, it's not going to look great. So let's, first of all, just add a margin top on our form. And then what we can do with Laravel Breeze is just go ahead and grab any of the styles
01:05
that we already have for the components. So let's take the input, so the text input just here, and let's just grab the styles for this. You can always create out your own component as well
01:18
if you wanted to. So let's apply all of them classes directly to here. And let's have a look. So that's looking a lot better.
01:27
There's a couple of other things that we'd want to do, like make it width of full. We'll go ahead and add in a placeholder as well. We'll just say, say something.
01:36
And we could also go ahead and set the rows for this as well. Let's set that to six. And yeah, maybe bump that down a little bit. Okay, great.
01:45
So the goal here is to be able to type something and hit enter to send this across. Of course, with the text area by default, that doesn't quite work
01:54
because it's a multi-line component by default. So we're going to use Alpine to hook into this so we can control how this works. Let's hook up the value of this text area
02:07
to our component first of all, by using wire model. And we'll set that to body. So if we go over to room show, this is where we can store the body of our message.
02:19
So let's just call that body. And then we'll create out a method in here to submit this through. So let's just call that submit and test this out.
02:29
We'll die dump on the body property. Okay, so over in room show, let's think about what we want to do. When we hit enter within this text area,
02:38
we want to send the message, but there were a couple of conditions around this. For example, if we've got shift pressed, we don't want to because we want to go down
02:46
to the next line. Let's start out with the basics and then we'll add some of the modifiers. So let's use Alpine to create out a event in here,
02:55
but key down, enter, and we'll also prevent the default behavior as well. Let's actually change this to key up. So after this happens.
03:05
Now in here, we want to submit the form using that method. So we're just gonna use wire submit, and that should go ahead and submit for us. Let's try this out first of all.
03:18
So I'm gonna hit enter in here. And as you can see, this has worked, but we've got just a new line character. That's not really what we want.
03:25
Ideally we'd say something in here, hit enter. And then of course that would give us the value that we need. Okay, so a couple of problems here.
03:33
First of all, we're getting a new line in here and also we can't shift and enter down. I've just hit shift on my keyboard and that's still submitted.
03:43
Okay, so what do we want to do? Well, we want to figure out when shift is being pressed. So let's introduce our data into this new Alpine component.
03:54
And let's set shift by default to false. Now, when we hit the shift key, we want to set this to true. And then when the shift key has finished being pressed,
04:04
we want to set this to false. That's pretty straightforward. So let's say X on key down shift. So when we hit the shift key,
04:12
we want to set shift to true. And then we can just do the exact opposite, set shift to false, when the shift key is not being pressed anymore.
04:23
And then the condition around this is going to be if we are not pressing the shift key, then we want to submit it. So we can just do a really quick inline
04:33
if statement in here and only submit this if we're not pressing the shift key down. And that should be enough. So let's go ahead and enter.
04:42
Hello, hit shift, enter, that works. New line, and then I'm just going to hit enter without pressing the shift key. And you can see that has worked.
04:53
We've still got this new line issue, but we can figure that out as well. Okay, so the next thing that we need to focus on is if there are no contents in this text area,
05:03
we don't want to submit anything. So I could hit enter on here and you can see that that still submits through. So we can just add a really simple condition into here.
05:12
We'll grab the event from this and the target, which will be the text area. And we can check if it has a value. So we only want to submit if there's a value in here.
05:23
What we also want to do in conjunction with this is add in a key down event on enter. And if we are not pressing the shift key and there is no value,
05:37
so event, target, and value once again, then we just want to prevent the default behavior. So again, we can use event to prevent the default behavior and that will stop it from submitting through.
05:51
Let's go ahead and have a look at the results. I'm going to hit enter in here and nothing happens, but I can go down to a new line and I can type something
06:00
and go down to a new line as well and hit enter. Okay, so I think for now that is pretty much it. We can now type a message in, hit enter and have that go through.

Episode summary

In this episode, we focus on refining the text area that you'll use to send messages in our chat interface. You'll see how we structure the chat message form and make it look nice using some of the existing styles from Laravel Breeze.

The key part is making the textarea behave just like any good chat app: you can hit Enter to send the message, but if you hold Shift+Enter, you get a new line instead. To pull this off, we use Alpine.js to capture keyboard events, detect shift key presses, and handle sending the message only when appropriate.

You'll also see how to link the textarea's value to your Livewire component using wire:model, and make sure that empty messages don't get submitted by accident. We walk through setting placeholder text, adjusting the number of rows, and making sure accessibility features (like a screen-reader-only label) are in place.

By the end, you'll have a chat input that feels slick and intuitive: Enter sends, Shift+Enter makes a new line, and empty messages are ignored.

Episode discussion

No comments, yet. Be the first!