[TIMOB-28111] iOS: TabGroup focus event firing unexpectedly

GitHub Issue	n/a
Type	Bug
Priority	None
Status	Closed
Resolution	Fixed
Resolution Date	2020-11-19T16:18:04.000+0000
Affected Version/s	Release 9.1.0
Fix Version/s	Release 9.3.0
Components	iOS
Labels	regression
Reporter	Ewan Harris
Assignee	Vijay Singh
Created	2020-09-04T16:16:08.000+0000
Updated	2020-11-19T16:18:04.000+0000

Description

When listening to a TabGroup's focus event it is firing unexpectedly, for example it will fire in the following scenarios: * When opening a new Window with the TabGroup * After closing an alert I'm guessing this is coming the changes in TIMOB-27711 so it's possible that this might be an expected change in behaviour. To workaround this and restore the behaviour of 9.0.3 the previousTab property of the event can be checked, if it is null then it was fired by an action matching those in 9.0.3.

var basewin = Ti.UI.createWindow({
	backgroundColor : 'white',
	layout : 'vertical'
});

var baseWinBtn = Ti.UI.createButton({
	title : 'open Nav Root win with delay',
	top : 60
});

function getNavRootWin(title) {
	var win = Ti.UI.createWindow({
		backgroundColor : 'white',
		title : title
	});
	var navWin = Titanium.UI.createNavigationWindow({
		window : win
	})
	return navWin;
}

baseWinBtn.addEventListener('click', function() {
	var indWin = Ti.UI.createWindow({
		backgroundColor : 'red'
	});
	indWin.open();
	setTimeout(function() {
		indWin.close();
		var navRootWn = getNavRootWin('Dynamic window');
		tab.open(navRootWn);
	}, 500);
});
basewin.add(baseWinBtn);
var baseWinBtn1 = Ti.UI.createButton({
	title : 'open Nav Root win without delay',
	top : 60
});
baseWinBtn1.addEventListener('click', function() {
	var indWin = Ti.UI.createWindow({
		backgroundColor : 'red'
	});
	indWin.open();
	indWin.close();
	var navRootWn = getNavRootWin('static window');
	var openWin = Ti.UI.createButton({
		title : "open dynamic win"
	});
	openWin.addEventListener('click',function(){
	indWin.open();
	setTimeout(function(){
		indWin.close();
	navRootWn.openWindow(Ti.UI.createWindow({
		backgroundColor : 'white'
	}));
	},500);
	})
	
	navRootWn.add(openWin);
	tab.open(navRootWn);
});
basewin.add(baseWinBtn1);
var baseWinBtn2 = Ti.UI.createButton({
	title : 'open Nav Root win to check alertdialog',
	top : 60
});
baseWinBtn2.addEventListener('click', function() {
	var navwin = getNavRootWin('Alert window');
	var alertBtn = Ti.UI.createButton({
		title :'click to get alert'
	});
	alertBtn.addEventListener('click',function(){
		Ti.UI.createAlertDialog({
			title : "test",
			message : "test msg",
			buttonNames : ['OK']
		}).show();
	});
	navwin.add(alertBtn);
	tab.open(navwin);
});
basewin.add(baseWinBtn2);
var tabGroup = Ti.UI.createTabGroup({
	title : '',
	titleColor : "#bbb",
	tintColor : "#bbb",
	navBarHidden : true
});
var tab = Ti.UI.createTab({
	title : 'tab1',
	window : basewin
});
tabGroup.addTab(tab);
var tab2 = Ti.UI.createTab({
	title : 'tab2',
	window : Ti.UI.createWindow({backgroundColor : 'white'})
});
tabGroup.addTab(tab2);
tabGroup.open();
tabGroup.addEventListener('focus',function(e){
    // if (!e.previousTab) {
    //     return;
    // }
	Ti.API.info('in tabgroup focus');
});

Steps to reproduce

1. Add the above code to an existing app.js and build to iOS 2. Click on “open Nav Root win with delay” and check the logs (tabgroup focus event fired) 3. Click on “open Nav Root win without delay” and check the logs (tabgroup focus event not fired) 4. Click on “open Nav Root win to check alertdialog” and click on “click to get alert” button and click “OK” button of alert dialog and check the logs (tabgroup focus event fired)

Actual

focus event fires in steps 2,3, and 4.

Expected

(9.0.3 behaviour) Focus event should only fire when selected the second tab

Comments

Ewan Harris 2020-09-04

[~vijaysingh] [~cwilliams] I'm not sure whether this is an expected behaviour change from TIMOB-27711 or not?
Joshua Quick 2020-09-05

[~eharris], I'm a little confused what the bug actually is. The iOS behavior is supposed to be this: * Window/TabGroup will fire a "blur" event after opening a child window/dialog. * Window/TabGroup will fire a "focus" event after closing a child window/dialog. I'm guessing this ticket's issue is only with NavigationWindow?

Ewan Harris 2020-09-07

