Modal does not receive focus, if opened = true before modal element connects

[goatfryed-holos]

Scale Version 3.0.0-beta.136

Framework and version Base Scale Components

Current Behavior If the modal is rendered with opened attribute, the modal does not receive focus as expected.

• with frameworks where the whole modal is only rendered, if some condition is true and opened=true is provided as default
• on page load with load listeners. This is often the case with consent modals or first usage popups

Expected Behavior The modal opens, the first interactable element is focused and a focus trap is activated.

Code Reproduction [Code Sandbox|https://codesandbox.io/p/sandbox/wispy-water-dm7kxl]

Desktop (please complete the following information):

• OS: windows
• Browser chrome
• Version 114.0.5735.134

EDIT: Update scale version

[goatfryed-holos]

In frameworks, you often manage the open/close on a higher component level within your project, which makes this a usual use case. Vue users can use the following workaround

const modalOpened = ref(false);
onMounted(() => customElements.whenDefined('scale-modal').then(() => modalOpened.value = true))