getNativeBeforeInputChars() — react Function Reference

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

Function javascript BabelCompiler Validation calls 1 called by 1

Entity Profile

BabelCompiler→ Validation→ getNativeBeforeInputChars() — react Function Reference

Dependency Diagram

graph TD
  2c8561d4_b5f4_5116_1092_d5867919739f["getNativeBeforeInputChars()"]
  a235366c_1abe_162c_b9bf_7fbbfb597584["BeforeInputEventPlugin.js"]
  2c8561d4_b5f4_5116_1092_d5867919739f -->|defined in| a235366c_1abe_162c_b9bf_7fbbfb597584
  f9de52ad_6a52_511a_a2cc_a210ea41b984["extractBeforeInputEvent()"]
  f9de52ad_6a52_511a_a2cc_a210ea41b984 -->|calls| 2c8561d4_b5f4_5116_1092_d5867919739f
  7b0dfa25_61f3_d05d_f416_c1f977953bf8["getDataFromCustomEvent()"]
  2c8561d4_b5f4_5116_1092_d5867919739f -->|calls| 7b0dfa25_61f3_d05d_f416_c1f977953bf8
  style 2c8561d4_b5f4_5116_1092_d5867919739f fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

packages/react-dom-bindings/src/events/plugins/BeforeInputEventPlugin.js lines 255–302

function getNativeBeforeInputChars(
  domEventName: DOMEventName,
  nativeEvent: any,
): ?string {
  switch (domEventName) {
    case 'compositionend':
      return getDataFromCustomEvent(nativeEvent);
    case 'keypress':
      /**
       * If native `textInput` events are available, our goal is to make
       * use of them. However, there is a special case: the spacebar key.
       * In Webkit, preventing default on a spacebar `textInput` event
       * cancels character insertion, but it *also* causes the browser
       * to fall back to its default spacebar behavior of scrolling the
       * page.
       *
       * Tracking at:
       * https://code.google.com/p/chromium/issues/detail?id=355103
       *
       * To avoid this issue, use the keypress event as if no `textInput`
       * event is available.
       */
      const which = nativeEvent.which;
      if (which !== SPACEBAR_CODE) {
        return null;
      }

      hasSpaceKeypress = true;
      return SPACEBAR_CHAR;

    case 'textInput':
      // Record the characters to be added to the DOM.
      const chars = nativeEvent.data;

      // If it's a spacebar character, assume that we have already handled
      // it at the keypress level and bail immediately. Android Chrome
      // doesn't give us keycodes, so we need to ignore it.
      if (chars === SPACEBAR_CHAR && hasSpaceKeypress) {
        return null;
      }

      return chars;

    default:
      // For other native event types, do nothing.
      return null;
  }
}