FloatingPanel - Improve handling of keyboard closure
#509
Conversation
2nd iteration Current status Working pretty well Update FormView.swift Update FloatingPanel.swift Update FormView.swift Update FormView.swift Update FloatingPanel.swift Update FormView.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Update FloatingPanel.swift Place new API
| /// The current height of the device keyboard. | ||
| @State private var keyboardHeight: CGFloat = 0 |
There was a problem hiding this comment.
Tracking the height allows us to apply the correct amount of padding to implement manual keyboard avoidance. This height can differ slightly depending on whether the keyboard has a toolbar attached or the predictive text bar is enabled.
| /// A Boolean value indicating whether the keyboard is open. | ||
| @State private var keyboardIsOpen = false |
There was a problem hiding this comment.
This has been replaced by keyboardState.
| if shouldSendResign { | ||
| UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) | ||
| shouldSendResign = false | ||
| } |
There was a problem hiding this comment.
Dismissing the keyboard while the user is still dragging can create an issue where the handle moves away from the user's finger. Now we just wait for the gesture to end.
| if $0.translation.height.magnitude > 100 { | ||
| UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil) | ||
| } |
There was a problem hiding this comment.
If the gesture was a significant height difference, then dismiss the keyboard.
| /// A Boolean value indicating whether the resignFirstResponder should be sent for the current | ||
| /// drag gesture. | ||
| @State private var shouldSendResign = true |
There was a problem hiding this comment.
No need to track if we've sent the resign notification any longer because it's sent when the gesture ends now and that only runs once.
| @@ -75,6 +74,7 @@ struct FloatingPanel<Content>: View where Content: View { | |||
| Divider() | |||
| } | |||
| content() | |||
| .padding(.bottom, isCompact ? keyboardHeight - geometryProxy.safeAreaInsets.bottom : .zero) | |||
There was a problem hiding this comment.
Padding the bottom of the content with an amount equal to the height of the keyboard gives us manual avoidance.
We need to take away the bottom safe area height because this height is included in the keyboard frame height on devices with rounded screen corners.
| // When the panel is anchored to the bottom of the screen (compact) ignore the | ||
| // device's bottom safe area. | ||
| .ignoresSafeArea(.container, edges: isCompact ? .bottom : []) |
There was a problem hiding this comment.
This has moved into the FloatingPanel view itself. It allows us to locate the two ignoresSafeArea modifiers right next to each other and factor in the state of the keyboard.
Closes Apollo 278
Improves handling of keyboard closure.
Will open a 2nd PR once this has merged to get these changes into
v.next.This essentially switches the FloatingPanel over from automatic to manual keyboard avoidance. This allows us to maintain a constant height while the keyboard is closing to rid us of the rubber band effect exhibited in Apollo 278.
Note: This should be tested on a physical device with rounded corners if possible. Simulators still show a little jump with the predictive text bar but I tested a bit on a physical device with rounded corners and couldn't reproduce it there.
predictive_text_bar_jump_in_simulator.mp4