search

ProgressNS / nativescript-ui-feedback

This repository is used for customer feedback regarding Telerik UI for NativeScript. The issues system here is used by customers who want to submit their feature requests or vote for existing ones.
Other
115 stars 21 forks source link

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

Open trodellez opened 4 years ago

trodellez commented 4 years ago

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

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 commented 4 years ago

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

sandwai-scottjackman commented 4 years ago

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

sandwai-scottjackman commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

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 commented 3 years ago

@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 commented 3 years ago

@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 commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

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.