setFocus() requires a timeout in componentDidLoad()

[AdelheidF]

Description

There is a change with setFocus in beta.94. The call itself works fine, but in the past I could just do this:

componentDidLoad(): void {
    this.panelNode.setFocus("back-button");
}

This no longer works. I have to add the setFocus() call into a timeout now. Not sure though what a reliable wait time is.

This is the case both for panel or flow-item, or if I want to set the focus on a close button I add myself. No difference there.

From @driskull

I think we can improve this in the future by setting up a promise internally and waiting for the component to load before resolving the promise and then setFocus would wait for that promise first. But I think we can wait for the component to load before focusing internally.

Acceptance Criteria

setFocus should not require a timeout in componentDidLoad()

Relevant Info

No response

Which Component

panel, flow-item, ...

Example Use Case

No response

Esri team

N/A

[jcfranco]

Could be related to https://github.com/ionic-team/stencil/issues/3580.

[driskull]

Yeah it might be related to that bug. Our solution would need to rely on componentDidLoad so if that's not working correctly then we can't really do anything.

[driskull]

I did a little bit of testing, this seems to work fine if there are no async lifecycle methods in the child component.

@AdelheidF is this still an issue? If so, can you point me to where its occurring in code? I'd like to get some more info.

[github-actions[bot]]

Installed and assigned for verification.

[AdelheidF]

I can still repro with next.650. I have a few flow-items with footer buttons and in some cases it still requires a timeout of 200 for the footer button to get the focus on forward or backward flow movement. Same issue for header back button of flow-items. No async calls when opening the panels.

[geospatialem]

@AdelheidF Would it be possible to put a Codepen together for us to reproduce for a fix, and/or some context on where it might be occurring in the code? Want to make sure we're understanding the complexity fully to diagnose.

[AdelheidF]

@driskull has repro cases using our components. I have not managed to get it to happen in a simple codepen.

[geospatialem]

Will be re-evaluating post 1.0 release to determine if this is in the scope of the components, and if so, prioritization for a future 2023 release.

[AdelheidF]

Using requestAnimationFrame() fixes it in many places. I'm wondering if this could be added to all calcite setFocus() calls.

[geospatialem]

This also surfaced in a new addition to our doc site, where a setTimeout was needed to set the focus of a panel.

[github-actions[bot]]

Installed and assigned for verification.

[geospatialem]

@AdelheidF Can you verify if the fix above mitigates componentDidLoad with setFocus in 1.5.0-next.16?

[AdelheidF]

Looks good with 1.5.0-next.36!