TextInput forces width on parent

[jmEvoqua]

Bug Description

I am creating a custom LineEdit and noticed several issues with the TextEdit. I want to move the TextEdit to the left when the text gets to large.

The TextEdit does not resize when its content changes. This causes several issues.

export component TestApp inherits Window {
    background: green;

    Rectangle {
        background: red;
        clip: true;

        width: 200px;

        TextInput {
            vertical-alignment: center;
            font-size: Font.keyboard_text.font-size;
            font-weight: Font.keyboard_text.font-weight;
            single-line: true;

            cursor-position-changed(cursor-position) => {
                self.x = min(0px, parent.width - cursor-position.x - self.text-cursor-width);
                debug("Parent width:", parent.width);
                debug("Parent preferred width:", parent.preferred-width);
                debug("Self width:", self.width);
                debug("Self preferred width:", self.preferred-width);
                debug("Cursor position:", cursor-position.x);
                debug("Cursor width:", self.text-cursor-width);
                debug("Self x:", self.x);
            }          
        }
    }
}

QT Backend
QtTextDisappearing.webm

My guess what is happening here. The TextEdit is moved out of the rectangle (as the size does not change) and the Renderer just skips the whole element, because it thinks it is not visible?

Winit-FemtoVG

FemtoVGCursorNextLine.webm

What happens here is that the cursor jumps into the second line (single-line is true). This breaks my shifting algorithm.

Winit-Skia

SkiaSingleLine.webm

So skia just ignores the single-line property.

Attempted solution

I then looked at how slint implemented the LineEdit and I saw, that you change the width too. The prefered width seems to reflect the content.

export component TestApp inherits Window {
    background: green;

    Rectangle {
        background: red;
        clip: true;

        width: 200px;

        TextInput {
            vertical-alignment: center;
            font-size: Font.keyboard_text.font-size;
            font-weight: Font.keyboard_text.font-weight;
            single-line: true;

            width: max(parent.width, self.preferred-width);

            cursor-position-changed(cursor-position) => {
                self.x = min(0px, parent.width - cursor-position.x - self.text-cursor-width);
                debug("Parent width:", parent.width);
                debug("Parent preferred width:", parent.preferred-width);
                debug("Self width:", self.width);
                debug("Self preferred width:", self.preferred-width);
                debug("Cursor position:", cursor-position.x);
                debug("Cursor width:", self.text-cursor-width);
                debug("Self x:", self.x);
            }

        }
    }
}

This seem to work, but there is one problem with this solution. I think it relates to this discussion #6797 . Somehow the TextEdit forces its width on the window, despite there is no Layout involved and its parent having an explicit width.

Width.webm

Second attempt

But I dug deeper, the slint LineEdit does not have this problem. And then I noticed it. The slint LineEdit is inside an empty component. #6821

component Wrapper {
    Rectangle {
        background: red;
        clip: true;

        width: 200px;
        height: 200px;

        TextInput {
            vertical-alignment: center;
            font-size: Font.keyboard_text.font-size;
            font-weight: Font.keyboard_text.font-weight;
            single-line: true;

            width: max(parent.width, self.preferred-width);

            cursor-position-changed(cursor-position) => {
                self.x = min(0px, parent.width - cursor-position.x - self.text-cursor-width);
                debug("Parent width:", parent.width);
                debug("Parent preferred width:", parent.preferred-width);
                debug("Self width:", self.width);
                debug("Self preferred width:", self.preferred-width);
                debug("Cursor position:", cursor-position.x);
                debug("Cursor width:", self.text-cursor-width);
                debug("Self x:", self.x);
            }
        }
    }
}

export component TestApp inherits Window {
    background: green;

    Wrapper { }
}

And indeed, this works as expected on all renderers. But will break if the wrapper component behaviour will change.

WrapperTextEdit.webm

Expected Behaviour

What do I expect to happen?

• The TextEdit should not force its width on the parent. But I think this is related to the linked discussion.
• All renderers should behave the same ('single-line')
• It feels a bit odd, that the width does not reflect its content, but I guess there will be other problems if it does.
• Maybe split input from text rendering? But then I guess you could just use FocusScope

Reproducible Code (if applicable)

No response

Environment Details

• Slint Version: 1.8.0
• Platform/OS: Linux
• Programming Language: Rust
• Backend/Renderer: qt, winit, femtovg, skia

Product Impact

No response

[tronical]

The disappearing text is #2029 btw