sheetの中でキーボードにフォーカスさせたい時の注意点

やりたかったこと

ボタンを押すと下から入力フォーム的なのを出す
出すと同時にテキストフィールドにフォーカスし、キーボードを出す

遭遇した現象

FocusStateをonAppear内でtrueにしたのにフォーカスされない

原因

ミニマムなViewを作っていろいろ検証した結果、いくつかわかったので共有

フォーカスされないコード

struct ContentView: View {
    @FocusState private var isFocused: Bool
    @State private var showSheet = false
    @State private var text = ""
    
    var body: some View {
        Button {
            showSheet = true
        } label: {
            Text("Show sheet")
        }
        .sheet(isPresented: $showSheet) {
            TextField("type something", text: $text)
                .focused($isFocused)
                .onAppear {
                    isFocused = true
                }
        }
    }
}

フォーカスされるコード

• sheetの外側に何かしらViewが必要
• FocusStateにtrueを代入する処理を0.6秒以上遅延させる必要がある（たぶんsheetが出てくるアニメーションが終わってからじゃないといけない）
• Previewでは機能しない。シミュレーターで動作確認する必要がある

struct ContentView: View {
    @FocusState private var isFocused: Bool
    @State private var showSheet = false
    @State private var text = ""
    
    var body: some View {
        VStack { // sheetの外側に何かしらViewが必要
            Button {
                showSheet = true
            } label: {
                Text("Show sheet")
            }
            .sheet(isPresented: $showSheet) {
                TextField("type something", text: $text)
                    .focused($isFocused)
                    .onAppear {
                        // trueの代入を0.6秒以上遅延させる必要がある
                        DispatchQueue.main.asyncAfter(deadline: .now() + 0.6) {
                            isFocused = true
                        }
                    }
            }
        }
    }
}