MouseArea onClicked does not called

[ikuris]

Hello, I am trying to add some add/ delete functionality for TableView but I have faced issue with the rectangles that I placed the above of the headers of the table view. When I click the sID TextField it does not get the focus so I have placed mouse area and see if the onClicked function does get called or not, and it did not get called. Is there anything that I misplaced?
Here is my qml code

Item {
    anchors.fill: parent

    Rectangle {
        width: parent.width
        implicitHeight: 40 // Height of the rectangle above the TableView
        color: "lightblue"
        id: rc1
        Row {
            anchors.left: parent.left
            spacing: 3

            Button {
                text: "+"
                width: 30
                height: 30
                onClicked: {
                    // Logic for adding rows
                }
            }

            Rectangle {
                id: s
                width: 60
                height: 30
                TextField {
                    id: sID
                    anchors.fill: parent
                    anchors.centerIn: parent
                    placeholderText: "Input"
                    verticalAlignment: Text.AlignVCenter
                    horizontalAlignment: Text.AlignHCenter
                    text: qsTr("1")
                }
                MouseArea
                {
                    anchors.fill: parent
                    onClicked: {
                        console.log("clicked!!!")
                    }
                }
            }

            // Rest of your code...

        }
    }


//*
    HorizontalHeaderView
    {
        syncView: tableView
        id: horizontalHeader
        anchors.left: tableView.left
        anchors.top: rc1.bottom
    }

    TableView
    {
        id: tableView
        anchors.top: horizontalHeader.bottom
        topMargin: horizontalHeader.implicitHeight + rc1.implicitHeight
        anchors.fill: parent
        clip: true
// rest of the code

[Danima]

@ikuris said
use anchors.topMargin instead of topMargin.

[ikuris]

@Danima
yeah it did work! Can you explain why? I really didn't get it. Aren't they basically the same thing?

[mzimmers]

@ikuris said in MouseArea onClicked does not called:

Aren't they basically the same thing?
No, not at all. topMargin is a property of the Flickable type (along with other margins). These are used to define margins around the Flickable content.

Anchors are for positioning.

[Danima]

@ikuris
topMargin hold the margin around the content(for flickable qml type).
anchors.topMargin is for positioning of Item.