Interference between two ComboBox widgets on Android
-
I have two ComboBox QtQuick widgets in a pane. Whenever I click on any of the two, it's always the previously selected one that drops. That bug only occurs on Android. On Windows and iOS, it's the one you are clicking on that drops. Any idea about why there is interference between these two ComboBox widgets?
When I click on ComboBox A, then on ComboxBox B, it's the
content of the B that drops under the A. So it is only the position of the dropdown that is wrong. The contents is right.Here is the actual code. (see below)
There might be some interference between two instances of the same component. Probably that the ID of some of their inner widgets are the same? Name clash? Visually inspecting the code in details doesn't highlight any obvious name clash, though.
I made a minimal prototype and tested it on Windows and Android, and it doesn't reproduce the bug. That means that there must be something wrong in the codebase I inherited. Any suggestions?
// this is really the code used to display two combobox widgets. // I removed the code that is more specific and unrelated // But this snippet will not compile as is /* ... */ ComboBox { id: wifisDetectedComboBox; objectName: "wifisDetectedComboBox"; model: ListModel { id: wifiItems; objectName: "wifiItems"; } height: defaultItemHeight; width: gui.ratioWidthToDevice(40); anchors.right: parent.right; anchors.rightMargin: rightMarginSize; anchors.top: wifiNetworksDetectedLabel.top; anchors.bottom: wifiNetworksDetectedLabel.bottom; activeFocusOnPress: true; // We make this ComboBox dark and without too much decorations // We also make sure to at least use a font that is also found in other // parts of the GUI. (though it doesn't quite look consistent with this // part, specifically) // Fix for Android. style: ComboBoxStyle { textColor: "#000"; selectedTextColor: "#333"; font.family: walkwayUltraBoldFont.name; font.pixelSize: gui.pxToDevice(15); } onActiveFocusChanged: { // Close the dropdown menu of the combo box when the pane changed. if ((gui.isAppleTablet) && ! activeFocus && pressed) { __popup.show(); } } onPressedChanged: { if (wifiItems.count !== 0) { if (pressed) { d.wifiListUpdateEnabled = false; } else { d.wifiListUpdateEnabled = true; } } } onModelChanged: { if (enabled && visible && wifiItems.count === 0 && ! _isManualStep) { // start animation and disable button setAnimationEnabled(true); } else { // stop animation and enable button setAnimationEnabled(false); } } } /* ... */ ComboBox { id: networkInterfacesComboBox; objectName: "networkInterfacesComboBox"; width: gui.ratioWidthToDevice(28); //the other is 35 model: ListModel { id: interfacesItems; objectName: "interfacesItems"; property int interfaceCount: 0; } // model opacity: dboxOpacityFull; activeFocusOnPress: true; anchors.leftMargin: marginSize; anchors.left: title.left; // We make this ComboBox dark and without too much decorations // We also make sure to at least use a font that is also found in other // parts of the GUI. (though it doesn't quite look consistent with this // part, specifically) // Fix for Android. style: ComboBoxStyle { textColor: "#000"; selectedTextColor: "#333"; font.family: walkwayUltraBoldFont.name; font.pixelSize: gui.pxToDevice(15); } onCurrentIndexChanged: { console.debug("onCurrentIndexChanged " + currentIndex); setNetworkInterfaceIndex(currentIndex); } // onCurrentIndexChanged } // ComboBox
-
Here is a minimal example that reproduces the bug. It only occurs on Android, when using QtQuick.Controls 1.0. Notice how the location of the dropdown menu is almost random when you click on a ComboBox.
import QtQuick 2.7 import QtQuick.Controls 1.0 ApplicationWindow { visible: true width: 640 height: 480 title: qsTr("Hello World") Label { x: 50; y: 100; text: qsTr("Interference bug minimal example.") } ComboBox { id: fruit_chooser; x: 50; y: 200; model: ListModel { id: fruits; ListElement { text:"banana" } ListElement { text:"apple" } ListElement { text:"strawberry" } } } ComboBox { id: car_chooser; x: 50; y: 400; model: ListModel { id: cars; ListElement { text:"Toyota" } ListElement { text:"Nissan" } ListElement { text:"Ford" } } } }