fix: rework focus and blur events to make them more reliable

closes #4867, #6187, #6451, #7628, #7749

packages/stack/src/vendor/views/Stack/CardContainer.tsx

@@ -42,7 +42,6 @@ type Props = TransitionPreset & {
     closing: boolean
   ) => void;
   onTransitionEnd?: (props: { route: Route<string> }, closing: boolean) => void;
-  onTransitionComplete: (props: { route: Route<string> }) => void;
   onPageChangeStart?: () => void;
   onPageChangeConfirm?: () => void;
   onPageChangeCancel?: () => void;
@@ -90,7 +89,6 @@ function CardContainer({
   layout,
   onCloseRoute,
   onOpenRoute,
-  onTransitionComplete,
   onPageChangeCancel,
   onPageChangeConfirm,
   onPageChangeStart,
@@ -160,9 +158,6 @@ function CardContainer({
     };
   }, [pointerEvents, scene.progress.next]);
 
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  React.useEffect(() => onTransitionComplete({ route: scene.route }), []);
-
   return (
     <Card
       index={index}

packages/stack/src/vendor/views/Stack/CardStack.tsx

@@ -54,7 +54,6 @@ type Props = {
   renderHeader: (props: HeaderContainerProps) => React.ReactNode;
   renderScene: (props: { route: Route<string> }) => React.ReactNode;
   headerMode: StackHeaderMode;
-  onTransitionComplete: (props: { route: Route<string> }) => void;
   onTransitionStart: (
     props: { route: Route<string> },
     closing: boolean
@@ -384,7 +383,6 @@ export default class CardStack extends React.Component<Props, State> {
       renderHeader,
       renderScene,
       headerMode,
-      onTransitionComplete,
       onTransitionStart,
       onTransitionEnd,
       onPageChangeStart,
@@ -562,7 +560,6 @@ export default class CardStack extends React.Component<Props, State> {
                   renderScene={renderScene}
                   onOpenRoute={onOpenRoute}
                   onCloseRoute={onCloseRoute}
-                  onTransitionComplete={onTransitionComplete}
                   onTransitionStart={onTransitionStart}
                   onTransitionEnd={onTransitionEnd}
                   gestureEnabled={index !== 0 && getGesturesEnabled({ route })}

packages/stack/src/vendor/views/Stack/StackView.tsx

@@ -427,7 +427,6 @@ export default class StackView extends React.Component<Props, State> {
                     closingRouteKeys={closingRouteKeys}
                     onOpenRoute={this.handleOpenRoute}
                     onCloseRoute={this.handleCloseRoute}
-                    onTransitionComplete={this.handleTransitionComplete}
                     onTransitionStart={this.handleTransitionStart}
                     onTransitionEnd={this.handleTransitionEnd}
                     renderHeader={this.renderHeader}