formio / angular

JSON powered forms for Angular
https://formio.github.io/angular-demo
MIT License
619 stars 464 forks source link

[Custom Components] ngOnInit is called multiply whenever I type a character in a custom component editor #507

Closed dmenne closed 4 months ago

dmenne commented 4 years ago

Whenever I type a character in one of the custom component editors, ngOnit is called between 50 and 80 times. The number of times the function is called is different every time. This probable is just another variant of the infinite loop reported several times, and a bug fix has been promised on several occasions.


Please stop posting the standard message below, it is annoying. Support is for custom features of a working product, not for bugs.


We do offer Support Packages that are for training, support or development services. The hours can be used in one-hour increments at your convenience over a 90 day period. We will assign one of our senior developers to work directly with you in online sessions. Please contact support@form.io and we will provide you with our support package document.

travist commented 4 years ago

I am sure it is an infinite loop that is getting fired. This is almost always because the value toggles between the different loops (which can be caused by calculated values or any others). Please provide the URL of the form you are testing and we will take a look. Usually for "infinite loop" bugs we consider these high priority and will get to them without engaging commercial support. ;)

dmenne commented 4 years ago

There are no explicit validation/calculated values, I am not sure about implicit ones though.

Try any of the three custom components:

https://github.com/dmenne/custom-radio

The editors are simply stolen from you similar components, https://github.com/dmenne/custom-radio/tree/master/src/assets. See for example https://github.com/dmenne/custom-radio/blob/master/src/app/checkbox-button/checkbox-button.formio.ts how I created these.

Three calls on entry, three on exit, but up to hundreds whenever you type a single character in one of the fields when the editor is open.

travist commented 4 years ago

I am not sure what would cause this. It would require some digging and we are currently bogged up with other things. Maybe someone from the community has seen this and knows why it happens?

dmenne commented 4 years ago

4.8.0-beta 5: still a problem. https://github.com/dmenne/custom-radio

formio-custom

travist commented 4 years ago

We know this is not fixed. We have investigated this with all of our test cases and do not see a problem with recursive onInit's. It should also be noted that this will not block future releases since this seems to have to do with the custom components feature that @merobal implemented which is something that Form.io does not provide support for. I am afraid you will need to get support from him and his team to see if this can be resolved within the custom component feature.

merobal commented 4 years ago

@travist @Alena-Levina I created a debug version with more verbose console.log output. image You may see there the ngOnInit hook is invoked due to it's being rendered 2x3 times by formiojs (so it's rendered 3 times, then an updateComponent event is called, then it's rendered 3 times more and the output is called again, so 2x3 = 6). This happens for every keypress at the edit form, the preview is re-rendered 6 times.

My guess it's happening for every formio field too (since we use renderElement and that's called by the framework), but there is no internal logic at native html fields, so it's not causing huge issues there (only performance ones).

You can reach the debug deploy here: https://debug--angular-formio-custom-demo.netlify.app/ I added console.log here: https://github.com/merobal/angular-formio/blob/debug/src/custom-component/create-custom-component.ts#L75 and I use this version to deploy: https://github.com/merobal/angular-formio-deploy/tree/debug

travist commented 4 years ago

@merobal thanks for the more detailed explanation. @Alena-Levina was the last person to investigate the issue and was not able to replicate it using our normal custom component / render methods. Maybe this will help her dig deeper.

merobal commented 4 years ago

@Alena-Levina do you have any update?

ThakkarHardik commented 3 years ago

@travist @Alena-Levina any update on this ? I am using so many custom component and every custom component have 2-3 api call on ngoninit method so i can't deal with that every time it's calling 40-50 api call which is reducing the performance of custom component so please try resolve it as soon as possible

travist commented 3 years ago

@ThakkarHardik can you confirm that this is still an issue with the @formio/angular v5 release with latest formio.js renderer? If so, then our ticket we have for this is still valid. It is in our backlog, but there have been other items deemed as higher priority. If this is a huge blocker for your implementation, then it may be necessary to expedite this through the Form.io Developer support function. Contact support@form.io if you want to go down that road... if not, then either the community will need to chip in for a resolution, or you will need to wait for this ticket to make its way up to the top of our list.

ThakkarHardik commented 2 years ago

@travist @Alena-Levina Do you have any updated on this ??? I am using "@angular": "~9.0.1","angular-formio": "^4.11.5","formiojs": "^4.13.5", can you please help me out resolve this issue . Thanks

Sidiro23 commented 4 months ago

We're currently addressing a backlog of GitHub issues, and as part of this effort, some inactive issues may be marked as closed. This isn't a dismissal, but a step toward more efficient tracking.

If you feel the issue is still relevant, please re-open and we'll ensure it gets the attention it deserves. Your understanding is appreciated as we work to enhance our open-source responsiveness.