# Textinput field multiline

**URL:** <https://community.appfarm.io/t/textinput-field-multiline/1348>\
**Category:** Ask the community\
**Tags:** ui\
**Created:** [August 22, 2024, 7:20am UTC](https://community.appfarm.io/t/textinput-field-multiline/1348 "2024-08-22T07:20:09Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![AnnaNilsen](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/annanilsen/32/728_2.png) [@AnnaNilsen](https://community.appfarm.io/u/AnnaNilsen)\
**Post date:** [August 22, 2024, 7:20am UTC](https://community.appfarm.io/t/textinput-field-multiline/1348/1 "2024-08-22T07:20:09Z")

</div>

Hello,  
I’m developing a chat in a Drawer in Appfarm, so the textinput filed is quite small and therefore needs to be multiline. The problem then is that when mulitline is used, I’m losing the event handler ‘On Enter’. Instead, the user has to press the ‘Send’ button each time. Is there any smart workaround this or a good soultion for this so that I could still use the ‘On Enter’ eventhandler? 😅

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [August 22, 2024, 8:15am UTC](https://community.appfarm.io/t/textinput-field-multiline/1348/2 "2024-08-22T08:15:52Z")

</div>

Hi Anna,  
I think there is a way to accomplish this with a `Run Code` on `On App Loaded` (not `On App Load`)

First, create a new `Container` with an `ElementID` of `messageBox` or something else that you want.

 ![bilde](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/d/dc510393dcf1813d1e0d9da3c6138f2a681277ab.png)

Then we’ll need to create a new action for `On App Loaded`. This action needs a `Run Code`-action node. It is setup like this:

 ![bilde](https://europe1.discourse-cdn.com/flex013/uploads/appfarm/original/2X/e/eceef9f348ce67c7e02377f628ee8ef38cb999e5.png)

And the code inside the action-node is this:

```auto
document.getElementById("messageBox").addEventListener("keydown", async function (event) {
    if (event.key === "Enter" && event.shiftKey) {
        event.preventDefault();

        const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));
        // Wait for 500ms
        await sleep(500);

        try {
            const msg = await sendMessage();
            console.log({ msg });
        } catch (error) {
            console.error("Error sending message:", error);
        }
    }
});

resolve();

```

In this `Run Code` we are calling an action: Send Message, but this could be whatever you want. For testing purposes, this action calls `alert()` with the message that was written by the user. I am also using `shift+enter` to send the message, because `enter` is used to create a newline.

Here is a video.  
[https://storage.googleapis.com/appfarm-public/64f1f5ee69651f55a5035aed/66c6f3dff24dc8b4531d6854](https://storage.googleapis.com/appfarm-public/64f1f5ee69651f55a5035aed/66c6f3dff24dc8b4531d6854)

Maybe some other members of the Community have a better idea, but this seems to work for me 🙂

// Erik

---

<div class="post-metadata">

**Author:** ![Sondre](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/sondre/32/105_2.png) [@Sondre](https://community.appfarm.io/u/Sondre)\
**Post date:** [August 22, 2024, 8:18am UTC](https://community.appfarm.io/t/textinput-field-multiline/1348/3 "2024-08-22T08:18:09Z")

</div>

Hi,  
We have the same case in some solutions, and i tested now to use the keyboard event handler on the drawer itself. And it sort of works but it does not “unselect” the multiline text field. So the message just sent is still there in the UI but disappears when the field is unselected manually.

Would be nice with a “unselect form input” or something like that to avoid the input text remaining in the UI. Or as you said Anna, adding an on enter handler on multiline with a shift+enter giving a new line and on enter sending the message(slack).

Even though it works with custom code, maybe it is worth a feature request Erik?

---

<div class="post-metadata">

**Author:** ![ErikAKSkallevold](https://dub1.discourse-cdn.com/flex013/user_avatar/community.appfarm.io/erikakskallevold/32/1378_2.png) [@ErikAKSkallevold](https://community.appfarm.io/u/ErikAKSkallevold)\
**Post date:** [August 22, 2024, 8:20am UTC](https://community.appfarm.io/t/textinput-field-multiline/1348/4 "2024-08-22T08:20:53Z")

</div>

Yes, definitly.

I’ll add a feature request for a better `Event Handler` for multi-line text inputs.  
It would make this use-case a lot simpler 🙂

// Erik