[nks (baumemo)]

Hi.

I have an issue when using AppTextField and AppTextEdit inside a AppFlickable.

When making a scroll gesture on the AppTextField everything is fine -> Scrolling happens without keyboard getting visible

When making a scroll gesture on the AppTextEdit its not fine -> Scrolling happens witg keyboard gets visible

This is a very annoying behavior.

Code:

import Felgo 3.0
import QtQuick 2.0

App {

    NavigationStack {

        Page {
            id: currentPage
            title: qsTr("Main Page")

            AppFlickable {
                anchors.fill: parent
                Column {
                    spacing: sp(10)
                    width: parent.width
                    Rectangle {
                        color: "#ff0000"
                        anchors.fill: f1
                    }
                    Rectangle {
                        color: "#00ff00"
                        anchors.fill: f2
                    }

                    AppTextField {
                        id: f1
                        width: parent.width
                    }
                    AppTextEdit {
                        id: f2
                        width: parent.width
                    }
                }
            }
        }

    }
}

 

[Filippo]

Hi Sergej,

 

The different behaviour you’re seeing is related to the different Qt components that are used behind the scenes.

 

I’d suggest you as a workaround to put a MouseArea inside your AppTextEdit that catches the pressed signal and manually forces focus in onClick. Something along these lines:

 

AppTextEdit {
  ...
  MouseArea {
    anchors.fill: parent
    onClicked: parent.forceActiveFocus()
  }
}

 

[nks (baumemo)]

Hi Filippo,

thanks you. This solution has many problems. Setting the cursor(1) and selecting parts of the text(2) to copy&paste(3) them didn’t work because the mousearea .

For Desktop Applications the TextEdit works very well in Qt. The AppTextEdit is not good optimized for mobile devices.

You can workarround 1 with

                MouseArea {
                    anchors.fill: parent

                    onClicked: {
                        let pos = description.positionAt(mouse.x, mouse.y);
                        console.log("position", pos)
                        description.select(pos, pos)
                        description.forceActiveFocus()
                    }
                }

But 2 and 3 is unsolved.

Is there a better solution?

 

[Filippo]

Hi Sergej,

 

have you tried disabling the MouseArea when the control has focus? It’s important that subsequent events get passed to the underlying AppTextEdit. Something along these lines:

 

AppTextEdit {
  ...
  MouseArea {
    anchors.fill: parent
    onClicked: parent.forceActiveFocus()
    enabled: !parent.activeFocus
    ...
  }
}

 

[nks (baumemo)]

Hi Filippo,

thank you again for your answer + workarround snippet! In combination with the code posted above the element is quite useable but not perfect:

AppTextEdit {
  ...
  MouseArea {
    anchors.fill: parent
    onClicked: {
        let pos = description.positionAt(mouse.x, mouse.y);
        console.log("position", pos)
        description.select(pos, pos)
        description.forceActiveFocus()
    }
    enabled: !parent.activeFocus
    ...
  }
}

The problem is that there is a single new problem:

You can’t scroll inside a Flickable when TextEdit has focus. In situations where the TextEdit fills the whole page the app isn’t usable anymore.

Do you have a good idea for that?

 

[Filippo]

Hi Sergej,

 

I’m glad the workaround worked for you.

 

What are you trying to achieve with the big TextArea inside a flickable? From a UX standpoint, I’d generally avoid nesting scrolling views,

so if you expect the user to type a few lines I’d limit the total height, or if you expect the user to type a lot I’ll put it on a separate page (like a text editor basically).

[nks (baumemo)]

I try to to allow the user to write long texts.

To create a seperate page for this long tests is a good idea.

But same problem here. If the AppTextEdit gets bigger than the page scrolling will be necessary too (AppFlickable needed).

I can’t find any example for Felgo. Programs like for example email clients can handle such situations with big input areas.