I’m building a table in react and I’m testing it with cypress.
I have a component that turns into an input when focused and pressed. For an unknown reason Cypress is not typing this first letter. Here is my code:

This is the cell component we want to edit.

import React, { useEffect, useRef, useState } from "react";

export const EditableCell = ({
  cancelEdit,
  dataTest,
  finishEdit,
  initialValue,
  isNumeric,
  shouldSelectAll,
  stopSelectAll
}) => {
  const [value, setValue] = useState(initialValue);
  const inputRef = useRef(null);

  useEffect(() => {
    if (inputRef.current) {
      inputRef.current.focus();
      if (shouldSelectAll) {
        inputRef.current.select();
        stopSelectAll();
      }
    }
  }, [isNumeric, shouldSelectAll, stopSelectAll]);

  return (
    <input
      style={{
        border: 0,
        width: "95%",
        fontSize: 12,
        background: "none"
      }}
      ref={inputRef}
      {...dataTest}
      autoFocus
      onKeyDown={e => {
        if (e.key === "Enter") {
          e.target.blur();
          e.stopPropagation();
        } else if (e.key === "Escape") {
          e.stopPropagation();
          cancelEdit();
        }
      }}
      onBlur={() => finishEdit(value)}
      onChange={e => setValue(e.target.value)}
      type={isNumeric ? "number" : undefined}
      value={value}
    />
  );
};

The component is a <div /> until the first letter is pressed, then it turns into the component above.

To be more specific, when the letter is pressed I set a react state variable to be true and this triggers the cell to be changed into the EditableCell. Normally, reacts still triggers the event inside the EditableCell, but with cypress is not happening.

When testing locally it works, but with Cypress it skips the first letter. The test that is failing is.

  it.only(`typing a letter should start edit`, () => {
    cy.visit("#/DataTable%20-%20EditableCellTable");
    cy.get(`[data-test="tgCell_name"]:first`).type("zonk{enter}");
    cy.get(`[data-test="tgCell_name"]:first`).should("contain", "zonk");
  });

When I checked on the field the work “onk” was written.

What I wat is the word to completed, is Cypress triggering events in a different way?