ui5-busy-indicator crashes in ui5-dialog during initial render

[MarcusNotheis]

Bug Description

When rendering an ui5-dialog for the first time and immediately opening it with an active ui5-busy-indicator inside, the site crashes with a JS runtime error:

TypeError: Cannot read properties of null (reading 'focus')

Expected Behavior

Busy Indicator should be active and no error should be thrown

Steps to Reproduce

1. Open https://codesandbox.io/s/table-dialog-busy-ntti7?file=/src/App.js
2. Click "Show Dialog" button
3. see the error

Isolated Example

https://codesandbox.io/s/table-dialog-busy-ntti7?file=/src/App.js

Context

• UI5 Web Components version: 1.0.0-rc.15 (and latest snapshots as well)
• OS/Platform: macOS
• Browser: Chrome
• Affected component: ui5-busy-indicator

Log Output / Stack Trace / Screenshots

TypeError: Cannot read properties of null (reading 'focus')
HTMLElement._redirectFocus
node_modules/@ui5/webcomponents/dist/BusyIndicator.js:265
  262 | 		}
  263 | 
  264 | 		event.preventDefault();
> 265 | 		this.shadowRoot.querySelector(".ui5-busy-indicator-busy-area").focus();
  266 | 	}
  267 | }
  268 | 

Priority

• Low
• Medium
• High
• Very High

The priority indicates the severity of the issue. To set the appropriate priority consider the following criteria:

• Breaks entire application or system - High or Very High
• Accessibility issue - Medium or High
• Functional issue - Medium or High
• Visual issue - Low or Medium

Note: The priority might be re-evaluated by the issue processor.

Stakeholder Info (if applicable)

• Organization: UI5 Web Components for React / SAP Value Experience

[Shtilianova]

Hello @SAP/ui5-webcomponents-topic-rd,
This is a reproducible issue with dialog with busy indicator.
Kind regards, Diana