How to dismiss a sheet if a parent view disposed?

[asapo]

If a parent View changes while a sheet is displayed, the sheet will still be displayed.

How can I tell SwiftUI to dismiss the sheet?

My problem is:

1. How to dismiss the sheet if .twoFactorDoneButtonTapped received.
2. How to dismiss the sheet if the LoginView disposed.

Simulator.Screen.Recording.-.iPod.touch.7th.generation.-.2022-01-16.at.15.40.30.mp4

import ComposableArchitecture
import SwiftUI

// TwoFactor
struct TwoFactorState: Equatable {}

// Login
struct LoginState: Equatable {
    var twoFactor: TwoFactorState? = .init()
    
    var isTwoFactorPresented: Bool {
        twoFactor != nil
    }
}
enum LoginAction {
    case twoFactorDoneButtonTapped
    case twoFactorDismissed
}
struct LoginEnvironment {}
let loginReducer = Reducer<LoginState, LoginAction, LoginEnvironment> { state, action, environment in
    switch action {
    case .twoFactorDoneButtonTapped:
        // this does not work🤔
        // I want to dismiss the two factor sheet here.
        state.twoFactor = nil 
        return .none
    case .twoFactorDismissed:
        state.twoFactor = nil
        return .none
    }
}

// NewGame
struct NewGameState: Equatable {}
enum NewGameAction: Equatable {}

// App
enum AppState: Equatable {
    case login(LoginState)
    case newGame(NewGameState)
}
enum AppAction: Equatable {
    case login(LoginAction)
    case newGame(NewGameAction)
}
struct AppEnvironment {}
let appReducer: Reducer<AppState, AppAction, AppEnvironment> = .combine(
    loginReducer.pullback(
        state: /AppState.login,
        action: /AppAction.login,
        environment: { _ in .init() }
    ),
    .init { state, action, environment in
        switch action {
        case .login(.twoFactorDoneButtonTapped):
            state = .newGame(.init()) // root state changed, but sheet still on screen
            return .none
        case .login:
            return .none
        case .newGame:
            return .none
        }
    }
)

struct LoginView: View {
    let store: Store<LoginState, LoginAction>
    
    var body: some View {
        WithViewStore(store) { viewStore in
            Text("Login")
            // how to dismiss this sheet when login view disposed?
            .sheet(
                isPresented: viewStore.binding(
                    get: \.isTwoFactorPresented,
                    send: .twoFactorDismissed
                )
            ) {
                IfLetStore(store.scope(state: \.twoFactor)) { _ in
                    Button(action: { viewStore.send(.twoFactorDoneButtonTapped) }) {
                        Text("Two Factor Done")
                    }
                }
            }
        }
    }
}

struct ContentView: View {
    let store = Store(
        initialState: AppState.login(.init()),
        reducer: appReducer,
        environment: .init()
    )
    
    var body: some View {
        SwitchStore(self.store) {
            CaseLet(state: /AppState.login, action: AppAction.login) { store in
                NavigationView {
                    LoginView(store: store)
                }
                .navigationViewStyle(.stack)
            }
            CaseLet(state: /AppState.newGame, action: AppAction.newGame) { store in
                NavigationView {
                    Text("NewGame")
                }
                .navigationViewStyle(.stack)
            }
        }
    }
}

I think this problem is not limited to TCA, but to SwiftUI in general. Does anyone have an idea to solve this problem?

In this example, the parent View is changed as a result of pressing a button (Two Factor Done), but the same problem occurs in situations such as forcing the user to log out due to global error handling, universal link, etc.

[asapo]

I changed the code to bellow, it works. 😅 (I don't know why.)

CaseLet(state: /AppState.login, action: AppAction.login) { store in
-    NavigationView {
-        LoginView(store: store)
-    }
-    .navigationViewStyle(.stack)
+    LoginView(store: store)
}

struct LoginView: View {
    let store: Store<LoginState, LoginAction>
    
    var body: some View {
        WithViewStore(store) { viewStore in
-            Text("Login")
+            NavigationView {
+               Text("Login")
+            }
+            .navigationViewStyle(.stack)
            .sheet(
                isPresented: viewStore.binding(
                    get: \.isTwoFactorPresented,
                    send: .twoFactorDismissed
                )
            ) {
                IfLetStore(store.scope(state: \.twoFactor)) { _ in
                    Button(action: { viewStore.send(.twoFactorDoneButtonTapped) }) {
                        Text("Two Factor Done")
                    }
                }
            }
        }
    }
}

Simulator.Screen.Recording.-.iPod.touch.7th.generation.-.2022-01-16.at.17.31.14.mp4

Maybe, do we need to show sheets in NavigationView?