import "@testing-library/jest-dom";
import { render, screen } from "@testing-library/react";
import userEvent from "@testing-library/user-event";

test("input should blur when clicking outside", () => {
  render(
    <div>
      <input type="text" data-testid="input-id" />
      <div data-testid="outside-id"></div>
    </div>
  );

  const input = screen.getByTestId("input-id");
  input.focus();
  expect(input).toHaveFocus();
  userEvent.type(input, "1,2");

  userEvent.click(screen.getByTestId("outside-id"));
  // input.blur();
  expect(input).not.toHaveFocus();
});