fix(ui5-dynamic-date-range): focus last selected option, upon navigate back

[hinzzx]

Currently in our ui5-dynamic-date-range component when user selects an option with Template (e.g. SingleDate, DateRange, Last/Next, etc.) from the List and then clicking the Back Button, when the view switches back to the List with the options, the last clicked option is not being focused.

Now clicking the Back Button no matter if the user selected the date/time or not, switching the view to the List view focus the last clicked list item.

Why we used this approach:

When navigating back, the component re-renders to show the options list.
The focus attempt must happen after the list items are fully rendered in the DOM
Without the await renderFinished and setTimout() in the onAfterRendering hook, this._list.items are empty or the DOM elements might not be ready for focus.

Fixes: #11649

[cla-assistant]

All committers have signed the CLA.

[ui5-webcomponents-bot]

🚀 Preview deployment ready: https://UI5.github.io/webcomponents/pr-12233/

The preview will be updated automatically when you push new commits to this PR.

[ui5-webcomponents-bot]

🚀 Preview deployment ready: https://UI5.github.io/webcomponents/pr-12233/

The preview will be updated automatically when you push new commits to this PR.

[tsanislavgatev]

why is renderFinished needed here?

[hinzzx]

There is some kind of race condition where, if we do not have the await renderFinished() sometimes the focus cannot be applied as the List is not yet fully rendered. So with await renderFinished() and setTimeout() we ensure that the focus is called only when everything else is rendered and focusable.

[ui5-webcomponents-bot]

🚀 Deployed on https://pr-12233--ui5-webcomponents-preview.netlify.app