ENYO-4870: Fix Panel failure to focus before previous panel unmounts (#1268)

* moved call entering job after other component unmounts

Enact-DCO-1.0-Signed-off-by: Derek Tor (derek.tor@lge.com)

* cleanup and added null check

* null entering component on unmount

* Added check to wait for both entering and leaving to complete

* using spotlight blur

* updated changelog

Reviewed-by: Stephen Choi (stephen.choi@lge.com)
Integrated-By: Ryan Duffy (ryan.duffy@lge.com)

Author: rundmt

packages/moonstone/Panels/Viewport.js

@@ -91,6 +91,15 @@ const ViewportBase = class extends React.Component {
 		return true;
 	}
 
+	mayBlurSpotlight = () => {
+		const current = Spotlight.getCurrent();
+		if (current && this.node.contains(current)) {
+			current.blur();
+		}
+
+		return true;
+	}
+
 	handle = handle.bind(this)
 
 	handleTransition = this.handle(
@@ -102,6 +111,7 @@ const ViewportBase = class extends React.Component {
 	handleWillTransition = this.handle(
 		forward('onWillTransition'),
 		this.addTransitioningClass,
+		this.mayBlurSpotlight,
 		Spotlight.pause
 	)
 
@@ -133,7 +143,6 @@ const ViewportBase = class extends React.Component {
 				className={className}
 				component="main"
 				duration={250}
-				enteringDelay={100} // TODO: Can we remove this?
 				enteringProp={enteringProp}
 				index={index}
 				noAnimation={noAnimation}

packages/ui/CHANGELOG.md

@@ -9,6 +9,8 @@ The following is a curated list of changes in the Enact ui module, newest change
 ### Changed
 
 ### Fixed
+- `ui/Viewport` to blur Spotlight `onWillTransition`
+- `ui/View` use `idleUntil` to prevent wheel blocking error
 
 - `ui/Remeasurable` to update on every trigger change
 - `ui/ViewManager` to suppress `enteringProp` for views that are rendered at mount

packages/ui/ViewManager/View.js

@@ -178,12 +178,12 @@ class View extends React.Component {
 	}
 
 	componentDidEnter () {
-		const {enteringDelay, enteringProp} = this.props;
+		const {enteringDelay} = this.props;
 
-		if (enteringProp) {
-			// FIXME: `startRafAfter` is a temporary solution using rAF. We need a better way to handle
-			// transition cycle and component life cycle to be in sync. See ENYO-4835.
-			this.enteringJob.startRafAfter(enteringDelay);
+		if (enteringDelay) {
+			this.enteringJob.startAfter(enteringDelay);
+		} else {
+			this.enteringJob.idleUntil(100);
 		}
 	}