From 16e296b35625bd121bc962deffc66abf46ca6053 Mon Sep 17 00:00:00 2001
From: Max Smolens <msmolens@gmail.com>
Date: Thu, 14 Oct 2021 16:30:51 -0400
Subject: [PATCH 1/3] docs(user-event): fix formatting

Run `prettier --write --parser=mdx docs/ecosystem-user-event.mdx` to fix
the file's formatting.
---
 docs/ecosystem-user-event.mdx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx
index c94009810..ea66666cd 100644
--- a/docs/ecosystem-user-event.mdx
+++ b/docs/ecosystem-user-event.mdx
@@ -93,7 +93,9 @@ set `skipPointerEventsCheck` to `true`:
 userEvent.click(elem, undefined, {skipPointerEventsCheck: true})
 ```
 
-The `skipPointerEventsCheck` option can be passed to any pointer related API including:
+The `skipPointerEventsCheck` option can be passed to any pointer related API
+including:
+
 - [dblClick](#dblclickelement-eventinit-options)
 - [hover](#hoverelement-options)
 - [unhover](#unhoverelement-options)

From 40813680116f70ea6136638a3e7d9daef32822bb Mon Sep 17 00:00:00 2001
From: Max Smolens <msmolens@gmail.com>
Date: Thu, 14 Oct 2021 16:32:12 -0400
Subject: [PATCH 2/3] docs(user-event): add example to prepend text with `type`

Add an example that shows how to prepend text with `type`. By default,
`type` appends to the existing text. To prepend text, you should reset
the element's selection range and provide the `initialSelectionStart`
and `initialSelectionEnd` options to `type`.
---
 docs/ecosystem-user-event.mdx | 30 ++++++++++++++++++++++++++++++
 1 file changed, 30 insertions(+)

diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx
index ea66666cd..e1e855587 100644
--- a/docs/ecosystem-user-event.mdx
+++ b/docs/ecosystem-user-event.mdx
@@ -206,6 +206,36 @@ test('delete characters within the selectedRange', () => {
   userEvent.type(input, '{backspace}good')
 
   expect(input).toHaveValue('This is a good example')
+```
+
+By default, `type` appends to the existing text. To prepend text, reset the
+element's selection range and provide the `initialSelectionStart` and
+`initialSelectionEnd` options:
+
+```jsx
+import React from 'react'
+import {render, screen} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+
+test('prepend text', () => {
+  render(
+    <div>
+      <label htmlFor="my-input">Example:</label>
+      <input id="my-input" type="text" />
+    </div>,
+  )
+
+  const input = screen.getByLabelText(/example/i)
+  userEvent.type(element, 'World!')
+
+  // Prepend text
+  element.setSelectionRange(0, 0)
+  userEvent.type(element, 'Hello, ', {
+    initialSelectionStart: 0,
+    initialSelectionEnd: 0,
+  })
+
+  expect(element).toHaveValue('Hello, World!')
 })
 ```
 

From b25092ee4e82a54dd545a7c08935dc359137c413 Mon Sep 17 00:00:00 2001
From: Max Smolens <msmolens@users.noreply.github.com>
Date: Fri, 4 Feb 2022 17:29:31 -0500
Subject: [PATCH 3/3] docs(user-event): simplify 'prepend text' example

Co-authored-by: Philipp Fritsche <ph.fritsche@gmail.com>
---
 docs/ecosystem-user-event.mdx | 11 ++---------
 1 file changed, 2 insertions(+), 9 deletions(-)

diff --git a/docs/ecosystem-user-event.mdx b/docs/ecosystem-user-event.mdx
index e1e855587..c9ae9a818 100644
--- a/docs/ecosystem-user-event.mdx
+++ b/docs/ecosystem-user-event.mdx
@@ -218,15 +218,8 @@ import {render, screen} from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
 test('prepend text', () => {
-  render(
-    <div>
-      <label htmlFor="my-input">Example:</label>
-      <input id="my-input" type="text" />
-    </div>,
-  )
-
-  const input = screen.getByLabelText(/example/i)
-  userEvent.type(element, 'World!')
+  render(<input defaultValue="World!"/>)
+  const element = screen.getByRole('textbox')
 
   // Prepend text
   element.setSelectionRange(0, 0)