Textinput field multiline

Ask the community
1

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? :sweat_smile:

1 Like
2

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
bilde1869×657 45.2 KB

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
bilde1866×336 19.1 KB

And the code inside the action-node is this:

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

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

// Erik

1 Like
3

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?

4

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 :slightly_smiling_face:

// Erik

2 Likes