How to ensure the latest text added to a TextAreaInput scrolls into view

[pja]

Hi,

I would like to use TextAreaInput (editable=False) to display some text. This works ok but the text scrolls out of view and I want the most recently added text to be visible.

In order to do this I’m trying to call the scrollIntoView, javascript method as shown below

        text_area = TextAreaInput(value="", disabled=True, rows=25)
        # CustomJS callback to scroll the TextAreaInput into view
        callback = CustomJS(args=dict(text_area=text_area), code="""
            // Log the Bokeh model to understand its structure
            console.log(text_area);

            // Use the ID to select the element
            const text_area_el = document.getElementById(text_area.id);
            console.log("text_area_el="+text_area_el);
        
            if (text_area_el) {
                text_area_el.scrollIntoView({ behavior: 'smooth', block: 'center' });
            }
        """)
        text_area.js_on_change('value', callback)

subsequently the text is updated

text_area.value = text_area.value  + "some text"

The javascript code is called but it does not work because text_area_el is always null.

Can anyone point out how I can get a reference to the element to call scrollIntoView() on ?

Paul

[Bryan]

The model id is a unique identifier for the objects in the Bokeh Document it has not relation to DOM ids. Additionally all the Bokeh DOM elements are contained in a shadow root. I’m not actually sure how they can be accessed directly, thought pehaps @mateusz can comment. Regardless, I don’t think a TextAreaInput input will be very good for this application. Probably better would be a Div, which you can more easily style with Bokeh CSS APIs. Looking online there seem to be some CSS-only approaches that can accomplish the “scroll to end” effect (I have not tried them personally so I can only mention the possibility).

[pja]

Hi Bryan,

Many thanks for your input, I am struggling a bit with this issue. I look into using a Div. I’m after a region of the window to push logging information into.

Paul