# Trigger callback on a TextArea component on enter key press (or allow multi-line values in Input component)

**URL:** <https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959>\
**Category:** Dash Python\
**Created:** [July 17, 2023, 4:21pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959 "2023-07-17T16:21:19Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![newlog](https://avatars.discourse-cdn.com/v4/letter/n/8e7dd6/32.png) [@newlog](https://community.plotly.com/u/newlog)\
**Post date:** [July 17, 2023, 4:21pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/1 "2023-07-17T16:21:19Z")

</div>

Hi there,

I have not found a way of being able to “shift+enter” to create new lines in an Input component.

Therefore, I’m going towards using TextArea. However, I’d like to avoid forcing users to get to the Submit button using the mouse, and allow them to press enter (as can be done with the Input component).

Do you know of any workaround either using Input or Textarea that fulfills those requirements?

Thank you so much!

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 17, 2023, 4:49pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/2 "2023-07-17T16:49:14Z")

</div>

Hello @newlog,

I believe that these would need to have the `onSubmit` function there.

Input has this available via `debounce`:

 ![image](https://us1.discourse-cdn.com/flex024/uploads/plot/original/3X/4/7/4715181d5fcac6950ef991543e28dc8859cb1d95.png)

TextArea does not have this available.

---

<div class="post-metadata">

**Author:** ![newlog](https://avatars.discourse-cdn.com/v4/letter/n/8e7dd6/32.png) [@newlog](https://community.plotly.com/u/newlog)\
**Post date:** [July 17, 2023, 4:52pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/3 "2023-07-17T16:52:04Z")

</div>

Indeed. I’m using the debounce with the Input component in order to send it by pressing enter. However, with the Input component it seems I can’t get multi-line values.

And it seems that with the TextArea the opposite happens.

Am I missing anything? Isn’t there a way to achieve this? I guess as a last resort I might be able to create a JS callback, but I’m kind of out of my depth and I’d like to avoid this hacky approach.

---

<div class="post-metadata">

**Author:** ![jinnyzor](https://sea2.discourse-cdn.com/flex024/user_avatar/community.plotly.com/jinnyzor/32/21194_2.png) [@jinnyzor](https://community.plotly.com/u/jinnyzor)\
**Post date:** [July 17, 2023, 4:59pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/4 "2023-07-17T16:59:03Z")

</div>

The issue with a `TextArea` is that the enter key is used inside of it, while the `Input` doesnt not support line breaks.

If using a `TextArea`, you could use tab and then hit enter on the submit button. With text areas, I would think that this is a standard process, especially since it could be a lot of text and the user may want to review before submitting.

You could check out event listeners on `dash-extensions`, but you’d still have to do some custom JS.

Here is something you could try with the id of the component:

```auto
app.clientside_callback(
""" function (id) {
    document.getElementById(id).addEventListener('keydown', (event) => {
        if (event.Enter && !(event.ctrlKey || event.shiftKey)) {
            document.getElementById('submit_button').click() // triggers submit button
        }
    })
    return window.dash_clientside.no_update
}""",
Output('textarea','id'), Input('textarea', 'id')
)

```

---

<div class="post-metadata">

**Author:** ![newlog](https://avatars.discourse-cdn.com/v4/letter/n/8e7dd6/32.png) [@newlog](https://community.plotly.com/u/newlog)\
**Post date:** [July 17, 2023, 5:04pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/5 "2023-07-17T17:04:46Z")

</div>

Thanks for the guidance. At least I can see there is no straightforward way of achieving this.

I’ll try to use the approach you mention (I had used this in my code before) but try to get the “shift+enter” even and add a new line in the contents of the Input.

Thanks again!

---

<div class="post-metadata">

**Author:** ![newlog](https://avatars.discourse-cdn.com/v4/letter/n/8e7dd6/32.png) [@newlog](https://community.plotly.com/u/newlog)\
**Post date:** [July 26, 2023, 1:55pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/6 "2023-07-26T13:55:20Z")

</div>

This is a solution that most likely I won’t keep for the reasons below, but I thought it might be useful to someone.

```javascript
function(){
    var chatInputs = document.getElementsByClassName("user-input-class");
    for (var i = 0; i < chatInputs.length; i++) {
        chatInputs[i].addEventListener('keydown', (event) => {
            if (event.key === 'Enter' && event.shiftKey) {
                event.preventDefault();
                var inputElement = document.getElementById(event.target.id);
                if (inputElement && inputElement.value) {
                    inputElement.value = inputElement.value + "\\n";
                    inputElement.rows = inputElement.rows + 1; 
                }  
            }
        })    
    }
    return window.dash_clientside.no_update;
}

```

This code assumes you have a callback with the textarea n\_submit Input so you can send messages when pressing the enter key.

The problems with this approach:

1. Textarea does not shrink dynamically when newlines are deleted.
2. When shift-enter is clicked when in the middle of a line, the cursor makes a weird jump and skips one line or so.

The alternative I will explore is to use a regular textarea and hook the enter key press and submit the click as the response above. However, I won’t get the dynamic rows. I’ve googled around and it seems to get a textarea that dynamically grows/shrinks with the content seems tricky:

> <https://stackoverflow.com/questions/17283878/html-textarea-resize-automatically>

> **[The Cleanest Trick for Autogrowing Textareas | CSS-Tricks](https://css-tricks.com/the-cleanest-trick-for-autogrowing-textareas/)**
>
> Earlier this year I wrote a bit about autogrowing textareas and inputs. The idea was to make a more like a \<div\> so it expands in

---

<div class="post-metadata">

**Author:** ![AnnMarieW](https://avatars.discourse-cdn.com/v4/letter/a/ec9cab/32.png) [@AnnMarieW](https://community.plotly.com/u/AnnMarieW)\
**Post date:** [July 26, 2023, 3:24pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/7 "2023-07-26T15:24:40Z")

</div>

Hey @newlog

Give the dash-mantine-components TextArea a try. It has an auto size feature:

> **[Dash Mantine Components - Textarea](https://www.dash-mantine-components.com/components/textarea)**
>
> Use Textarea component to capture string input in a text area with an auto-size variant. Customize the input with label, description, error message etc.

---

<div class="post-metadata">

**Author:** ![newlog](https://avatars.discourse-cdn.com/v4/letter/n/8e7dd6/32.png) [@newlog](https://community.plotly.com/u/newlog)\
**Post date:** [July 26, 2023, 4:04pm UTC](https://community.plotly.com/t/trigger-callback-on-a-textarea-component-on-enter-key-press-or-allow-multi-line-values-in-input-component/76959/8 "2023-07-26T16:04:38Z")

</div>

@AnnMarieW

Thanks for the response. I will definitely take a look.

For now, I (just) implemented it using a client-side callback:

```python
def _set_callback_for_dynamically_resize_textarea(page: DashBlueprint):
    js_function = """function(){
        var chatInputs = document.getElementsByClassName("user-input-class");
        for (var i = 0; i < chatInputs.length; i++) {
            chatInputs[i].addEventListener('input', (event) => {
                var textareaElement = document.getElementById(event.target.id);
                if (textareaElement) {
                    textareaElement.style.height = "0px";
                    textareaElement.style.height = textareaElement.scrollHeight + "px";
                }
            })    
        }
        return window.dash_clientside.no_update;
    }"""
    page.clientside_callback(
        js_function,
        Input("bogusOutputForCallback", "id"),
        Output("bogusOutputForCallback", "className", allow_duplicate=True),
    )

```

There are some other things that need to happen like setting the height when clicking enter (I needed another clientside callback for this), but that’s it.

Edit: Those components look awesome by the way. I wish I knew about them before!