Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. Interference between two ComboBox widgets on Android
Forum Updated to NodeBB v4.3 + New Features

Interference between two ComboBox widgets on Android

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 1 Posters 669 Views
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • X Offline
    X Offline
    XobD
    wrote on last edited by XobD
    #1

    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
    
    1 Reply Last reply
    0
    • X Offline
      X Offline
      XobD
      wrote on last edited by
      #2

      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"
                  }
              }
          }
      }
      
      1 Reply Last reply
      0

      • Login

      • Login or register to search.
      • First post
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved