title: How to pass the key focus to the other item in QML?
body: <p>Here are the code in my QML files:</p>
  
  <p><strong>main.qml</strong></p>
  
  <pre><code>Rectangle {
      id: window    
      color: "white"; width: 240; height: 150
  
      Column {
          anchors.centerIn: parent; spacing: 15
  
          MyClickableWidget {
              focus: true             //set this MyWidget to receive the focus
              color: "lightblue"
          }
          MyClickableWidget {
              color: "palegreen"
          }
      }    
  }
  </code></pre>
  
  <p><strong>MyClickableWidget.qml</strong></p>
  
  <pre><code>FocusScope {
      id: scope
      //i try to set true instead of the mouse event
      //focus: true
      //FocusScope needs to bind to visual properties of the children
      property alias color: rectangle.color
      x: rectangle.x; y: rectangle.y
      width: rectangle.width; height: rectangle.height
  
      Rectangle {
          id: rectangle
          anchors.centerIn: parent
          color: "lightsteelblue"; width: 175; height: 25; radius: 10; antialiasing: true
          Text { id: label; anchors.centerIn: parent }
          focus: true
          Keys.onPressed: {
              if (event.key == Qt.Key_A)
                  label.text = 'Key A was pressed'
              else if (event.key == Qt.Key_B)
                  label.text = 'Key B was pressed'
              else if (event.key == Qt.Key_C)
                  label.text = 'Key C was pressed'
          }
      }
      MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }
  }
  </code></pre>
  
  <p>I have two question about this code:</p>
  
  <p><strong>First.</strong> The first component have been set <code>focus: true</code>. Then when press key, it will show the text. But I am not clear that why clicking either <code>MyClickableWidget</code> gives it focus and the other widget loses the focus? Does the click event give the focus to the component? If yes, which part will get the focus (<code>scope</code> or <code>rectangle</code>)?</p>
  
  <p>Also, in my opinion, the line showed as following is to set <code>scope.focus</code> to <code>true</code>. So, I comment out this line, the insert a line <code>focus = true</code> in the <code>scope</code>. However it doesn't work, can not pass the key focus to the other item. Why?</p>
  
  <pre><code>// MouseArea { anchors.fill: parent; onClicked: { scope.focus = true } }
  </code></pre>
  
  <p>The result is the same. I don't know why the code need this line.</p>
  
  <p><strong>Second.</strong> In focus scopes, if the children have the <code>focus: true</code>, all parent and root will automatically be set <code>focus: true</code>? if not in focus scopes, is the same result?</p>