onEntered and onExit Events not working as expected on parent/child elements

• • • • • • • • • • • • • • • • • QML BUG - input mechanism didn't have that as a choice **********************

The problem we have is that we have some UI elements with buttons inside them (in our final implementation they are only visible when the parent is highlighted see example 2). When the user hovers the parent element, we have a highlighting effect (but we do NOT want the parent highlighting to be removed). If the user passes his or her mouse over the buttons inside this parent element, then we would like to indicate to the user that the buttons are clickable - by highlighting them. The way to highlight them is, of course, to declare a mouseArea on the child and to listen to the onEnteredEvent (see example below).

If we do the above these are the events are fired in a completely non-sensible way...

e.g.

• Parent Element alone: onEnter, onExited: OK
• Parent Element with always visible child (example 1): onEnter fired on parent, onExited fired on parent (unclear why... and causes us problems) when hovering the child, which gets an onEnter event. When leaving the child the expected event (onExited) is fired, but then we receive the onEnter event for the parent (which we never really left.)
• Parent element with child that is visible only when the parent is highlighted (example 2): Completely screwed! The parent element is left (onExited), so unhighlighted, but somehow the onEnter event is still fired on the child, which you would expect to no longer be visible, because of the strange behaviour in the above example, however, we are back in the parent, thus causing the parent to rehighlight (onEnter) and the button to reappear, which give another onExited event... this continues. If you stop moving the mouse, it does sometimes stop misbehaving.

Please let us know if this is going to get fixed, as it is critical for our use cases and could well influence our future decisions regarding use of Qt/QML on other platforms.

Examlpe 1 script:

	Rectangle {
		id: wrapper
		property bool isHovered: false
		color: isHovered ? "red" : "blue"
		width : 200
		height: 100
		
		MouseArea {
			hoverEnabled: true
			anchors.fill: parent
			
			onEntered: {
				wrapper.isHovered = true
			}
			
			onExited: {
				wrapper.isHovered = false
			}
		}
	
		Rectangle {
			id: button
			property bool isHovered: false
			color: isHovered ? "green" : "yellow"
			width : 50
			height: 50
			anchors.centerIn: parent
			
			MouseArea {
				hoverEnabled: true
				anchors.fill: parent
				
				onEntered: {
					button.isHovered = true
				}
				
				onExited: {
					button.isHovered = false
				}
			}
		}
	}

Example 2 script:

	Rectangle {
		id: wrapper
		property bool isHovered: false
		color: isHovered ? "red" : "blue"
		width : 200
		height: 100
		
		MouseArea {
			hoverEnabled: true
			anchors.fill: parent
			
			onEntered: {
				print ("WRAPPER - onEntered")
				wrapper.isHovered = true
			}
			
			onExited: {
				print ("WRAPPER- onExited")
				wrapper.isHovered = false
			}
		}
	
		Rectangle {
			id: button
			property bool isHovered: false
			color: isHovered ? "green" : "yellow"
			width : 50
			height: 50
			anchors.centerIn: parent
			visible: wrapper.isHovered
			
			MouseArea {
				hoverEnabled: true
				anchors.fill: parent
				
				onEntered: {
					print ("BUTTON - onEntered")
					button.isHovered = true
				}
				
				onExited: {
					print ("BUTTON - onExited")
					button.isHovered = false
				}
			}
		}
	}