iOS keyboard input for mode="time" breaks the UI

enagorny commented 9 months ago

Environment

System: OS: macOS 14.1.1 CPU: (10) arm64 Apple M1 Pro Memory: 225.75 MB / 16.00 GB Shell: version: "5.9" path: /bin/zsh Binaries: Node: version: 18.17.1 path: ~/.asdf/installs/nodejs/18.17.1/bin/node Yarn: Not Found npm: version: 9.6.7 path: ~/.asdf/plugins/nodejs/shims/npm Watchman: version: 2023.08.14.00 path: /opt/homebrew/bin/watchman Managers: CocoaPods: version: 1.12.1 path: /Users/enagorny/.asdf/shims/pod SDKs: iOS SDK: Platforms:

DriverKit 23.2
iOS 17.2
macOS 14.2
tvOS 17.2
watchOS 10.2 Android SDK: Not Found IDEs: Android Studio: 2022.3 AI-223.8836.35.2231.11090377 Xcode: version: 15.1/15C65 path: /usr/bin/xcodebuild Languages: Java: version: 11.0.20.1 path: /opt/homebrew/opt/openjdk@11/bin/javac Ruby: version: 3.1.3 path: /Users/enagorny/.asdf/shims/ruby npmPackages: "@react-native-community/cli": Not Found react: installed: 18.2.0 wanted: 18.2.0 react-native: installed: 0.72.4 wanted: 0.72.4 react-native-macos: Not Found npmGlobalPackages: "react-native": Not Found Android: hermesEnabled: Not found newArchEnabled: Not found iOS: hermesEnabled: true newArchEnabled: false

Platforms

iOS

Versions

iOS: 17
react-native-modal-datetime-picker: 17.1.0
react-native-community/datetimepicker: 7.2.0
react-native: 0.72.4
react: 18.2.0

Description

Standard iOS picker in "time" mode allows keyboard input. To trigger it user needs to tap on the center (currently selected time). The keyboard covers the picker.

SCR-20231219-unry

I've already provided a patch for the date-time-picker https://github.com/react-native-datetimepicker/datetimepicker/issues/852 but not sure if disabling keyboard input is the right way.

Reproducible Demo

      <DateTimePickerModal
        isVisible={Boolean(datePickerField)}
        mode="time"
        onConfirm={handleConfirm}
        onCancel={() => setDatePickerField(undefined)}
        is24Hour={false}
      />

ravir-simform commented 7 months ago

@enagorny Did you get any solution for this?

enagorny commented 7 months ago

it can be fixed by applying patch in react-native-datetimepicker https://github.com/react-native-datetimepicker/datetimepicker/issues/852

ravir-simform commented 7 months ago

Great, let me take a look at it, thanks for the prompt response.

mmazzarolo / react-native-modal-datetime-picker