Expand my Community achievements bar.

How to inspect / debug AEM Date Picker calendar popup?

Avatar

Level 1

I’m working with the AEM Core Components Date Picker (Adaptive Form / Granite UI), and I’m facing an issue where I’m unable to inspect the calendar popup in the browser.

When I right-click on the date picker field and select Inspect, the input element is accessible, but the calendar UI (popup with dates) disappears immediately, making it impossible to inspect the DOM, CSS, or JS related to the calendar.

I’ve tried:

  • Right-click → Inspect

  • Inspecting after clicking the date picker icon

  • Chrome DevTools “Select element” mode

But the calendar closes as soon as focus is lost.

Questions:

  • Is there a supported way to inspect or debug the date picker calendar?

  • Is the calendar rendered in a separate overlay, iframe, or dynamically injected DOM?

  • Any DevTools tricks (pause on focus loss, disable blur, etc.) that work with this component?

  • Is this a known limitation with AEM Core Components / Granite UI date picker?

Screenshot attached for reference.

TejashreeNH_0-1767605549508.png

 

Any guidance or best practices would be really helpful.

Topics

Topics help categorize Community content and increase your ability to discover relevant content.

0 Replies