Skip to content

Instantly share code, notes, and snippets.

@dfeinzimer
Last active June 8, 2022 14:43
Show Gist options
  • Save dfeinzimer/f25dabb90ab06caf5387739b8b00dab4 to your computer and use it in GitHub Desktop.
Save dfeinzimer/f25dabb90ab06caf5387739b8b00dab4 to your computer and use it in GitHub Desktop.
Modified NavigationView & Keyboard Glitch
import SwiftUI
struct ContentView: View {
@State var query: String = ""
var body: some View {
Color.red
.overlay {
NavigationView {
VStack {
if query.isEmpty {
List(0..<100) { number in
NavigationLink(number.description) {
Text(number.description)
}
}
.listStyle(.plain)
} else {
Text("No results")
.frame(maxHeight: .infinity)
}
NavigationLink("Other") { }
.buttonStyle(.bordered)
.padding()
}
.searchable(
text: $query,
placement: .navigationBarDrawer(displayMode: .always)
)
.keyboardType(.numberPad)
.navigationTitle("Numbers")
.navigationBarTitleDisplayMode(.inline)
.toolbar {
ToolbarItem(placement: .navigationBarTrailing) {
Button(action: {}) {
Image(systemName: "xmark.circle")
}
}
}
}
.navigationViewStyle(.stack)
.frame(width: 300, height: 300)
.background(.white)
// Modifying the NavigationView causes the issue. Comment out
// the cornerRadius(_:) modifier below to fix the behavior
.cornerRadius(8)
.frame(maxWidth: .infinity, maxHeight: .infinity, alignment: .bottomLeading)
.padding()
}
}
}
@dfeinzimer
Copy link
Author

dfeinzimer commented Jun 1, 2022

Update

This behavior is still observed with iOS 16.0 and the newly introduced NavigationStack component.

About

The above demonstrates a layout glitch that occurs when a NavigationView has certain modifiers applied and a keyboard is opened.

When line 57 (.cornerRadius(8)) is removed, the behavior is not present.

Affected/Unaffected Devices

Affected:
iPad 9th Gen iOS 15.4 Simulator (Vertical)
iPad 9th Gen iOS 15.4.1 Physical (Vertical)
iPad Pro 12.9" 5th Gen iOS 15.4 Simulator (Horizontal & Vertical)
iPhone 13 Pro Max iOS 15.4 Simulator (Vertical)
iPhone SE 2nd Gen iOS 15.4 Simulator (Vertical)
iPhone SE 2nd Gen iOS 15.5 Physical (Vertical)
iPhone SE 3rd Gen iOS 15.4 Simulator (Vertical)

Unaffected:
iPad 9th Gen iOS 15.4.1 Physical (Horizontal)
iPad Air 5th Gen iOS 15.4 Simulator (Horizontal & Vertical)
iPhone 13 Pro Max iOS 15.4 Simulator (Horizontal)
iPhone SE 2nd Gen iOS 15.4 Simulator (Horizontal)
iPhone SE 2nd Gen iOS 15.5 Physical (Horizontal)
iPhone SE 3rd Gen iOS 15.4 Simulator (Horizontal)

Visual Samples

Bad:

bad
bad_2

Good:

good
good_2

@dfeinzimer
Copy link
Author

This has been reported to Apple as FB10034457

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment