force active Focus

asked 2019-01-27 14:05:17 +0200

jsommer gravatar image

updated 2019-01-27 14:05:47 +0200

My app uses a SearchField or TextArea in combination with SilicaListView similar to the search example in the component gallery, that is available as a sample project whithin the Sailfish SDK.

Currently I'm struggling with forcing the active focus of the SearchField or TextArea after the user has clicked on a ListItem. For any reasons, this is only possible after a second click respectively tap on the ListItem I have added an onClicked block in the delegate:

delegate: BackgroundItem {
    id: backgroundItem
    onClicked: {
        console.log("Force focus")
        searchField.forceActiveFocus()
    }
    ...
}

I played around with some approaches like Connections, but I couldn't find a solution, yet. Some ideas?

edit retag flag offensive close delete

Comments

Can you post more of the QML code?

Dylan Van Assche ( 2019-01-27 23:03:10 +0200 )edit

You can just paste the code snipped into line 60 of SearchPage.qml in the compoenentgallery project to reproduce this issue. The project is part of the Sailfish SDK. Unfortunately the SearchPage.qml file is to large to quote it here.

Page {
    id: searchPage
    property string searchString
    property bool keepSearchFieldFocus

    onSearchStringChanged: listModel.update()
    Component.onCompleted: listModel.update()

    Loader {
        ...
    }

    Column {
        id: headerContainer
        ...

        SearchField {
            id: searchField
            ...

            Binding {
                target: searchPage
                property: "searchString"
                value: searchField.text.toLowerCase().trim()
            }
        }
    }
    ...
    Component {
        id: listViewComponent
        SilicaListView {
            ...
            model: listModel
            anchors.fill: parent
            currentIndex: -1 // otherwise currentItem will steal focus
            header:  Item {
               ...
            }

            delegate: BackgroundItem {
                id: backgroundItem

                onClicked: {
                    console.log("Force focus")
                    searchField.forceActiveFocus()
                }
            }
            ...
            Component.onCompleted: {
                if (keepSearchFieldFocus) {
                    searchField.forceActiveFocus()
                }
                keepSearchFieldFocus = false
            }
        }
    }

    ListModel {
        id: listModel

        function update() {
           ...
        }
    }
}
jsommer ( 2019-01-28 00:28:25 +0200 )edit

I have a feeling this is because closing the virtual keyboard removes the focus. You can of course override this, but from the usability point of view this might not be a good idea.

vige ( 2019-01-28 10:59:32 +0200 )edit