SwiftUI iOS 14 Date Picker Weird Behavior

Question

When selecting a time on iPhone 8, the date picker crashes. TimeZone is an @State variable being changed in a picker. The user is able to selected a date. But when the user selects the time, the date picker collapses, thus the time is not able to be set. I have tested this both on iPhone X and iPhone 12 pro Max, works perfectly.

However Xcode always prints out these to warnings:

• [DatePicker] UIDatePicker 0x10a42b190 is being laid out below its minimum width of 280. This may not look like expected, especially with larger than normal font sizes.
• Can't find keyplane that supports type 4 for keyboard iPhone-PortraitTruffle-NumberPad; using 25901_PortraitTruffle_iPhone-Simple-Pad_Default

The iPhone 8 simulator works as well. Users from TestFlight show feedback and videos of the time not being able to be selected on iPhone 8.

Are these warnings the result in the date picker collapsing? If so how can these warnings be suppressed? Am I using the .environment modifier correctly when setting the timezone?

Down bellow are two date pickers, both of them have the same problem.

Things that I have tried that don't work :

• Extracting the View as a SubView

• Removing the .environment modifier

• Removing the .id modifier

• Removing the animation modifier

• Removing the display components parameter

       Section(footer: Text("Event is being set in \(selectedLocation(locationIndex: site).timeOffSet)")){
  
               Toggle(isOn: $isAllDay){
                   Text("All-day")
               }
  
               VStack{
                   DatePicker(selection: $date, displayedComponents: self.isAllDay ? .date : [.hourAndMinute, .date], label: {
                   Text("Date")
               }).environment(\.timeZone,  (TimeZone(identifier: timeZone) ?? TimeZone(identifier: "America/New_York")!))
               }.animation(nil)
               .id(self.datePickerID)
  
               VStack{
                   DatePicker(selection: $date, displayedComponents: self.isAllDay ? .date : [.hourAndMinute, .date], label: {
                   Text("Date")
               })
                   .disableAutocorrection(false)
                   .id(2)
                   .environment(\.timeZone,  (TimeZone(identifier: timeZone) ?? TimeZone(identifier: "America/New_York")!))
                   .animation(nil)
  
               }
       }
  

Answer 1

Try adding .datePickerStyle(CompactDatePickerStyle()) to compact it and then have it popup when clicked