QML SpinBox data validation on upper range twice

Question

I am using a spinbox on Qt (5.12) and want to avoid wrong user inputs. He can enter number between 0.01 and 89.99. I customised a spinbox to add a validator with a regexp which avoid user to insert letters for example (except the point "."). After modifying the number once above the upper range (example: 90), the spinbox correct and replace by the upper range. if I insert again a number above the upper limit (example: 90), the spinbox don't call the "textFromValue" method. I comment all lines which is the customisation and have now a simple spinbox which have the same issue :

import QtQuick 2.0
import QtQuick.Window 2.12
import QtQuick.Controls 2.5

ApplicationWindow
{
    width: 300; height: 200
    visible: true

    SpinBox
    {
        property int decimals: 2
        property real realValue: value / 100

        id: spinBoxValue
        anchors.fill: parent
        editable: true
        from: 0.01 * 100    // Min 0.01°
        value: 3.10 * 100   // Initial value
        to: 89.99 * 100     // Max 89.99°
        stepSize: 100       // Step 0.01°

        textFromValue: function(value, locale)
        {
            var newValue = Number(value / 100).toLocaleString(locale, 'f', spinBoxValue.decimals)
            return newValue
        }

        valueFromText: function(text, locale)
        {
            return Number.fromLocaleString(locale, text) * 100
        }

//        contentItem: TextInput
//        {
//            id: textInputValue
//            z:                      2
//            text:                   spinBoxValue.textFromValue(spinBoxValue.value, spinBoxValue.locale)
//            font:                   spinBoxValue.font
//            color:                  "blue"
//            selectByMouse:          true
//            selectionColor:         "blue"
//            selectedTextColor:      "blue"
//            horizontalAlignment:    Qt.AlignHCenter
//            verticalAlignment:      Qt.AlignVCenter
//            readOnly:               !spinBoxValue.editable

//            validator: RegExpValidator
//            {
//                // Match for 2 digits, a possible point, and possibly 2 decimals
//                regExp: /^[0-9]{0,2}([\.][0-9]{0,2})?$/
//            }
//        }

//        up.indicator: Rectangle
//        {
//            id: upIndicator
//            x:              spinBoxValue.mirrored ? 0 : parent.width - width
//            height:         parent.height
//            implicitWidth:  40
//            implicitHeight: 40
//            color:          enabled ? "blue": "gray"
//            border
//            {
//                width: 2
//                color: "black"
//            }
//            radius: 5

//            Text
//            {
//                anchors
//                {
//                    fill: parent
//                    topMargin: -5   // To center the text which is too big for the component
//                }
//                text:                   "+"
//                font.pixelSize:         spinBoxValue.font.pixelSize * 2
//                color:                  "black"
//                fontSizeMode:           Text.Fit
//                horizontalAlignment:    Text.AlignHCenter
//                verticalAlignment:      Text.AlignVCenter
//            }
//        }

//        down.indicator: Rectangle
//        {
//            id: downIndicator
//            x:              spinBoxValue.mirrored ? parent.width - width : 0
//            height:         parent.height
//            implicitWidth:  40
//            implicitHeight: 40
//            color:          enabled ? "blue": "gray"
//            border
//            {
//                width: 2
//                color: "black"
//            }
//            radius: 5

//            Text
//            {
//                anchors
//                {
//                    fill: parent
//                    topMargin: -5   // To center the text which is too big for the component
//                }
//                text:                   "-"
//                font.pixelSize:         spinBoxValue.font.pixelSize * 2
//                color:                  "black"
//                fontSizeMode:           Text.Fit
//                horizontalAlignment:    Text.AlignHCenter
//                verticalAlignment:      Text.AlignVCenter
//            }
//        }

//        background: Rectangle
//        {
//            anchors
//            {
//                left: parent.right
//                right: parent.left
//            }
//            implicitWidth: 160
//            border
//            {
//                width: 2
//                color: enabled ? (spinBoxValue.focus? "green" : "gray") : "black"
//            }
//            radius: 5
//            color:  enabled ? "white" : "gray"
//        }

    }
}

Any clue on why I have this behavior ? Using the examples of Qt (https://doc.qt.io/qt-5/qml-qtquick-controls2-spinbox.html) don't produce the same behavior.

QML SpinBox data validation on upper range twice

0 Answers0