FocusTextOnlyNoop() — react Function Reference

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

Function javascript BabelCompiler Entrypoint

Entity Profile

BabelCompiler→ Entrypoint→ FocusTextOnlyNoop() — react Function Reference

Dependency Diagram

graph TD
  9c734f1a_8d61_0c93_5606_e61a9a6bdc94["FocusTextOnlyNoop()"]
  f361f511_643d_fef8_84d3_4e38e9129616["TextNodesCase.js"]
  9c734f1a_8d61_0c93_5606_e61a9a6bdc94 -->|defined in| f361f511_643d_fef8_84d3_4e38e9129616
  style 9c734f1a_8d61_0c93_5606_e61a9a6bdc94 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

fixtures/dom/src/components/fixtures/fragment-refs/TextNodesCase.js lines 73–118

function FocusTextOnlyNoop() {
  const fragmentRef = useRef(null);
  const [message, setMessage] = useState('');

  const tryFocus = () => {
    fragmentRef.current.focus();
    setMessage('Called focus() - no-op for text-only fragments');
  };

  const tryFocusLast = () => {
    fragmentRef.current.focusLast();
    setMessage('Called focusLast() - no-op for text-only fragments');
  };

  return (
    <TestCase title="focus/focusLast - Text Only (No-op)">
      <TestCase.Steps>
        <li>Click either focus button</li>
      </TestCase.Steps>
      <TestCase.ExpectedResult>
        Calling focus() or focusLast() on a fragment with only text children is
        a no-op. Nothing happens and no warning is logged. This is because text
        nodes cannot receive focus.
      </TestCase.ExpectedResult>
      <Fixture>
        <Fixture.Controls>
          <button onClick={tryFocus}>focus()</button>
          <button onClick={tryFocusLast}>focusLast()</button>
          {message && (
            <div style={{marginTop: '10px', color: '#666'}}>{message}</div>
          )}
        </Fixture.Controls>
        <div
          style={{
            padding: '20px',
            backgroundColor: '#f5f5f5',
            border: '1px solid #ddd',
          }}>
          <Fragment ref={fragmentRef}>
            This fragment contains only text. Text nodes are not focusable.
          </Fragment>
        </div>
      </Fixture>
    </TestCase>
  );
}