Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Cursor position is changed while using userEvent.keyboard

See original GitHub issue

Hello, thank you to testing-library team in advance for taking a look at my issue here. I believe this is a bug and would appreciate your help in understanding how to move forward on this issue.

Configuration

{
    "@testing-library/jest-dom": "^5.11.10",
    "@testing-library/react": "^11.2.6",
    "@testing-library/user-event": "^13.1.3",
}

Relevant Code

// SimpleTextarea.js
import React, { useEffect, useState } from 'react';
import { propEq } from 'ramda';

const eventIsEnterKey = propEq('key', 'Enter');

const SimpleTextarea = ({
  onChange = () => {},
  onEnter = () => {},
  placeholder,
  value: parentValue,
}) => {
  const [ value, setValue ] = useState(parentValue);

  useEffect(() => {
    if (parentValue === value) return
    setValue(parentValue)
  }, [ parentValue ])

  const handleOnEnter = () => {
    onEnter(value);
  }

  return (
    <textarea
      placeholder={placeholder}
      value={value}
      onChange={e => {
        setValue(e.target.value)
        onChange(e.target.value)
      }}
      onKeyDown={
        e => {
          if (eventIsEnterKey(e)) {
            e.preventDefault()
            handleOnEnter()
          }
        }
      }
    />
  )
}

export default SimpleTextarea;

// SimpleTextarea.spec.js
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import SimpleTextarea from './SimpleTextarea';

function setup(params = {}) {
  const {
    placeholder,
    value,
  } = params;

  const mockOnChange = jest.fn();
  const mockOnEnter = jest.fn();

  const component = render(
    <SimpleTextarea
      placeholder={placeholder}
      value={value}
      onChange={mockOnChange}
      onEnter={mockOnEnter}
    />
  );

  return {
    component,
    mockOnChange,
    mockOnEnter,
  }
};

describe('SimpleTextarea', () => {
  it('does not change the cursor position while user is typing', () => {
    const placeholder = 'Write a comment...';
    setup({ placeholder })
    const commentInput = screen.getByPlaceholderText(placeholder)
    expect(commentInput.selectionStart).toBe(0)
    userEvent.type(commentInput, 'acd')
    expect(commentInput.selectionStart).toBe(3)
    commentInput.setSelectionRange(1, 1)
    expect(commentInput.selectionStart).toBe(1)
    userEvent.keyboard('b')
    expect(commentInput).toHaveDisplayValue('abcd')
    expect(commentInput.selectionStart).toBe(2)
  })
})