4.2.3 | Off canvas and Modal Elements Root Element Losing Focus

[DoncoMarketing]

If you inspect an element that has an overlay active state (such as canvas or modal) and then click outside of the element to see the base element again, the inspector loses its focus on that element.

Repro:

1. Click off canvas button
2. Button is inspected but you can no longer see the button because canvas covers it in preview
3. Close canvas to see toggle
4. Canvas button toggle loses focus

Definitely not how it used to work and seems a bit off. I’ve confirmed that this happens to modal elements and off canvas elements 100% of the time.

[DoncoMarketing]

[alexander]

Thanks! You’re one step ahead of us . For Pro 4.3 we retooled how all of that works. Here are some improvements to look for very soon:

1. Clicking the close button or the overlay area is treated as clicking the element so it will stay inspected (fixes the issue you’re seeing).
2. New Modal, Dropdown, and Off Canvas elements that will let you build anything you want inside them.
3. The content areas inside Modal and Off canvas will be also be observable (outline on hover) and inspectable. So if you have the modal open, you can click anywhere inside to inspect it.
4. The Dropdown element can optionally be triggered on hover instead of click
5. New setting in the Preview Manager to lock toggles. When enabled, modals and off canvas will only close if you click the close button directly. Dropdowns that are set to hover will require a click to close in the preview.