mirror of https://github.com/facebook/react.git synced 2026-02-26 05:55:02 +00:00

Files

Nicolas Gallagher cc5a49379b React Events: FocusScope tweaks and docs (#15515 )

* FocusScope: rename trap to contain.
* FocusScope: avoid potential for el.focus() errors.
* FocusScope: add docs.
* Update docs formatting.

2019-04-26 13:38:01 -07:00

885 B

Raw Blame History

FocusScope

The FocusScope module can be used to manage focus within its subtree.

// Example
const Modal = () => (
  <FocusScope
    autoFocus={true}     
    contain={true}
    restoreFocus={true}
  >
    <h1>Focus contained within modal</h1>
    <input placeholder="Focusable input" />
    <div role="button" tabIndex={0}>Focusable element</div>
    <input placeholder="Non-focusable input" tabIndex={-1} />
    <Press onPress={onPressClose}>
      <div role="button" tabIndex={0}>Close</div>
    </Press>
  </FocusScope>
);

Props

autoFocus: boolean = false

Automatically moves focus to the first focusable element within scope.

contain: boolean = false

Contain focus within the subtree of the FocusScope instance.

restoreFocus: boolean = false

Automatically restores focus to element that was last focused before focus moved within the scope.

885 B Raw Blame History