[TIMOB-5066] Toolbar button click events not always firing

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Fixed
Resolution Date	2011-09-30T16:40:42.000+0000
Affected Version/s	Release 1.7.0, Release 1.7.1, Release 1.7.2
Fix Version/s	Sprint 2011-37, Release 1.8.0
Components	iOS
Labels	module_toolbar, qe-testadded
Reporter	Matthew Apperson
Assignee	Blain Hamon
Created	2011-08-22T09:48:02.000+0000
Updated	2014-06-19T12:46:39.000+0000

Description

When win is defined outside of the apps namespace, the click event is fired twice TOTAL for the toolbar, so 2 on the same button or one time on two different buttons.

var win = Ti.UI.createWindow();
 
var app = {}; 

app.createToolbar = function() {
     
    var b1 = Ti.UI.createButton({
        title: "b1",
        left: 5
    });
     
    var b2 = Ti.UI.createButton({
        title: "b2",
        right: 5
    });
     
    b1.addEventListener('click', function() {
      alert("button 1 called.");
    });
    b2.addEventListener('click', function() {
      alert("button 2 called");
    });
     
    var toolbar = Titanium.UI.createToolbar({
        items:[b1, b2]
    }); 
    
    win.add(toolbar);
}

app.createToolbar();
 
win.open();

Comments

Adrian Kirk-Burnnand 2011-08-22

iOS SDK 4.3. My sample view (with some code removed). Buttons fire once or twice and then not again, doesn't matter which button you press first and second. Any of them will first at least once.

   // Self Initialising View
   myView = new (function() {
   	
   	// Private Vars
   	// var none;
   	
   	// Constructor
   	function __construct() {
   		var win = Ti.UI.currentWindow;
   		
   		// Set Passed in Privates
   		// None
   		
   		// Add RightNavButton
   		rightNavButton = Ti.UI.createButton({
   			title: 'Save'
   		});
   		
   		rightNavButton.addEventListener("click", eventRightNavButtonClick);
   		
   		win.rightNavButton = rightNavButton;
   		
   		// Create View		
   		var view = Ti.UI.createView({
   			backgroundColor: '#FFFFFF'
   		});
   		
   		// Create Labels
   		var labelPostedBy = Titanium.UI.createLabel({
   			text: 'Posted by',
   			top: 10,
   			left: 60,
   			height: 20,
   			width: 240
   		});
   		
   		var labelPostedOn = Titanium.UI.createLabel({
   			text: 'on "Today"',
   			top: 35,
   			left: 60,
   			height: 20,
   			width: 240
   		});
   		
   		// Add Labels
   		view.add(labelPostedBy);
   		view.add(labelPostedOn);
   		
   		// Create TextArea
   		textAreaComment = Titanium.UI.createTextArea({
   			value: 'Comment here',
   			height: 265,
   			top: 65,
   			width: 270
   		});
   		
   		// Add TextArea
   		view.add(textAreaComment);
   		
   		// Create Toolbar Buttons
   		var buttonApprove = Titanium.UI.createButton({
   			backgroundColor: '#FFFFFF',
   			borderColor: "#000000",
   			borderWidth: 1,
   			height:33,
   			width:40,
   			title: 'Approve'
   		});
   		
   		// Add Event
   		buttonApprove.addEventListener('click', eventButtonApproveClick);
   		
   		var buttonReply = Titanium.UI.createButton({
   			backgroundColor: '#FFFFFF',
   			borderColor: "#000000",
   			borderWidth: 1,
   			height:33,
   			width:40,
   			title: 'Reply'
   		});
   		
   		// Add Event
   		buttonReply.addEventListener('click', eventButtonReplyClick);
   		
   		var buttonDelete = Titanium.UI.createButton({
   			backgroundColor: '#FFFFFF',
   			borderColor: "#000000",
   			borderWidth: 1,
   			height:33,
   			width:40,
   			title: 'Delete'
   		});
   		
   		// Add Event
   		buttonDelete.addEventListener('click', eventButtonDeleteClick);
   		
   		var buttonSpam = Titanium.UI.createButton({
   			backgroundColor: '#FFFFFF',
   			borderColor: "#000000",
   			borderWidth: 1,
   			height:33,
   			width:40,
   			title: 'Spam'
   		});
   		
   		// Add Event
   		buttonSpam.addEventListener('click', eventButtonSpamClick);
   		
   		var flexSpace = Titanium.UI.createButton({
   			systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   		});
   		
   		// Create Toolbar
   		var toolbar = Titanium.UI.createToolbar({
   			bottom: 0,
   			height: 40,
   			borderTop:true,
   			borderBottom:true,
   			items: [buttonApprove, flexSpace, buttonReply, flexSpace, buttonDelete, flexSpace, buttonSpam],
   		});
   		
   		// Add toolbar
   		view.add(toolbar);
   		
   		// Add view to window
   		win.add(view);
   	}
   	
   	function eventButtonApproveClick(e) {
   		alert("Approve");
   	}
   		
   	function eventButtonReplyClick(e) {
   		alert('Reply');
   	}
   	
   	function eventButtonDeleteClick(e) {
   		alert("Delete");
   	}
   	
   	function eventButtonSpamClick(e) {
   		alert("Spam");
   	}
   		
   	function eventRightNavButtonClick(e) {
   		alert("Save");
   	}
   		
   	// Call constructor
   	__construct();
   })();

