Liferay.on("allPortletsReady") getting fired before all portlets are ready

Issue

• Liferay.on("allPortletsReady") getting fired before all portlets are ready
• Steps to reproduce:

1. Start the server.
2. Create a form with multiple text fields, single selection radio button set with multiple options, select list fields, etc. with some rules working on these fields.
3. Save/Publish the form and configure a page to show this form with the Forms portlet.
4. On the page showing the form, add the following javascript code in the configuration settings (Configure page > Design > Customization > Javascript) :
   

   function computeIndex() {
   
   $("div.ddm-form-page-container input[type='radio']").each(function(index) {
   console.log(index);
   });
   }
   
   Liferay.on("allPortletsReady", function() {
   
   console.log("All portlets ready");
   computeIndex(); 
   });

5. Save settings and publish the page.
6. Go to the page and open the browser's console
   Expected result:
   In the console log, you get "All portlets ready" and the IDs for the radio buttons.
   Actual result:
   Only the "All portlets ready" text is displayed.
   Additional info:
   Adding a delay to the part that displays the IDs cause the script to behave as expected. This leads us to believe that the Liferay.on("allPortletsReady", function() is fired before it should

Environment

• Liferay DXP 7.4

Resolution

• So the definition of the “allPortletsReady” function is as follows: This function gets loaded when everything, including the portlets, is on the page.
• This can be confusing as it means all content from the original HTTP request is on the page (markup, direct resources pointed by them like CSS, images, or JS are loaded), but does not cover JS scripts in the page that need to make further fetch requests to load data, which is what form is doing. Resource loading is often confused with "dom stability/completeness".
• So the “allPortletsReady” function is behaving as it should.
• Also, make sure that the IDs are displayed in the logs other than adding a delay manually, need to create the own custom form field.
• The custom form field could be similar to the Radio form field, but it would be possible to increment the code to show the subscriber count next to the label.

Additional Information

• Writing a Custom Form Field Type