TextInput and scroll view keep cursor visible

[moolight-seashell]

Hi everyone,

I've try to design a texte area for a chat apps.
this widget is kind of complicated because it should be able to grow , and becoming scrollable when there is to much text

My current solution is working exept for the scroll :

export component ChatTextInput {
    property <string> text: "test";
    property <length> scroll-height;
    in property <length> max-text-height : 100px;
    in property <length> text-padding: 15px;

    height: scroll-height + 2 * text-padding;

    Rectangle {
        background: blue;
        border-radius: 10px;
        height: scroll-height + 2 * text-padding;
        ScrollView {
            height: scroll-height + 2 * text-padding;
            viewport-height: text_area.preferred-height + 2 * text-padding;
            width: 100%;
            viewport-width: self.width;

            VerticalLayout { 
                padding: text-padding;
                alignment: center;

                text_area := TextInput {
                    vertical-alignment: center;
                    single-line: false;
                    text: root.text;
                    height: self.preferred-height;
                    wrap: word-wrap;
                    edited => {
                        root.text = self.text;
                    }
                }
            }
        }
    }
    states [
        active when text_area.preferred-height > max-text-height: {
            //texte area is scrollable
            scroll-height : max-text-height;
        }
        active when text_area.preferred-height <= max-text-height: {
            //texte area is not scrollable
            scroll-height : text_area.preferred-height;
        }
    ]
}

component DemoChatTextInput {
    height: 300px;
    VerticalLayout {
        Rectangle {
            background: grey;
        }
        ChatTextInput {
        }
    }
}

when there is enough text to make the widget scrollable
if the user add more text , for example at the bottom of the view, the scrollview neet to
the thing is when the user type some text ,the scroll view must follow this new content and stick to the bottom.

But this is only true if the user is at the end of the text.
If the user adds text in the middle, automatically sliding the scroll view to keep the cursor in view seems impossible to do.

To do this, we would need to know:

The physical height of a line of text.
The number of lines of text displayed (taking word wrap into account).
The displayed position of the cursor. (taking word wrap into account).

But we would also need a callback when the scroll view changes size.

Or maybe there is a other way to achieve this ?

And TextEdit is not really an option because it cannot dynamycly reize like TextEdit

[antis81]

Let me be your AI(ntelligence) and summarize it for you… 😄

import { AboutSlint, VerticalBox, ScrollView, TextEdit, StyleMetrics } from "std-widgets.slint";

export component Demo {
    preferred-height: 300px;
    preferred-width: 300px;

    layout := VerticalBox {
        Text {
            text: "Hello Chat!";
            font-size: 24px;
            horizontal-alignment: center;
        }

        AboutSlint {
            preferred-height: 150px;
        }

        // In this example serves as a "spacer" item
        chat-view := Rectangle { vertical-stretch: 1; color: blue; }

        chat-edit := TextEdit {
            // We cannot use a layout here (because TextEdit is high-level component)
            padding: StyleMetrics.layout-padding;
            // NOTE: This would "grow" the component to a certain height.
            //       Results in a binding loop and cannot be worked around.
            // preferred-height: self.viewport-height;
            min-height: self.font-size + 2 * self.padding;
            max-height: 150px;
        }
    }
}

You are correct TextEdit does not allow to customize "grow" behaviour currently. Consider asking that question and maybe the developers will find that an interesting feature and implement it for you leaving you with less of a headache…

[moolight-seashell]

Consider asking that question

ehm, what is this discussion for exactly, if not to ask the question ?

In the proposed code, we can get around the binding loop problem with a custom property and the edited callback.
but this does not help for the initial state

Even with this TextEdit is too high-level for that to work, and it doesn't solve the fact that TextEdit isn't customizable either.
So that's not what I want to do.

export component Demo {
    preferred-height: 300px;
    preferred-width: 300px;
    property <length> c_viewport_height : 50px;

    layout := VerticalLayout {
        Text {
            text: c_viewport_height/1px;
            font-size: 24px;
            horizontal-alignment: center;
        }
        chat-edit := TextEdit {
            padding: 5px;
            text: "hello world \n text";
            height: c_viewport_height;

            edited(text) => {
                c_viewport_height = self.viewport-height + 4 * self.padding;
            }
        }
    }
}

sry if you've seen my initial reply