IOS: Data picker "Confirm" button isn't clickable in some special case

[LowerShotower]

-Open Calendar and push on selected data or try to select another day (important point that you should not swipe dates, only click on dates)

-Try to Click on Confirm button => it will not react
Here is the link on video example
https://drive.google.com/file/d/1U96zmdoO2H-wtswY9YCoZzGz0BBbyavU/view

[mmazzarolo]

Hey @LowerShotower , could you please provide a minimal reproducible example/repo?
Does it happens with the example (in the example dir)?

[LowerShotower]

Hello @mmazzarolo , I've tested it, and yep, I have the same problem with example/repo
https://drive.google.com/file/d/1WgeHfn7Z0cagJx_IUU3b6Z2XuGghz75R/view

[LowerShotower]

Want to clarify if it was not clear. I tap on the date, and after that, I can't click on Confirm. It doesn't react for some reason

[fstojanac]

I had opened PR that should fix this.

[mmazzarolo]

@LowerShotower thanks for reporting.

I can't test it now, but I'm wondering if it's a race condition caused by this check, that is made to disable the confirm button until it stops spinning 🤔

[fstojanac]

@mmazzarolo I had tested that, this is not the case, at least not for me.

[mmazzarolo]

Thanks @fstojanac
Does the issue happen only when you tap the date (instead of spinning ) for you?

[LowerShotower]

Yes, After I tap on the selected date, I can't click on the Confirm button, but I still can click on the Cancel button. Also, if I at first scroll dates and after that click on the selected date, the Confirm button also doesn't work. And if I select a date just by scrolling the wheel, all works fine. It happens on the real devices either

[LowerShotower]

The version of datetime-picker: "react-native-modal-datetime-picker": "^7.6.1",

[LowerShotower]

tested with react-native-modal-datetime-picker 8.1.3. still doesn't work

[mmazzarolo]

Mind trying the following and report if it's working?

// Define a custom confirm button component (so that it should always be enabled)
const CustomConfirmButton = ({ onPress }) => {
  return (
    <TouchableHighlight onPress={onPress}>
      <Text>I should work</Text>
    </TouchableHighlight>
  );
};

// And pass it to the `react-native-modal-datetime-picker` component
<DateTimePickerModal
  isVisible={isDatePickerVisible}
  mode="date"
  onConfirm={handleConfirm}
  onCancel={hideDatePicker}
  customConfirmButtonIOS={CustomConfirmButton} // here
/>

If it's working, then the problem is in the "disabling" logic.
Otherwise, it lies somewhere else (you could test @fstojanac PR for example) .

[cameronbell]

Experiencing the same issue. The CustomConfirmButton works in my case.

[mmazzarolo]

Thanks for reporting @cameronbell .
At this point I guess that this part of the code is not working correctly.
The reason why we had that check, is because the native IOS DateTimePicker sometimes does not report the correct date/time until the the rolling animation ends (see this issue).
As a workaround, we were manually disabling the "Confirm" button until the rolling completed... but this doesn't seem to be working anymore if you just "press" directly on a date (probably a timing conflict between the disable/date picking).

