Hi @kirthika,
Ensure your dropdown/select field uses correct Coral 3 syntax.
Example for a valid granite:FormSelect:
<granite:FormSelect
jcr:primaryType="nt:unstructured"
name="./example"
fieldLabel="Example Dropdown"
required="{Boolean}false">
<items jcr:primaryType="nt:unstructured">
<option1
jcr:primaryType="nt:unstructured"
text="Option 1"
value="option1" />
<option2
jcr:primaryType="nt:unstructured"
text="Option 2"
value="option2" />
</items>
</granite:FormSelect>
Avoid mixing coral- prefixed elements directly unless you're certain about timing and rendering lifecycle.
Step 2: Validate Dialog Load Timing
If you're using dropdowns inside a multifield or dynamically injected content, wrap dropdown rendering in:
$(document).on("dialog-ready", function() {
});
Step 3: Check for Custom Clientlib Conflicts
If you're using custom clientlibs to modify dialog behavior:
-
Check for timing issues (e.g., DOM not available yet).
-
Make sure you're not prematurely querying .innerText or similar properties.
-
Use console.log or breakpoints to identify null selectors in your JS.
Step 4: Test in Vanilla Core Component
To isolate the issue:
-
Try using a core component dialog (e.g., core/wcm/components/text/v2/text).
-
Add a select field there. If it works, your issue is specific to dialog structure or custom JS in your component.
Try this temporarily: Use this in browser console when dialog is open:
document.querySelectorAll('coral-select').forEach(select => {
console.log(select, select.innerText);
});
If any of the selects return null or throw error, that’s the one causing issues.
Hope that helps!
