Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

[TIMOB-14003] Android: showDatePickerDialog and showTimePickerDialog can't be cancelled

GitHub Issuen/a
TypeBug
PriorityMedium
StatusClosed
ResolutionFixed
Resolution Date2015-03-12T18:15:08.000+0000
Affected Version/sn/a
Fix Version/sRelease 4.0.0
ComponentsAndroid
Labelsandroid, picker
ReporterCarter Lathrop
AssigneeAshraf Abu
Created2013-05-27T12:52:01.000+0000
Updated2015-03-12T18:15:08.000+0000

Description

The callback of showDatePickerDialog and showTimePickerDialog always return with the cancel property set to false. It doesn't matter if you press the back button or press outside the modal dialog, cancel gets never true. Furthermore, if you click on the Set/Ok/Done/Ready button, the callback is called twice. Note that in the picker dialog, we have only a single button "Set", so no Cancel button. This is fine as you should be able to cancel dialog with the back button. Clicking the back button fires wrongly a success (cancel=false) event.
		var picker = Ti.UI.createPicker( {
		    type : Ti.UI.PICKER_TYPE_TIME
		});
		 
		picker.showDatePickerDialog({
		    callback: function(e) {
		        if (e.cancel) {
		            Ti.API.info('user canceled dialog');
		        } else {
		            Ti.API.info('user selected date: ' + e.value);
		        }
		    }
		});
Problem does not occur on older Android devices, like Android 2.3. See https://github.com/markruys/titanium-test-picker for a working project to reproduce.

Attachments

FileDateSize
Dialog.jpg2013-05-28T08:13:44.000+000046950
Logcat.jpg2013-05-28T08:14:15.000+000047572

