[user-event] Read-only field in code example

[ph-fritsche]

** Problem **

The code example below does not work and causes confusion.
The React value prop without an onChange handler causes the field to be read-only.

** Suggested solution **

The code example should either use defaultValue prop or HTML instead of React/JSX.

** Footnote **

Do we want to eliminate React from code examples in light of testing-library/user-event#393 ? @nickmccurdy

---

I've tried the example code found in https://testing-library.com/docs/ecosystem-user-event/#typeelement-text-options

import React from 'react'
import {render, screen} from '@testing-library/react'
import userEvent from '@testing-library/user-event'

test('delete characters within the selectedRange', () => {
  render(
    <div>
      <label htmlFor="my-input">Example:</label>
      <input id="my-input" type="text" value="This is a bad example" />
    </div>,
  )
  const input = screen.getByLabelText(/example/i)
  input.setSelectionRange(10, 13)
  userEvent.type(input, '{backspace}good')

  expect(input).toHaveValue('This is a good example')
})

Output Is

Error: expect(element).toHaveValue(This is a good example)

Expected the element to have value:
  This is a good example
Received:
  This is a bad example

My packages are

• "jest": "^27.0.6",
• "react": "^17.0.2",
• "@testing-library/react": "^12.0.0",
• "@testing-library/user-event": "13.2.1"

Originally posted by @widoz in testing-library/user-event#661 (comment)

[kentcdodds]

The suggestion and footnote sound good to me