Vishal Kr Singh 2011-09-12

I am having the same issue, Have you guys had a time to work on this yet, can I know what exactly is causing this problem.
Javier Rayon 2011-09-13

The same here, my case is exposed in this Q&A, with a workaround from Goran Skledar http://developer.appcelerator.com/question/125494/inexplicable-bug-toolbar-button-only-listens-4-clicks

Rob Marscher 2011-09-21

This bug does not happen when all elements are created in the global scope. For example, create an app with this in app.js and you will find the click event fires every time:

   var button = Titanium.UI.createButton({
   		title: 'Click Me',
   		style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   	}),
   	flexSpace = Titanium.UI.createButton({
   		systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   	}),
   	window = Titanium.UI.createWindow({
   		backgroundColor: "#ffffff",
   		title: "Toolbar Button Test"
   	}),
   	nav = Titanium.UI.iPhone.createNavigationGroup({
   		window: window
   	}),
   	containerWindow = Ti.UI.createWindow();
   	timesClicked = 0;
   
   button.addEventListener('click', function() {
   	timesClicked++;
   	alert('Clicked right button (n = ' + timesClicked + ')');
   });
   window.setToolbar([flexSpace, button]);
   
   containerWindow.add(nav);
   containerWindow.open();

However, if you wrap the same code in a closure, then you encounter this bug.

   (function() {
   	var button = Titanium.UI.createButton({
   			title: 'Click Me',
   			style:Titanium.UI.iPhone.SystemButtonStyle.BORDERED
   		}),
   		flexSpace = Titanium.UI.createButton({
   			systemButton:Titanium.UI.iPhone.SystemButton.FLEXIBLE_SPACE
   		}),
   		window = Titanium.UI.createWindow({
   			backgroundColor: "#ffffff",
   			title: "Toolbar Button Test"
   		}),
   		nav = Titanium.UI.iPhone.createNavigationGroup({
   			window: window
   		}),
   		containerWindow = Ti.UI.createWindow();
   		timesClicked = 0;
   	
   	button.addEventListener('click', function() {
   		timesClicked++;
   		alert('Clicked right button (n = ' + timesClicked + ')');
   	});
   	window.setToolbar([flexSpace, button]);
   	
   	containerWindow.add(nav);
   	containerWindow.open();
   }());

Wilson Luu 2011-12-08

Closing bug. Verified fix using Modulization Toolbar test case on: OS: Mac OS X Lion Titanium Studio, build: 1.0.7.201112080131 SDK build: 1.8.0.1.v20111207180431 Devices: iphone 4S Sprint (5.0.1)
Paul Mietz Egli 2011-12-18

I'm still seeing this issue with similar code compiled with a recent SDK build: Titanium Studio, build: 1.0.8.201112161851 [INFO] Titanium SDK version: 1.8.0.1 (12/15/11 16:31 c44f563) iOS 5.0.1 SDK simulator and iPhone 4S.

Paul Mietz Egli 2011-12-20

Here's a simple app.js that reproduces the problem on the latest SDK. The toolbar button created in global scope works consistently; the toolbar button created in a closure stops responding to clicks after four events.

   
   
   var win = Ti.UI.createWindow({
     backgroundColor: 'white',
   });
   
   var done1 = Ti.UI.createButton({
     systemButton: Ti.UI.iPhone.SystemButton.DONE
   });
   done1.addEventListener('click', function(e) {
     textField1.blur();
   });
   
   var textField1 = Ti.UI.createTextField({
     top: 10,
     left: 30,
     right: 30,
     height: 32,
     value: 'button in global scope',
     borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,
     keyboardToolbar: [done1],
   });
   
   win.add(textField1);
   
   (function() {
     var done2 = Ti.UI.createButton({
       systemButton: Ti.UI.iPhone.SystemButton.DONE
     });
     done2.addEventListener('click', function(e) {
       textField2.blur();
     });
     
     var textField2 = Ti.UI.createTextField({
       top: 60,
       left: 30,
       right: 30,
       height: 32,
       value: 'button in closure',
       borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,
       keyboardToolbar: [done2],
     });
     
     win.add(textField2);
   })();
   
   win.open();

Paul Mietz Egli 2011-12-20

Workaround is to hang on to a reference to the toolbar button in the text field, like so:

   (function() {
     var done2 = Ti.UI.createButton({
       systemButton: Ti.UI.iPhone.SystemButton.DONE
     });
     done2.addEventListener('click', function(e) {
       textField2.blur();
     });
     
     var textField2 = Ti.UI.createTextField({
       top: 60,
       left: 30,
       right: 30,
       height: 32,
       value: 'button in closure',
       borderStyle: Ti.UI.INPUT_BORDERSTYLE_BEZEL,
       keyboardToolbar: [done2],
       buttonRef: done2, // <- WORKAROUND: keeps button working after four presses
     });
     
     win.add(textField2);
   })();

JSON Source