Issue Regarding inner html while using dialog dropdown

[Kirthika]

Uncaught TypeError: Cannot read properties of null (reading 'innerText')
at HTMLElement._onOverlayToggle (coralui3.js:940:484)
at Vent._executeListenersAtElement (coralui3.js:249:294)
at Vent._executeBubbleListeners (coralui3.js:252:219)
at Coral.Component.trigger (coralui3.js:354:7)
at openComplete (coralui3.js:399:29)
at coralui3.js:399:143

I am getting this issue when accessing dropdown in authoring field ,any one suggest the solution for this

[SantoshSai]

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() {
  // safe to access dropdown DOM elements here
});

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:

1. Try using a core component dialog (e.g., core/wcm/components/text/v2/text).

2. 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!

[Kirthika]

Hi Santhosh,

Thanks for your suggestions!

we are using the same coral form select and we have checked with this 

document.querySelectorAll('coral-select').forEach(select => {
  console.log(select, select.innerText);
});

no issues found either null or errors.
Everything seems fine.
But when we trying to open the state dropdown which is rendering data by using datasource,we facing the same issue as inner Text.
explicitly we not using innerText anywhere.

no issues before clicking the state dropdown.

After clicking the state dropdown,we are getting this issue,even checked with removing dialog js file completely,it showing the same.
issue is not because of js file.

[Kirthika]

one more to add after every deployment,state dropdown is not loading for some sometime.

Anyone please suggest!

[kautuk_sahni]

@Kirthika Did you find the suggestions helpful? If you need more information, please let us know. If a response resolved your issue, kindly mark it as correct to help others in the future. Alternatively, if you discovered a solution on your own, we'd appreciate it if you could share it with the community. Thank you !