Tour Preview

Find the Best Demos and Examples

Check out this quick tour to find the best demos and examples for you, and to see how the Felgo SDK can help you to develop your next app or game!

Forums

OverviewFelgo 2 Support (Qt 5) › Different selection behavior of AppTextField and AppTextEdit inside AppFlickable

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #23979

    Sergej

    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
                        }
                    }
                }
            }
    
        }
    }
    

     

    #23986

    Filippo
    Felgo Team

    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()
      }
    }

     

    #23987

    Sergej

    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?

     

    #23999

    Filippo
    Felgo Team

    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
        ...
      }
    }

     

    #24003

    Sergej

    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?

     

    #24007

    Filippo
    Felgo Team

    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).

    #24010

    Sergej

    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.

Viewing 7 posts - 1 through 7 (of 7 total)

RSS feed for this thread

You must be logged in to reply to this topic.