Uploaded image for project: 'Titanium SDK/CLI'
  1. Titanium SDK/CLI
  2. TIMOB-15092

Android: Multiple PickerViews inside a TableView shuffling options / disappearing

    Details

    • Type: Bug
    • Status: Open
    • Priority: Low
    • Resolution: Unresolved
    • Affects Version/s: Release 3.1.2
    • Fix Version/s: None
    • Component/s: Android
    • Environment:

      Ti SDK 3.1.2.GA (Tested also on 3.1.1.GA)
      Tested on Multiple Android Devices (Samsung Galaxy S4, Samsung Galaxy S3, Nexus 7, LG L5, Motorola Razr, Nexus 4)
      Tested on Multiple Android Versions (4.0, 4.1, 4.2, 4.3)

      Description

      Problem Description

      When you add multiple Pickers inside a TableView (one picker per row), they get very buggy after scrolling the screen.

      What I have noticed is that some previously selected pickerView options just disappear, or the options are changed randomly.

      In the testcase I'm submitting I'm using the same options for different pickerviews, but if the options are different the problem get even worse.

      I have also found out that If I set a className to each different pickerView ROW the problem vanishes. Problem is that it seems that there is a limit of 32 classNames, past that and the app crashes (which is a big problem as I'm building dynamic forms and some forms reach 50+ questions).
      Also, by setting a different className to each row, you lose the tableView optimization.

      Testcase

       
      var w = Ti.UI.createWindow({
          backgroundColor: "#dddcdc",
          navBarHidden: true,
          fullscreen: false,
          orientationModes: [Ti.UI.PORTRAIT],
          windowSoftInputMode: Ti.UI.Android.SOFT_INPUT_ADJUST_PAN,
      });
       
       
      /*
       *  QUESTIONS
       */
       
       
      var rows = [],
          fields = [],
          multiOpts = {};
       
      for (var i = 0; i <= 50; i++) {
       
          var r = Ti.UI.createTableViewRow({
              backgroundColor: "#dedede",
              height: 153,
              width: Ti.UI.FILL,
              className: "rowQuestion"
          });
       
          var qNum = Ti.UI.createLabel({
              text: i + 1,
              top: 15,
              left: -5,
              width: "10%",
              height: 31,
              color: "#fff",
              textAlign: "center",
              backgroundColor: "#82b52a",
              borderRadius: 15,
              touchEnabled: false,
              font: {
                  fontSize: 14,
                  fontFamily: "Roboto-Regular"
              }
          });
       
          var qTitle = Ti.UI.createLabel({
              text: "This is a question title asking something for the user...",
              top: 0,
              left: "10%",
              width: "90%",
              height: 70,
              color: "#333",
              verticalAlign: Ti.UI.TEXT_VERTICAL_ALIGNMENT_TOP,
              font: {
                  fontSize: 14,
                  fontFamily: "Roboto-Regular"
              }
          });
       
          // Field
          fields[i] = Ti.UI.createPicker({
              width: "80%",
              height: 60,
              top: 85,
              font: {
                  fontSize: 14,
                  fontWeight: "bold"
              },
              color: "#888"
          });
       
          
          fields[i].add([
          	Ti.UI.createPickerRow({title: ""}),
          	Ti.UI.createPickerRow({title: "Option Test Option 1"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 2"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 3"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 4"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 5"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 6"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 7"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 8"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 9"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 10"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 11"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 12"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 13"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 14"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 15"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 16"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 17"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 18"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 19"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 20"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 21"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 22"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 23"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 24"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 25"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 26"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 27"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 28"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 29"}),
          	Ti.UI.createPickerRow({title: "Option Test Option 30"}),
          ]);
       
          r.add(qNum);
          r.add(qTitle);
          r.add(fields[i]);
       
          rows.push(r);
       
      }
       
       
       
      var t = Ti.UI.createTableView({
      	separatorColor: "#a6a6a6",
      	data: rows
      });
       
      w.add(t);
       
      w.open();
      
      

      Instructions to reproduce

      1. Create a new mobile Project (Classic Titanium)
      2. Paste the code into app.js
      3. Run it in a device
      4. In question 0, put answer 0, in question 1, answer 1 and so on.
      5. Scroll down and up.
      6. You will see your answers changed.

      Extra info

      In the logs I can see this:

      09-09 13:28:05.914: W/InputMethodManagerService(523): Window already focused, ignoring focus gain of: com.android.internal.view.IInputMethodClient$Stub$Proxy@429b75c8 attribute=null, token = android.os.BinderProxy@42a76558
      

      when scrolling the tableview.

        Attachments

          Activity

            People

            • Assignee:
              Unassigned
              Reporter:
              ygbr Ygor Lemos
            • Watchers:
              1 Start watching this issue

              Dates

              • Created:
                Updated:

                Backbone Issue Sync

                • Titanium SDK/CLI <> Titanium Mobile
                  Synced with:
                  TIMOB-17376
                  Sync status:
                  ERROR
                  Last received:
                  Last sent:

                  Git Integration