Dialog: initial focus not applied on open

[ilhan007]

Describe the bug
The focus does not go to the focusable element in the dialog when it opens.
Note: The bug is not reproducible in our examples.

To reproduce
Steps to reproduce the behavior:

1. Go to https://mobile-development-kit-mobile-qa-nsblrmdkwebtestapp-approuter.cfapps.ap11.hana.ondemand.com/nsBLRMDKWebTestApp/index.html
2. Use your corporate mail and windows/macOS password to log in
3. Click the last item from the list "PLT Format Support"
4. Click "FormCell test cases"
5. Find the input field (ui5-textarea) with value "UPPER CASE IN WEB"
6. Type any letter - f.e "a"
7. Dialog opens upon typing, but the focus remains in the input field and you can continue typing, which will open other instances of Dialog

Comment
The "applyFocus" method is called before the Shadow DOM of the Dialog is ready, as consequence no focusable
element is found. We have to ensure that the Dialog is really open, the DOM is ready, and then call "applyFocus".

I also asked the app developer (from where the issue origins) to check if calling "applyFocus" "onAfterRendering" would fix the issue.

// Popup.js
onAfterRendering() {
      this.applyInitialFocus();
}

As you can see the time the applyFocus is called, the footer is not displayed, seems it is about to be slotted by the browser.
Using setTimeout resolves the issue.

onAfterRendering() {
    setTimeout(() => {
          this.applyInitialFocus();
     }, 0);
}

Video
Screen Recording 2020-11-25 at 3.15.40 PM.mov.zip

Expected behavior
The button in the Dialog's footer should be the element on focus after the Dialog opens

Context

• UI5 Web Components version: latest
• OS/Platform: {...} MacOS
• Browser (if relevant): {...} Chrome
• Other information: {...}

Affected components (if known) ui5-dialog (Popup)

[ilhan007]

FYI @SAP/ui5-webcomponents-topic-rd

[ilhan007]

Hello @alexandar-mitsev

After upgrading the test system with version that includes the fix, the MDK colleagues found out that the issue is still present - the focus does not apply as expected.

The steps to reproduce are the same.
The web components are bundled in "web-ui~46a5c7d5.bundle.js" where you can see that the app has the fix:

BR,
ilhan

[georgimkv]

Awaiting system to be updated to last release of ui5-webcomponents to check if #2679 fixes with the problem.

[georgimkv]

Hi @ilhan007, the system running on the latest version of ui5-webcomponents no longer observes the reported bug.