Learn what Felgo offers to help your business succeed. Start your free evaluation today! Felgo for Your Business

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

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

     

    #23986

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

     

    #23987

    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?

     

    #23999

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

     

    #24003

    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?

     

    #24007

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

    #24010

    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.

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

RSS feed for this thread

You must be logged in to reply to this topic.

Qt_Technology_Partner_RGB_475 Qt_Service_Partner_RGB_475_padded