How to programmatically scroll to the end of a 'textArea'?

Support
#1

I’m using a textArea to display a log of progress for a long-running task. I’d like to keep it scrolled to the bottom, so that the user can see what’s happening as it goes. setCursorPosition(getValue().length() doesn’t accomplish it, nor does setSelectionRange(getValue().length()-1, 1).

Ideas?

#2

Hi,

setCursorPosition works for me. Could you please describe in more details what is the problem in your case?

Regards,
Gleb

#3

@gorelov - the problem is, as stated, the textArea doesn’t scroll to the end. See screenshot. There are many lines past the 18% line showing at bottom; the textArea hasn’t scrolled to the bottom.

image

The code creating the lines is,

            @Override
            public void progress(List<String> changes) {
                logText.setValue(logText.getValue().concat(changes.get(0)).concat("\n"));
                logText.setCursorPosition(logText.getValue().length());
            }

It is, of course, from within a BackgroundTask.

#4

Could you please attach a small demo project, that reproduces the problem?

#5

@gorelov - sure thing - here -

textareascrollproblem.zip (85.5 KB)

Couldn’t be simpler. Start the app, go to Test Screen, hit the button, watch log text area not scroll to bottom.

#6

Any update on this?

#7

Hello,

seems to me that, after you press the button, it sets the cursor at the end, can you confirm that by scrolling manually? The problem is that setCursorPosition will not scroll, which you want to achieve.
I checked the Vaadin documentation about the component to maybe Unwrap and call some appropriate method to do that, but I don’t see any.
https://vaadin.com/api/platform/23.2.6/com/vaadin/flow/component/textfield/TextArea.html

I would try to send the Key.ENTER keystroke somehow after the cursor positioning to trigger the scroll.
https://vaadin.com/api/platform/23.2.6/com/vaadin/flow/component/class-use/Key.html

Kind regards,
Mladen

#8

Maybe this
https://vaadin.com/api/platform/23.2.6/com/vaadin/flow/component/KeyPressEvent.html

#9

Note, that in Firefox autoscrolling works.
In Chrome and Edge - no.

So problem may be somewhere in css or javascript code of the TextArea component.

#10

Moreover scrolling works in any browser if do it outside background task.
Add another button and you command works like a charm on click event.

    @Subscribe("scrollButton")
    public void onScrollButtonClick(Button.ClickEvent event) {
        logText.setCursorPosition(logText.getValue().length());
    }

So scrolling do not work in Chrome and Edge and only from background task.

#11

But I need a way to have it work. :smiley: Which I why I posted.

#12

I just add some information for issue.

#13

Hi,

Thank you for reporting the problem, I’ve created a GitHub issue. Unfortunately, no workaround.

Gleb