How to make button visible in scrollview if it's related textfield has been focused

Question

I have a ScrollView which contains VStack which contains a large amount of entries. The amount is not important it is just that you have to scroll to get to a TextField at the end of the list. Below the text field is a "submit"-Button.

If the user taps on the text field, the scrollview will adjust its scrolling position to make the textfield visible. But I need, that the button below the input becomes visible, too.

Does someone have any idea how I could achieve this behavior?

Thanks!

Abstract code

ScrollView {
    VStack {

        // ... content

        // Button aera
        VStack {
            Text("Text")
            
            Button("Action Text") {
                onSubmitRequested()
            }
        }
    }
}

I suppose [this is the answer you are looking for](https://stackoverflow.com/a/67730429/10876104). The answerer has described the issue pretty well :) — Daniel Arden, Jul 05 '22 at 15:13

score 2 · Accepted Answer · answered Jul 05 '22 at 15:28

Here is a possible solution - based on scrollTo, focused state, and animation alignment, latter is important, because focused state update happens much earlier than keyboard appears.

Tested with Xcode 13.4 / iOS 15.5

Main part:

        TextField("Placeholder", text: $text)
            .focused($focused)
        Button("Submit") { }
            .padding()    // << for better visibility
            .id("submit")
    }
}
.onChange(of: focused) {
    if $0 {
        DispatchQueue.main.asyncAfter(deadline: .now() + 0.5) {    // << !!
            withAnimation {  // << same default animation
                sr.scrollTo("submit", anchor: .bottom)
            }
        }
    }
}

Test module on GitHub

How to make button visible in scrollview if it's related textfield has been focused

1 Answers1