Skip to content

[Bug]: On IOS tablets, when using DatePicker in modal mode with title={null}, the upper half of the confirm button becomes unclickable. #950

@0bgk

Description

@0bgk

Describe the bug

On IOS tablets, when using DatePicker in modal mode with title={null}, the upper half of the confirm button becomes unclickable. Touches on the upper portion of the button trigger the time picker wheel scrolling instead of confirming the selection. Only the lower half of the button responds correctly to taps.

Expected behavior

The entire confirm button should be clickable and trigger the onConfirm callback, regardless of where on the button the user taps.

Workaround:
Setting title to any character or leaving it with the default value instead of explicitly setting title={null} fixes the issue. In my case, since I didn't want a visible title, I used a blank space string.

title={' '} // Works correctly - blank space
// or simply don't set title prop to use default value

To Reproduce

import React, { useState } from 'react'
import DatePicker from 'react-native-date-picker'

export default () => {
  const [date, setDate] = useState(new Date())
  const [open, setOpen] = useState(false)

  return (
    <DatePicker
      modal
      mode="time"
      open={open}
      date={date}
      onConfirm={(date) => {
        setOpen(false)
        setDate(date)
      }}
      onCancel={() => setOpen(false)}
      title={null} // Bug occurs when title is null
    />
  )
}

Operating System

  • Android
  • iOS

React Native Version

0.81.4

Expo Version (if applicable)

No response

react-native-date-picker version

5.0.13

React Native Architecture

  • Old Architecture (Paper)
  • New Architecture (Fabric)

Relevant log output

No crash or error logs. The issue is purely a touch area conflict where the picker wheel's scrollable area overlaps with the button's clickable area.

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions