Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataForm's validation wont work on iOS after bringing app from background #1396

Open
trodellez opened this issue Apr 14, 2020 · 10 comments
Open

Comments

@trodellez
Copy link

We are having this issue with Dataform on iOS when the component is put in background and then brought back to foreground, none of Dataform events such as propertyValidate or propertyValidated would be fired and executing validateAll() wont return any value.
This happens only on iOS and I have made a simple playground project to clarify it better

https://play.nativescript.org/?template=play-ng&id=hqZMRm&v=62

  • **Progress NativeScript UI plugin version: 6.0.0
  • **CLI: 6.4.1
  • **Cross-platform modules: 6.5.1

Please tell us how to recreate the issue in as much detail as possible.

  1. Start the application on iOS
  2. type some charachter in firstname field ( on the console validation events would be logged )
  3. press home ( put app in background)
  4. click again on app icon ( bring it back to foreground)
  5. start typing in other fields or click continue

none of the validations would pass and on the console it can be seen that none of the events are being called.
I would appreciate any help regarding this since it is a critical issue.

@alexander-mai
Copy link

I have the same problem.
Whill this be fixed anytime?

@sandwai-scottjackman
Copy link

Same problem here with the exact same versions. This is really affecting our app - can someone please look into this asap?

@sandwai-scottjackman
Copy link

After a frustrating 3 hours trying to find a workaround for this...... I did! This solution may not be appropriate for everyone, but it works for me.

Make sure that the form is opened in a modal. That's it! The validation events continue to fire normally after the app has been resumed from background.

I'm using the vuejs flavour of NS so this is very easy to do - I can just choose to open the component in a modal for iOS, and navigate to it normally for Android (as android has it's own specific issues with modal content and raddataform).

This is still a very bad bug, as it really makes normal use of forms extremely unusable for most applications, but this workaround does exist. No idea why :(

Hope this helps someone.

@alexander-mai
Copy link

Does nobody else has this problem or nobody else using the RadDataform.
I switched to use ReactiveForm for Angular Flavor. There isn't this bug and the material layout is also used on iOS instead of the splitted view.

@sandwai-scottjackman
Copy link

Does nobody else has this problem or nobody else using the RadDataform.
I switched to use ReactiveForm for Angular Flavor. There isn't this bug and the material layout is also used on iOS instead of the splitted view.

RadDataForm is a horrible buggy beast. It promises a lot, but under-delivers on nearly everything. There are so many bugs and quirks - usually completely different for iOS and Android, so there is rarely a on-fits-all solution, and often you'll need to have completely separate components for each os.

The app I've developed makes extensive use of RadDataForm, but there are so many workarounds to deal with all of the above that it's blown out our production by about 6 months. No joke.

Happy to share my knowledge with anyone who is experiencing these issues. Hopefully RadDataForm gets a huge overhaul / rewrite soon, but I wouldn't hold my breath on that one. :(

@JakeAi
Copy link

JakeAi commented Aug 12, 2021

@sandwai-scottjackman @alexander-mai I have had the same issue for a year or two now. The same issue also occurs when using a FullScreen Modal. So I stopped using modals, and made the users open a link instead. However, once coming back to the app, the issue is still there... lol

@sandwai-scottjackman
Copy link

@JakeAi - one more thing that may be relevant to this, I noticed (after way too long) when using NS in general in the VUE js flavour, NS HATES it when you hide / show things using the v-if directive. It often cant handle parts of the component being effectively removed in this way after already being rendered. This isn't mentioned anywhere in their cough documentation, but I learned the hard way to replace v-if with v-show - same outcome but instead of removing stuff, it just gets hidden.

This one simple approach fixed a LOT of buggy behaviour in a lot of components, especially regading raddataform behaviour. I suggest you check that your app isn't doing the same thing with whatever flavour you're using. In general, don't remove / add things dynamically, try to hide / show them instead.

Hope this helps!

@alexander-mai
Copy link

Hello @JakeAi,
i'm using Angular flavour and have also used Angular for web. That's why I switched to Angular Reactive forms:
https://angular.io/guide/reactive-forms

I just added some css for a better look on error messages and now it works and looks fine. There are no such problems like on RadDataform and it is not closed source.

I hope I could help you.

@JakeAi
Copy link

JakeAi commented Aug 13, 2021

Hello @JakeAi,
i'm using Angular flavour and have also used Angular for web. That's why I switched to Angular Reactive forms:
https://angular.io/guide/reactive-forms

I just added some css for a better look on error messages and now it works and looks fine. There are no such problems like on RadDataform and it is not closed source.

I hope I could help you.

I switched to reactive forms last night. I didn't realize they were supported. When I minimize my app, or use a fullscreen modal, it works how it should. I wasn't doing anything crazy with the dataforms so this will suffice.

@JakeAi - one more thing that may be relevant to this, I noticed (after way too long) when using NS in general in the VUE js flavour, NS HATES it when you hide / show things using the v-if directive. It often cant handle parts of the component being effectively removed in this way after already being rendered. This isn't mentioned anywhere in their cough documentation, but I learned the hard way to replace v-if with v-show - same outcome but instead of removing stuff, it just gets hidden.

This one simple approach fixed a LOT of buggy behaviour in a lot of components, especially regading raddataform behaviour. I suggest you check that your app isn't doing the same thing with whatever flavour you're using. In general, don't remove / add things dynamically, try to hide / show them instead.

Hope this helps!

In this instance, I had 0 ngif / v-if for my forms. Back when I created my app, I found out that using a fullscreen modal was causing the validation issue after closing the modal. Once I switched fullscreen to false, it worked, and I left it.

Fast forward a year or two, and the issue was back. I simply forgot about that behavior. So I removed modals completely and sent the users to a website. HOWEVER, once the user comes back to the app, the same STUPID issue is there. I uninstalled Raddataforms and switched to angular reactive forms. Maybe once Progress is completely removed from nativescript, this framework will become better. The problems I've had are usually with their UI plugins. Nativescript itself is fine.

@sandwai-scottjackman
Copy link

In this instance, I had 0 ngif / v-if for my forms.

To clarify, using v-if anywhere on a component can cause these issues, not just inside the form itself. Glad you were able to sort it with reactive forms.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants