Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface FocusContainerOptionsProps

Hierarchy

Index

Properties

Optional defaultFocus

defaultFocus: string

This is the element that should be focused by default when the component is mounted. This can either be the first or last focusable item or a query selector string that is run against this component to focus.

Optional disableFocusCache

disableFocusCache: boolean

By default, the focus container will try to maintain a cache of the focusable elements that is updated only when this component re-renders. If the children are extremely dynamic and focusable elements can be removed/added without this component updating, you should disable the cache so that the focusable elements are updated each time the tab key is pressed. Disabling the cache will be slightly slower for larger focusable areas, but it might not be too bad.

NOTE: The only important elements are the first and last elements in this list. So if your children aren't changing the first and last elements, there's no need to disable the cache.

Optional disableFocusOnMount

disableFocusOnMount: boolean

The default behavior for the focus container is to focus an element once it is mounted and the disabled prop is not enabled. This behavior can be disabled if this is not wanted for some reason.

Optional disableFocusOnMountScroll

disableFocusOnMountScroll: boolean

Boolean if the element that gets focused on mount should try to not scroll the focused element into view which is the default behavior. This should normally remain false, but it is useful to set to true if the FocusContainer is within a transition that appears offscreen.

Optional disableFocusOnUnmount

disableFocusOnUnmount: boolean

The default behavior for the focus container is to attempt to focus the element that was focused before the focus container was mounted since it is generally used for temporary material. If there are cases where this behavior is not wanted, you can enable this prop.

Optional disableTabFocusWrap

disableTabFocusWrap: boolean

Boolean if the focus behavior should be disabled. This should really be used if you are using nested focus containers for temporary material (such as dialogs or menus).

Optional unmountFocusFallback

unmountFocusFallback: FocusFallback

When the focus container unmounts, it will attempt to re-focus the element that was focused before the focus container was mounted unless the disableFocusOnUnmount prop is enabled. There might be cases where unmounting the focus container causes the page to re-render and the previous element no longer exists. When this happens keyboard users might have a problem navigating through the page again depending on how the browser implemented the native tab behavior so this prop allows you to ensure that a specific element is focused in these cases.

This can either be a query selector string, a specific HTMLElement, or a function that finds a specific HTMLElement to focus.

Generated using TypeDoc