FocusCase() — react Function Reference

Architecture documentation for the FocusCase() function in FocusCase.js from the react codebase.

Function javascript BabelCompiler Optimization

Entity Profile

BabelCompiler→ Optimization→ FocusCase() — react Function Reference

Dependency Diagram

graph TD
  097bb1f6_3253_c075_dc1f_527cb8bdadc6["FocusCase()"]
  da713056_fba4_f906_d9d7_9204b2c965ef["FocusCase.js"]
  097bb1f6_3253_c075_dc1f_527cb8bdadc6 -->|defined in| da713056_fba4_f906_d9d7_9204b2c965ef
  style 097bb1f6_3253_c075_dc1f_527cb8bdadc6 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/FocusCase.js lines 8–63

export default function FocusCase() {
  const fragmentRef = useRef(null);

  return (
    <TestCase title="Focus Management">
      <TestCase.Steps>
        <li>Click to focus the first child</li>
        <li>Click to focus the last child</li>
        <li>Click to blur any focus within the fragment</li>
      </TestCase.Steps>

      <TestCase.ExpectedResult>
        <p>
          The focus method will focus the first focusable child within the
          fragment, skipping any unfocusable children.
        </p>
        <p>
          The focusLast method is the reverse, focusing the last focusable
          child.
        </p>
        <p>
          Blur will call blur on the document, only if one of the children
          within the fragment is the active element.
        </p>
      </TestCase.ExpectedResult>

      <Fixture>
        <Fixture.Controls>
          <button onClick={() => fragmentRef.current.focus()}>
            Focus first child
          </button>
          <button onClick={() => fragmentRef.current.focusLast()}>
            Focus last child
          </button>
          <button onClick={() => fragmentRef.current.blur()}>Blur</button>
        </Fixture.Controls>
        <div className="highlight-focused-children" style={{display: 'flex'}}>
          <Fragment ref={fragmentRef}>
            <div style={{outline: '1px solid black'}}>
              <p>Unfocusable div</p>
            </div>
            <div style={{outline: '1px solid black'}}>
              <p>Unfocusable div with nested focusable button</p>
              <button>Button 1</button>
            </div>
            <button>Button 2</button>
            <input type="text" placeholder="Input field" />
            <div style={{outline: '1px solid black'}}>
              <p>Unfocusable div</p>
            </div>
          </Fragment>
        </div>
      </Fixture>
    </TestCase>
  );
}