[~jquick] their event listener is only configured on TabGroup, but maybe the fact that it's a TabGroup with a NavigationWindow is causing issues? On iOS in 9.0.3 the TabGroup focus event wouldn't fire in the circumstances it does now, and there's nothing listed in the release notes that really indicates we changed anything. Items 2 & 3 maybe make sense to have firing focus as ultimately a new Window is being opened in the Tab (albeit the code is a little convoluted). This might be an expected behaviour change from TIMOB-27711. Item 4 is a little more suspect to me, when the alert is dismissed the TabGroup focus event is fired. This doesn't occur on Android based on the code below (the code in the description errors out on Android).

   var basewin = Ti.UI.createWindow({
   	layout : 'vertical'
   });
   
   var baseWinBtn2 = Ti.UI.createButton({
   	title : 'open win to check alertdialog',
   	top : 60
   });
   basewin.add(baseWinBtn2);
   
   var tabGroup = Ti.UI.createTabGroup();
   var tab = Ti.UI.createTab({
   	title : 'tab1',
   	window : basewin
   });
   
   baseWinBtn2.addEventListener('click', function() {
   	var win = Ti.UI.createWindow({
   		title : 'Alert window'
   	});
   	var alertBtn = Ti.UI.createButton({
   		title :'click to get alert'
   	});
   	alertBtn.addEventListener('click',function(){
   		alert('test');
   	});
   	win.add(alertBtn);
   	tab.open(win);
   });
   
   tabGroup.addTab(tab);
   tabGroup.open();
   tabGroup.addEventListener('focus',function(e) {
   	Ti.API.info('in tabgroup focus');
   });

Joshua Quick 2020-09-08

I see. I suspect this has to do with the [Tab.open()](https://docs.appcelerator.com/platform/latest/#!/api/Titanium.UI.Tab-method-open) method. On iOS, this will open a child window within the TabGroup. Meaning the TabGroup still has the focus because it is still onscreen, hosting the child window. This probably has nothing to do with the NavigationWindow.
Vijay Singh 2020-10-23

Vijay Singh 2020-10-23

PR - https://github.com/appcelerator/titanium_mobile/pull/12207 Test Case -

   var basewin = Ti.UI.createWindow({
   	backgroundColor : 'white',
   	layout : 'vertical'
   });
    
   var baseWinBtn = Ti.UI.createButton({
   	title : 'Push next window (tab.open(win))',
   	top : 60
   });
   basewin.add(baseWinBtn); 
   
   
   var baseWinBtn2 = Ti.UI.createButton({
   	title : 'Open another window (win.open())',
   	top : 120
   });
   basewin.add(baseWinBtn2); 
   
   var baseWinBtn3 = Ti.UI.createButton({
   	title : 'Show Alert',
   	top : 180
   });
   basewin.add(baseWinBtn3); 
   
   baseWinBtn.addEventListener('click', function() {
   	var indWin = Ti.UI.createWindow({
   		backgroundColor : 'red'
   	});
   
   	tab.open(indWin);
   
   	var alertBtn = Ti.UI.createButton({
   		top: 60,
   		title :'click to get alert'
   	});
   	alertBtn.addEventListener('click',function(){
   		Ti.UI.createAlertDialog({
   			title : "test",
   			message : "test msg",
   			buttonNames : ['OK']
   		}).show();
   	});
   	indWin.add(alertBtn);
   
   	var closeBtn = Ti.UI.createButton({
   		top: 120,
   		title :'Close Window'
   	});
   	closeBtn.addEventListener('click',function(){
   		tab.close(indWin);
   	});
   	indWin.add(closeBtn);
   
   });
   
   
   baseWinBtn2.addEventListener('click', function() {
   	var indWin = Ti.UI.createWindow({
   		backgroundColor : 'red'
   	});
   
   	indWin.open(); //{modal: true, animation: true}
   
   	var closeBtn = Ti.UI.createButton({
   		title :'Close button'
   	});
   	closeBtn.addEventListener('click',function(){
   		indWin.close();
   	});
   	indWin.add(closeBtn);
   });
   
   baseWinBtn3.addEventListener('click', function() {
   	Ti.UI.createAlertDialog({
   		title : "test",
   		message : "test msg",
   		buttonNames : ['OK']
   	}).show();
   });
   
   var tabGroup = Ti.UI.createTabGroup({
   	title : '',
   	titleColor : "#bbb",
   	tintColor : "#bbb",
   	navBarHidden : true
   });
   var tab = Ti.UI.createTab({
   	title : 'tab1',
   	window : basewin
   });
   tabGroup.addTab(tab);
   var tab2 = Ti.UI.createTab({
   	title : 'tab2',
   	window : Ti.UI.createWindow({backgroundColor : 'white'})
   });
   tabGroup.addTab(tab2);
   tabGroup.open();
   tabGroup.addEventListener('focus',function(e){
   	Ti.API.info('in tabgroup focus');
   });
   
   tabGroup.addEventListener('blur',function(e){
   	Ti.API.info('in tabgroup blur');
   });

Samir Mohammed 2020-11-05

FR passed, waiting on Jenkins build
Christopher Williams 2020-11-05

merged to master for 9.3.0 target
Samir Mohammed 2020-11-19

*Closing ticket*. Fix verified in SDK version 9.3.0.v20201119063936. Test and other information can be found at: https://github.com/appcelerator/titanium_mobile/pull/12207

JSON Source