Comments

  1. Carter Lathrop 2013-05-27

    Mark, When submitting a bug report it is required that you provide a full test, one that is easily copied and pasted into an app.js to clearly show the issue at hand. (Please refer to: https://wiki.appcelerator.org/display/guides/How+to+Submit+a+Bug+Report for more information) That said, I have created a small test case to try and duplicate this issue, please see below:
       var win = Ti.UI.createWindow({
           backgroundColor:'gray'
       });
        
       var picker = Ti.UI.createPicker( {
           type : Ti.UI.PICKER_TYPE_TIME
       });
         
       picker.showDatePickerDialog({
           callback: function(e) {
               if (e.cancel) {
                   alert('user canceled dialog');
               } else {
                   alert('user selected date: ' + e.value);
               }
           }
       });
       
       win.add(picker);
       win.open();
       
    This code is working as expected; cancel event is firing on 'Cancel' button press as well as back button press. I am using Ti SDK 3.2.0 on a Galaxy S3 running 4.1.2. Can you please let me know if this code is not working for you? And provide any more information needed to replicate your issue? Thanks, Carter
  2. Mark Ruys 2013-05-28

    Hi Carter, Too bad you can't reproduce. To prove the bug, I created a repository on Github with a complete Titanium project ready for you to checkout: https://github.com/markruys/titanium-test-picker See also the screenshots logcat.png and device-2013-05-28-094042.png. The logcat is generated by: 1. Start the app; 2. open picker & clicking outside the dialog; 3. open picker & clicking on the back button; 4. open picker & clicking on the Done button. Expected output: 05-28 09:39:58.026: I/TiAPI(1779): user canceled dialog 05-28 09:40:12.206: I/TiAPI(1779): user canceled dialog 05-28 09:40:56.717: I/TiAPI(1779): user selected date: Tue May 28 2013 09:40:56 GMT+0200 (CEST) But got output: 05-28 09:39:58.026: I/TiAPI(1779): user selected date: Tue May 28 2013 09:39:57 GMT+0200 (CEST) 05-28 09:40:12.206: I/TiAPI(1779): user selected date: Tue May 28 2013 09:40:12 GMT+0200 (CEST) 05-28 09:40:56.717: I/TiAPI(1779): user selected date: Tue May 28 2013 09:40:56 GMT+0200 (CEST) 05-28 09:40:56.757: I/TiAPI(1779): user selected date: Tue May 28 2013 09:40:56 GMT+0200 (CEST) Tested on: - Titanium SDK 3.1.0, Android SDK 4.1.1 emulator - Titanium SDK 3.1.0, Android 4.2.2 Galaxy Nexus - Titanium SDK 2.1.4, Android 4.2.2 Galaxy Nexus - Titanium SDK 2.0.1, Android 4.2.2 Galaxy Nexus This you should enable you to reproduce it. You used Ti SDK 3.2.0, but that's not GA, so please use the latested GA release.
  3. Carter Lathrop 2013-05-28

    Hm, that's weird. I tested your git project on emulator 4.1.2 and was able to reproduce. It is interesting the default date picker in the emulator did not have a cancel button associated with it though, though it does on my device (Galaxy S3). So this is indeed a bug but only seen on certain android versions and not others. Moving to Ti-Mobile. Thanks for bringing this to our attention. For clarity, Bug reproduced on: Android Emulator 4.1.2 Ti SDK 3.1.0GA Titanium Studio, build: 3.1.0.201303032333 But not seen on: Galaxy S3 4.1.2 Ti SDK 3.1.0GA Titanium Studio, build: 3.1.0.201303032333
  4. David He 2013-11-03

    I have the same issue that needs to be resolved urgently. Any progress on that?
  5. Paolo Casciello 2014-11-18

    Guys this bug is open since last year! Any progress on this?? It's quite annoying to discover it when docs doesn't mention it and you based an interface on this dialog... :/ Please let us know...
  6. Ingo Muschenetz 2014-11-18

    I've placed this into triage for review in the near future.
  7. Paolo Casciello 2014-11-18

    For anyone landing here for this bug, following is a workaround working almost like the native Android dialog.
       function showTimePickerDialog(opt, callback) {
       	var picker = Ti.UI.createPicker({
       		type: Ti.UI.PICKER_TYPE_TIME,
       		format24: true,
       		value: opt.value
       	});
       	
       	var ad = Ti.UI.createAlertDialog({
       		androidView: picker,
       		title: opt.title,
       		cancel: 0,
       		buttonNames: [ '', opt.okButtonTitle ]
       	});
       	ad.addEventListener('click', function (e) {
       		console.log('e.cancel = ' + e.cancel);
       		if (!(e.index === e.source.cancel)) {
       			callback(picker.getValue());
       		}
       	});
       	ad.show();
       	
       }
       
    You can use it as follows
       	showTimePickerDialog({
       		title: 'MyTitle',
       		value: new Date(),
       		okButtonTitle: 'Send',
       	},
       	function (value) {
       		Ti.API.info(value);
       	});
       
    The first buttonNames element is the cancel button. Passing it empty ('') allows you to have an invisible cancel button and thus the e.cancel property is set to true. In this case i use the 'cross-platform way' to check the cancel button. Hope this helps. For Ingo, *the bug is present even in the whole AlertDialog* which doesn't set e.cancel = true in the event no cancel button is provided!
  8. Ashraf Abu 2014-11-25

    PR: https://github.com/appcelerator/titanium_mobile/pull/6394
  9. Ashraf Abu 2014-11-25

    Sample app.js:
       // this sets the background color of the master UIView (when there are no windows/tab groups on it)
       Titanium.UI.setBackgroundColor('#000');
       
       // create tab group
       var tabGroup = Titanium.UI.createTabGroup();
       
       
       //
       // create base UI tab and root window
       //
       var win1 = Titanium.UI.createWindow({  
           title:'Tab 1',
           backgroundColor:'#fff'
       });
       var tab1 = Titanium.UI.createTab({  
           icon:'KS_nav_views.png',
           title:'Tab 1',
           window:win1
       });
       
       var button1 = Titanium.UI.createButton({
       	color:'#999',
       	title:'Open time picker',
       	font:{fontSize:20,fontFamily:'Helvetica Neue'},
       	textAlign:'center',
       	width:'auto'
       });
       
       win1.add(button1);
       
       button1.addEventListener('click', function() {
       	var picker = Ti.UI.createPicker( {
       	    type : Ti.UI.PICKER_TYPE_TIME
       	});
       	 
       	picker.showTimePickerDialog({
       	    callback: function(e) {
       	        if (e.cancel) {
       	            Ti.API.info('user canceled dialog');
       	        } else {
       	            Ti.API.info('user selected date: ' + e.value);
       	        }
       	    }
       	});
       });
       
       
       
       
       //
       // create controls tab and root window
       //
       var win2 = Titanium.UI.createWindow({  
           title:'Tab 2',
           backgroundColor:'#fff'
       });
       var tab2 = Titanium.UI.createTab({  
           icon:'KS_nav_ui.png',
           title:'Tab 2',
           window:win2
       });
       
       var label2 = Titanium.UI.createLabel({
       	color:'#999',
       	text:'I am Window 2',
       	font:{fontSize:20,fontFamily:'Helvetica Neue'},
       	textAlign:'center',
       	width:'auto'
       });
       
       
       
       var button2 = Titanium.UI.createButton({
       	color:'#999',
       	title:'Open date picker',
       	font:{fontSize:20,fontFamily:'Helvetica Neue'},
       	textAlign:'center',
       	width:'auto'
       });
       
       win2.add(button2);
       
       button2.addEventListener('click', function() {
       	var picker = Ti.UI.createPicker( {
       	    type : Ti.UI.PICKER_TYPE_DATE
       	});
       	 
       	picker.showDatePickerDialog({
       	    callback: function(e) {
       	        if (e.cancel) {
       	            Ti.API.info('user canceled dialog');
       	        } else {
       	            Ti.API.info('user selected date: ' + e.value);
       	        }
       	    }
       	});
       });
       
       
       //
       //  add tabs
       //
       tabGroup.addTab(tab1);  
       tabGroup.addTab(tab2);  
       
       
       // open tab group
       tabGroup.open();
       
  10. Eric Wieber 2015-03-12

    Verified fixed using: Titanium SDK 4.0.0.v20150312092612 Studio 4.0.0.201503062102 CLI 3.4.2 Xcode 6.2 Node 0.12 On: Note 2, Android 4.3 Nexus 5, Android 5 Able to cancel picker dialog without issue.

JSON Source