Override Tab Key press in QML

dokif

Hi,
I'm working in a project in QML which i want to use Tab inside a textArea to ad a "\t" character. But although i'm using Keys.onPressed, or Keys.onTabPressed, Tab key keeps changing focus to next item instead of doing what i want. Any hints?

dokif

Also, arrows keys cannot get overriden if i'm inside a ScrollView

J.Hilk

@dokif as I said in an other thread:

you'll have to accept the keyevent or other wise it wil be passed on

event.accepted = true;

if you accept it, than the tab key should not jump to the next item

dokif

@J.Hilk Thanks for your answer! However, this is not working for me.
This is what i have:

Keys.onTabPressed: {
    console.log("tab")
    event.accepted = true
}

I don't get "tab" in the console, and focus jumps to next item anyway.
Thanks.

dokif

I realized i cannot catch any key event if an item in my GUI uses that event. Shouldn't my defined accion execute before item? Is this a bug? Someone has the same problem? Help!!

MTOLANI

@dokif I am facing the same issue, Have you found a solution to this?

dokif

No i have not :(

SR__

You have 2 versions of TextArea in QML. Which one are you using ?
Do you mix Controls 1 and 2 ?

Controls 1 have a specific property tabChangesFocus :
http://doc.qt.io/qt-5/qml-qtquick-controls-textarea.html#tabChangesFocus-prop
I did not succeed in making it work right now, though…

But this works :

Row
{
    TextArea
    {
        id: mytext
        width: 100
        height: width
        focus: true
        Keys.onPressed: {
            if (event.key == Qt.Key_Tab) {
                event.accepted = true;
                mytext.append('\t')
            }
        }
    }
    TextArea
    {
        id: mytext2
        width: 100
        height: width
    }
}

Pay attention where you put the Keys attached property.

With Controls 2 :
The previous solution does not work, but it appears that the default behaviour is what you're looking for : mytext keeps focused on when tab is pressed, and a tab is inserted in the text.

Row
{
    spacing: 10
    Rectangle
    {
        id: rect1
        width: 100
        height: width
        border.width: 5
        TextArea
        {
            wrapMode: TextEdit.WrapAnywhere
            id: mytext
            focus: true
            anchors.fill: rect1
        }
    }

    Rectangle
    {
        id: rect2
        width: 100
        height: width
        border.width: 5
        TextArea
        {
            wrapMode: TextEdit.WrapAnywhere
            id: mytext2
            anchors.fill: rect2
        }
    }