[Interest] QML: PlaceholderText on ComboBox (Controls 2)

[Carel Combrink]

Sorry, forgot the file, see attached:


On Mon, Sep 2, 2019 at 10:26 AM Carel Combrink <carel.combrink at gmail.com>
wrote:

>
>> That should work (and it appears to from the output), so I'm not sure why
>> you don't see the placeholder text, assuming that is the actual issue here.
>>
> I am not seeing the placeholder text
>
>
>
>> The way you're doing it in onCompleted is the easiest way to do it
>> currently, and it should work. Can you please post a minimal example here
>> so we can see why it's not working first?
>>
> I have attached a main.qml file that can be executed with the qml
> applicaiton: qml main.qml (I am on windows)
>
> The following screenshot shows what I get when I run the qml file with Qt
> 5.12.3 and 5.12.4 on Windows
> The checkbox controls if the combo boxes are editable to show that the
> placeholder text is still shown in the second box when toggled.
> The first ComboBox uses the method mentioned in my original email.
> The second ComboBox I have copied the style from the Fusion and set the
> placeholderText directly on the TextField
>
>
> [image: image.png]
>
>
>> As for a feature request, you can create one if you want. I wonder if
>> something like Nils' idea of exposing a textField property would be the
>> best solution to this:
>>
>>
>> https://bugreports.qt.io/browse/QTBUG-71406?focusedCommentId=438916&page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel#comment-438916
>>
>> Usually the contentItem is a TextField, but if it's not, it would just be
>> null. The problem is that this same issue likely applies to lots of other
>> controls, and it might end up in a slippery slope of adding these
>> type-specific accessor properties.
>>
>
> I would also support either exposing the item or seeing if what I am
> trying can be fixed.
> Strangely the "selectByMouse" option can be changed using the "
> comboCategory_.contentItem.selectByMouse = true" code and it works as
> expected (set in the attached code)
>
> Regards,
> Carel
>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190902/4a2499a0/attachment.html>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: image.png
Type: image/png
Size: 28504 bytes
Desc: not available
URL: <http://lists.qt-project.org/pipermail/interest/attachments/20190902/4a2499a0/attachment.png>
-------------- next part --------------
import QtQuick 2.12
import QtQuick.Window 2.12
import QtQuick.Controls 2.5
import QtQuick.Layouts 1.12


import QtQuick.Controls 2.12
import QtQuick.Controls.impl 2.12
import QtQuick.Controls.Fusion 2.12
import QtQuick.Controls.Fusion.impl 2.12

Window {
    visible: true
    width: 640
    height: 480
    title: qsTr("Hello World")
    ListModel {
                    id: model
                    ListElement { text: "" }
                    ListElement { text: "Banana" }
                    ListElement { text: "Apple" }
                    ListElement { text: "Coconut" }
                }

    ColumnLayout {

        CheckBox {
            id: checkEdit_
            text: "Toggle edit"
            checked: true
        }

        Label { text: "Normal ComboBox with placeholderText on contentItem" }

        ComboBox {
            id: comboCategory_
            editable: checkEdit_.checked
            currentIndex: -1
            model: model

            Component.onCompleted: {
                console.log("aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa")
                console.log( "ContentItem is    : " + comboCategory_.contentItem )
                console.log( "placeholderText is: " + comboCategory_.contentItem.placeholderText )
                comboCategory_.contentItem.placeholderText      = "<category>"
                comboCategory_.contentItem.selectByMouse        = true
                console.log( "placeholderText is: " + comboCategory_.contentItem.placeholderText )
                console.log("bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb")
            }
        }

        Label { text: "ComboBox using contentItem from Fusion Style with placeholderText" }

        ComboBox {
            id: control
            editable: checkEdit_.checked
            currentIndex: -1
            model: model

            contentItem: TextField {
                placeholderText: "<category>" /* <<== HERE */

                topPadding: 4
                leftPadding: 4 - control.padding
                rightPadding: 4 - control.padding
                bottomPadding: 4

                text: control.editable ? control.editText : control.displayText

                enabled: control.editable
                autoScroll: control.editable
                readOnly: control.down
                inputMethodHints: control.inputMethodHints
                validator: control.validator

                font: control.font
                color: control.editable ? control.palette.text : control.palette.buttonText
                selectionColor: control.palette.highlight
                selectedTextColor: control.palette.highlightedText
                verticalAlignment: Text.AlignVCenter

                background: PaddedRectangle {
                    clip: true
                    radius: 2
                    padding: 1
                    leftPadding: control.mirrored ? -2 : padding
                    rightPadding: !control.mirrored ? -2 : padding
                    color: control.palette.base
                    visible: control.editable && !control.flat

                    Rectangle {
                        x: parent.width - width
                        y: 1
                        width: 1
                        height: parent.height - 2
                        color: Fusion.buttonOutline(control.palette, control.activeFocus, control.enabled)
                    }

                    Rectangle {
                        x: 1
                        y: 1
                        width: parent.width - 3
                        height: 1
                        color: Fusion.topShadow
                    }
                }

                Rectangle {
                    x: 1 - control.leftPadding
                    y: 1
                    width: control.width - 2
                    height: control.height - 2
                    color: "transparent"
                    border.color: Color.transparent(Fusion.highlightedOutline(control.palette), 40 / 255)
                    visible: control.activeFocus
                    radius: 1.7
                }
            }

        }
    }

}