How do I tell if focus has been lost in the application?

[murrumbidgee63]

If a user presses any Arrow keys but there is no element focussed at the time. We want to be able to return focus to the safest element on any given screen if Focus is lost! Is there anyway to detect this scenario?

[asgvard]

Hi,

Yes, we have been thinking on some solutions for this as sometimes we also encounter this problem. However it is not always easy because sometimes the focus is not really "lost", it is just moving to some wrappers like the page level, or even Root level of a spatial navigation tree. So visually it is lost, but technically there is some focusKey active. But we will consider some focus restoration logic in the next release. For now you have to make sure there is always some to be manually focused with "setFocus" when the page mounts, or any popup appears etc.

[wilsonneto-dev]

HI @asgvard, there is a way to in the starting of the app it automatically setFocus to the first focusable element?

[predikament]

HI @asgvard, there is a way to in the starting of the app it automatically setFocus to the first focusable element?

Hello @wilsonneto-dev,

If you call setFocus when your parent component has been mounted, the first focusable child will gain focus, e.g.:

componentDidMount() {
  // this.props.setFocus(); // If you need to focus first child automatically
  this.props.setFocus('MENU-6'); // If you need to focus specific item that you know focus key of
}

As per the documentation. Hope that answers your question.

[wilsonneto-dev]

Great, thanks so much!