[Interest] QML TextArea : Wrapping placeholder text?

EXT Mitch Curtis mitch.curtis at qt.io
Mon Jan 30 04:54:19 CET 2023


> -----Original Message-----
> From: Interest <interest-bounces at qt-project.org> On Behalf Of Cathal
> Tummon (ctummon) via Interest
> Sent: Friday, 27 January 2023 7:00 PM
> To: Interest at qt-project.org
> Subject: [Interest] QML TextArea : Wrapping placeholder text?
> 
> Hi all,
> 
> 
> 
> Just wondering if there is a recommended way of getting the placeholder
> text <https://doc.qt.io/qt-5/qml-qtquick-controls2-
> textarea.html#placeholderText-prop>  of a TextArea to word wrap?
> 
> I assume it will have to be some combination of TextMetrics and manually
> calculating where to add new line characters?
> 
> (My google and forum/doc searches are not proving very fruitful)
> 
> 
> 
> Many thanks,
> 
> Cathal

You'd need to access the placeholder text item using the children property and then use a Binding to enable wrapping:

    import QtQuick
    import QtQuick.Controls

    ApplicationWindow {
        width: 300
        height: 300
        visible: true

        TextArea {
            id: textArea
            width: parent.width
            placeholderText: "Some long placeholder text. Some long placeholder text."

            property Text placeholder: children[0]

            Binding {
                target: textArea.placeholder
                property: "wrapMode"
                value: Text.Wrap
            }
        }
    }

There was initially a "placeholder" item, but it was removed in https://codereview.qt-project.org/c/qt/qtquickcontrols2/+/139445, with the commit message stating:

> Better not expose the extra Text item in the API. Ideally it should
> be implemented as a scenegraph node. We might even want to promote
> the placeholderText property (and add placeholderColor) to TextInput
> and TextEdit in Qt Quick core.

The disadvantage of the current approach is that the placeholder text item is not accessible, and so we have to forward any properties (like text and colour) that we want the user to be able to access. I can imagine the number of those properties will only continue to grow if we stick with this approach, too.

However, it's also worth noting that the Material 3 guidelines, for example, recommend against eliding or wrapping placeholder text:

https://m3.material.io/components/text-fields/guidelines#becfff8e-6128-4f98-8a3c-cf5a5ee1ce72


More information about the Interest mailing list