I'm using datasource inside nested multi field. The datasource is getting a list for dropdown which contains typically 20 to 200 items.

While the list contains more than 100 items, sometimes I can't add nested items. The dropdown doesn't get while clicking 'Add'. It works fine while list contains less than 50 items. The image is given below.

The green marked dropdown is rendered nicely while clicking 'Add'. But in later part, the dropdown is not rendered correctly and UI is broken in the particular area(red marked) while clicking 'Add'.

My nested multifield XML is given below.

<grandPermission
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                composite="true"
                                                fieldDescription="click to add link"
                                                fieldLabel="Permission">
<field
                                                    jcr:primaryType="nt:unstructured"
                                                    sling:resourceType="granite/ui/components/coral/foundation/container"
                                                    name="./permissions">
    <items jcr:primaryType="nt:unstructured">
        <productPath
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/pathfield"
                                                            fieldDescription="Select a path"
                                                            fieldLabel="Path"
                                                            name="./path"
                                                            rootPath="/content"/>
        <list
                                                            jcr:primaryType="nt:unstructured"
                                                            sling:resourceType="granite/ui/components/coral/foundation/form/multifield"
                                                            composite="true"
                                                            fieldDescription="click to add link"
                                                            fieldLabel="list">
            <field
                                                                jcr:primaryType="nt:unstructured"
                                                                sling:resourceType="granite/ui/components/coral/foundation/container"
                                                                name="./parentItem">
                <items jcr:primaryType="nt:unstructured">
                    <userSpeciality
                                                                        jcr:primaryType="nt:unstructured"
                                                                        sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                                        fieldLabel="select item"
                                                                        name="./item">
                        <datasource
                                                                            jcr:primaryType="nt:unstructured"
                                                                            sling:resourceType="/apps/project/datasource/path/data.html"/>
                    </userSpeciality>
                </items>
            </field>
        </list>
    </items>
</field>
</grandPermission>

I've used an use class in 'data.html' to get the dropdown list. The use class is below. For simplicity I've used hardcoded list here. The behaviour is same as my implementation.

public class CustomDataSource extends WCMUsePojo{

private final Logger logger = LoggerFactory.getLogger(this.getClass());


@Override
public void activate() throws Exception {
    final ResourceResolver resolver = getResource().getResourceResolver();
    List<Resource> resourceList = new ArrayList<>();
    ValueMap vm = null;


    for(int j = 0; j < 100; j++){
        vm = new ValueMapDecorator(new HashMap<>());
        String text1 = "text-"+j;
        String value1 = "value-"+j;
        vm.put("value",value1);
        vm.put("text",text1);
        resourceList.add(new ValueMapResource(resolver, new ResourceMetadata(), JcrConstants.NT_UNSTRUCTURED, vm));
    }


    DataSource ds = new SimpleDataSource(resourceList.iterator());
    this.getRequest().setAttribute(DataSource.class.getName(), ds);
}

}