[ALOY-1125] Alloy: Button - Click event doesn't trigger

Description

var win = Ti.UI.createWindow();

var table = Ti.UI.createTableView();

var row = Ti.UI.createTableViewRow({
	selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
});

var button = Ti.UI.createButton({
	title: "Press!",
	width: 50, height: 50,
	backgroundColor: "red",
	right: 25
});

var section = Ti.UI.createTableViewSection({
	rows: [row]
});

button.addEventListener("click", function(e) {
	console.log(e);
});

row.add(button);
table.setData([section]);

win.add(table);
win.open();

Attachments

Comments

1. Shuo Liang 2014-09-03 Hi, Your test case is more like a normal project code, not a Alloy project. Would you please try to write your code like this,

      <Alloy>
      	<Window class="container">
      		<TableView>
                     <TableViewSection>
      			       <TableViewRow>
      				       <Button id="button" title="Press!" width="50" height="50" backgroundColor="red" right="25" />
      			       </TableViewRow>
                     </TableViewSection>
      		</TableView>
      	</Window>
      </Alloy>
      

   Then

      $.button.addEventListener("click", function(e) {
          console.log(e);
      });
      
      $.index.open();
      

   Regards, Shuo
2. Matej 2014-09-03 Hi, yes I know. The thing is that it doesn't work even if there are nearly no changes...
3. Shuo Liang 2014-09-03 I just test it in my studio, SDK 3.3.0, iOS 7 simulator. It works well as expected. Event will be triggered no matter how many time click. Would you please test my code in you end? N.B. If you click the event real too quick, it will takes few seconds to response.
4. Matej 2014-09-03 I am just looking at your code. That's not really the same thing. The TableView doesn't contain a TableViewSection. // OK, I did test it including a TableViewSection and it is working however it is not working if you do this: index.js

      var row = Ti.UI.createTableViewRow({
          selectionStyle: Ti.UI.iPhone.TableViewCellSelectionStyle.NONE
      });
       
      var button = Ti.UI.createButton({
          title: "Press!",
          width: 50, height: 50,
          backgroundColor: "red",
          right: 25
      });
       
      var section = Ti.UI.createTableViewSection({
          rows: [row]
      });
       
      button.addEventListener("click", function(e) {
          console.log(e);
      });
       
      row.add(button);
      
      $.table.setData([section]);
      $.index.open();
      

      <Alloy>
          <Window>
              <TableView id="table"/>
          </Window>
      </Alloy>
      

   (Sometimes it works three times, then just one and sometimes the button doesn't react at all)
5. Shuo Liang 2014-09-03 Ye, If the code structure like yours. The event will stop working after few times click. Anyway, I will forward this problem to our engineer to take care. For now, you'd better write code like my example. Thank you for your report.
6. Matej 2014-09-03 If my data was static I would do this for sure... but I have to select data from the database, adjust them etc... I can't do it as you recommend.
7. Shuo Liang 2014-09-03 [~tlukasavage], The ticket is that if alloy project with button like my test case (first comment). It will work well. If the alloy project with button defined in js file like description and 4th comment, it will not work properly (Sometimes it works three times, then just one and sometimes the button doesn't react at all)).
8. Ingo Muschenetz 2014-09-03 Tim, thoughts.
9. Tim Poulsen 2014-09-03 I can confirm the issue using the Alloy version provided by [~sko] though I don't know the cause yet. However, making the following change, the button continues to respond to clicks as long as I click it:

      $.table.setData([row]); // instead of section
      

   I'm quite sure the Classic version failed (after five clicks) for me the first time I ran it as well. However, after attaching Instruments to the Simulator, I am no longer able to get that version to exhibit the failure. I've tried resetting the simulator but I can't get the Classic version to fail again.
10. Matej 2014-09-03 I am playing with it a little bit and it seems that all events are kind of disabled even custom ones ,so something like this is not working too.

        table.addEventListener("click", function(e) {
           if (e.source.apiName === "Ti.UI.Button") {
                e.source.fireEvent("something");
           }
        });
        

11. Tim Poulsen 2014-09-11 Some additional testing results: A) In Appcelerator Studio, I used debug mode with breakpoint set on console.log() statement. The button's click event listener continued to fire (~two dozen times before I stopped) B) Modified click handler to the following, normal (not debug build), and the click handler continued to fire (dozen+ times tested)

        button.addEventListener("click", function(e) {
        	button.backgroundColor = "yellow";
        	setTimeout(function() {
        		button.backgroundColor = 'red';
        	}, 500);
            console.log(e);
        });
        

    C) Changed event handler to be the following, normal build, and handler kept working:

        $.table.addEventListener("click", function(e) {
            console.log(e);
        });
        

    But putting the event handler on the button as originally shown, with a non-debug build, and the handler fires 3-5 times then stops firing. Environment: Appc Studio 3.4.0-rc, SDK 3.4.0-rc, CLI 3.4.0-rc, Alloy 1.5.0-rc, Xcode 6 GM, iOS8 simulator
12. Tim Poulsen 2014-09-17 Additional test result: Build the Alloy test case as included in the earlier comment, but don't interact with the simulator for approximately a minute. Then, click the button. No events are logged to the console. Change to $.table.setData(\[row\]); // instead of section as commented before and repeat. Events will be fired as expected. The Classic example listed in the original description fires events even if you don't interact with the simulator for the minute or so.
13. Tim Poulsen 2014-09-17 Classic version attached
14. Tim Poulsen 2014-09-17 Updated Alloy sample attached
15. Tim Poulsen 2014-09-17 Please see the attached Alloy sample. There are a couple of commented out code sections showing alternate techniques that work correctly in my testing. Of them, I suggest you change to the following as it offers the least amount of code change:

        var section = Ti.UI.createTableViewSection();
        section.add(row);
        

    It would seem the getter function is more robust than directly setting the rows property of the section, despite not being able to reproduce it easily in Classic code.
16. Tim Poulsen 2014-09-26 Though it has been difficult to reproduce with a Classic app, it appears to be ultimately an SDK issue. Any attempts to debug (using Instruments or Studio's debugger) prevents the issue from being encountered. I've provided multiple workarounds for the issue. Putting the ticket on hold pending further information.

JSON Source