Support very long text in a text area

[dofdary]

Description

Hello,
When we paste a long text (I can reproduce with 1,685,376 long sequence of "ABC...") into a textarea element, it will reload the page.

This is preventing me to use my application, where a user can paste a text and then a function will be applied to the text.

I use Python 3.11.4 and nicegui 1.3.3 (I also tested with 1.3.7)
I reproduced the issue with chrome and firefox
There isn't any logs are exception thrown

Minimal code to reproduce the problem:

from nicegui import ui

@ui.page("/")
def index():
    ui.textarea()

if __name__ == "__main__":
    ui.run(host="0.0.0.0", port=8080, show=False, reload=False)

Paste a long text (try 1,6M ASCII characters) into the textarea

I don't think is is a quasar issue, since I can paste the same text into their textarea example here: https://quasar.dev/vue-components/input#textarea without issue

Thank you for your help

[falkoschindler]

Hi @dofdary! You're right, it's probably not a Quasar issue. A bottleneck might be the websocket connection between client and server. But it doesn't seem to be a problem on my machine, even with more than 12 MB.

Can you, please, try copying and pasting the text in the following example?

text = ui.textarea(value=str(list(range(200_000))))
ui.textarea()
ui.label().bind_text_from(text, 'value', lambda s: f'Text size: {len(s) / 1e6:.1f} MB')

[dofdary]

Hello,

When I append any text (ex. " bla") inside the first textarea, the page will reload

Once the reload is done, something will appear on the console (from dev tools in the browser):
reloading because handshake failed [localhost:8080:244:27](http://localhost:8080/)

Do you think this is a server side issue or a client side issue ?

I tried running the server on two different machines:

• Apple laptop with M1 chip
• Container based on official python:3.11 image

But on the client side, was only able to test from my apple laptop

[rodja]

There is also a discussion on Discord: https://discord.com/channels/1089836369431498784/1120941945443844208

[falkoschindler]

@dofdary Do I understand correctly, that you have a textarea like

ui.textarea(value=str(list(range(200_000))))

(and nothing else), and when editing the text in the browser the page reloads?

That might be a limitation of the underlying websocket framework. I'll convert this issue into a feature request, maybe for a custom text area for very large contents, which e.g. could zip the content before sending it to the server.