I guess we have to remove the disabling logic (or make it an opt-in? doesn't make much sense though).

[mmazzarolo]

I've also noticed some new activity in the react-native-community/react-native-datetimepicker repo, not sure if something changed on their end recently.

[sallar]

I'm also having this issue. I implemented custom Confirm and Cancel buttons, it works, but sometimes those lock up as well. But if I remove all the styling, then it always works.

const ConfirmButtonWrapper = styled.TouchableHighlight`
  height: 57px;
  border-top-width: ${StyleSheet.hairlineWidth}px;
  background-color: transparent;
  justify-content: center;
`;

const ConfirmButtonText = styled.Text`
  color: ${p => p.theme.colors.primary};
  text-align: center;
  font-size: 20px;
`;

const CancelButtonWrapper = styled.TouchableHighlight`
  height: 57px;
  background-color: ${p => (p.theme.dark ? '#0E0E0E' : '#fff')};
  justify-content: center;
  border-radius: 13px;
  margin-bottom: ${isIphoneX() ? 20 : 0}px;
`;

const CancelButtonText = styled(ConfirmButtonText)`
  font-weight: 600;
`;

const ConfirmButton: ConfirmButtonComponent = ({ onPress, label }) => {
  const theme = useTheme();

  return (
    <ConfirmButtonWrapper
      onPress={onPress}
      underlayColor={theme.dark ? '#444' : '#ebebeb'}>
      <ConfirmButtonText>{label}</ConfirmButtonText>
    </ConfirmButtonWrapper>
  );
};

const CancelButton: CancelButtonComponent = ({ onPress, label }) => {
  const theme = useTheme();

  return (
    <CancelButtonWrapper
      onPress={onPress}
      underlayColor={theme.dark ? '#444' : '#ebebeb'}>
      <CancelButtonText>{label}</CancelButtonText>
    </CancelButtonWrapper>
  );
};

const DatePicker: React.FunctionComponent<DateTimePickerProps> = props => {
  return (
    <DateTimePickerModal
      {...props}
      customConfirmButtonIOS={ConfirmButton}
      customCancelButtonIOS={CancelButton}
    />
  );
};

export default DatePicker;

[mmazzarolo]

Hey all, anyone willing to try #370 ?

[sallar]

@mmazzarolo I think this is a good way to solve it. It's pretty unlikely that the user taps on confirm before the spinner stops spinning

[mmazzarolo]

@sallar I hope so! The reason why we added that feature (ages ago) was specifically because users were pressing "Confirm" before it stopped spinning, lol.
That said, there's not much we can do about that, it happens even if you play with the native clock/timer app on iOS 🤷

[betterfuture009]

I am getting same error. I had upgraded to latest version. But same issue :( is there any solve way?

[mmazzarolo]

@livefuture009 could you please try the PR I posted above?

yarn add mmazzarolo/react-native-modal-datetime-picker#370/head && react-native start -- --reset-cache

Let me know if it works for you, so that I can publish it officially

[tannguyen16]

Thanks @mmazzarolo for the package!
I'm having the same issue by tapping the date and tap "Confirm" button. If I try your PR, do I need to import DatePicker from 'mmazzarolo/react-native-modal-datetime-picker#370/head' or just use the default import?

[mmazzarolo]

You should always use the default import 👍

[tannguyen16]

Hi @mmazzarolo,

I'm trying the PR but having some issues. After running yarn add, my package.json has changed to
"react-native-modal-datetime-picker": "mmazzarolo/react-native-modal-datetime-picker#370/head"
However, it still gave me an error:
Unable to resolve "react-native-modal-datetime-picker"
I've tried removing node_modules and run npm install again but still didn't work. Do I miss anything in the process?

Thanks!

[mmazzarolo]

@tannguyen16 I just released v8.3.0 with the included fix

[samslow]

@mmazzarolo v8.3.0 There is still the same problem. i can't click both confirm and cancel

[mmazzarolo]

Can you try the example app?
Also, when is the issue happening for you?
I just tried it and it seems to be working fine for me.
Make sure to reset the server.

[samslow]

Dimentions.get("window")→ dimentionsUpdate

As above, I wrote @fstojanac' code on my code and it worked properly.

[mmazzarolo]

@samslow I merged that PR as well since it seems to solve the issue for your use cases.
The example seems to be running fine for me (and for the others above) without it, so I guess it might be something related to the app config in your case.
It would be interesting if you could try it on the example code if you have a minute before updating, to understand where the issues lies.

[SudoPlz]

@mmazzarolo I assume we're back to that old bug of getting the wrong datetime if the user taps confirm too fast... So it sounds like in order to resolve a UI issue we exposed a functionality issue again.
😞

[mmazzarolo]

@SudoPlz I think what you're mentioning is the issue that happens when you pick a date while scrolling the component -- which is a different issue from this one, right?

[SudoPlz]

Yep definitely different issues, but "fixing" this one, brought back that old bug, right?

[mmazzarolo]

@SudoPlz Yeah, what I mean is: AFAIK, there's no way to solve this issue correctly without introducing other small UX bugs (the spinner fix also had other issue that were reported before this one) -- because, unfortunately, this buggy behaviour is something that happens at the native level. So, instead of patching it here and causing other issues, I prefer to keep it as it is instead of adding patches on top of other patches.
My take on this: it should be solved either natively or in the community picker.

[SudoPlz]

Got it, that makes sense. Is there an issue open on the community picker right now? Do you know? They're probably not even aware of that super old bug.

[mmazzarolo]

No idea 🤷
I still have this old thread bookmarked though, lol: facebook/react-native#8169

Maybe we can also add this info in the FAQs of the component?

Let me know if you find a related issue.

[SudoPlz]

Yeah we should definitely add that to the FAQ. I'm currently trying to resolve the issue on the native side.

[SudoPlz]

@mmazzarolo ok I worked around the issue using a native method addition.
I created two patches for this:
https://gist.github.com/SudoPlz/6959001879fbfcc7e2aa42a428a5265c

Leaving it here in case someone wants to convert those 2 patches into the corresponding 2 PRs and fix that for everyone.

[mmazzarolo]

@SudoPlz Amazing 🙌

[mmazzarolo]

https://github.com/mmazzarolo/react-native-modal-datetime-picker/blob/master/README.md#the-date-in-onconfirm-doesnt-match-the-picked-date-on-ios

[jahnav0066]

I'm facing the same issue differently. I'm using a date picker in the Flatlist renderitem component.
When I search on searchbar for a product and click on enter and then try to open and set the date picker will open 1st time but the date will not be set. Its open flag is still true when I'm trying to reopen but still picker is not visible