fix: Respect maxLength prop in type() function

This commit modifies the `type()` function to respect the `maxLength` prop of the input element. If the current text length exceeds the `maxLength` value, typing events will not be emitted. This ensures that the input value does not exceed the specified maximum length.

1. Create an input element with a `maxLength` prop.
2. Use the `type()` function to input text that exceeds the `maxLength` value.
3. Verify that the input value does not exceed the specified maximum length.
4. Check that no typing events are emitted once the `maxLength` is reached.

Additionally, see that `yarn test` passes with an additional test added to `src/user-event/type/__tests__/type.test.tsx`

Author: joshuayoes

src/user-event/type/__tests__/type.test.tsx

@@ -338,4 +338,36 @@ describe('type()', () => {
     await userEvent.type(screen.getByTestId('input'), 'abc');
     expect(handleKeyPress).toHaveBeenCalledTimes(3);
   });
+
+  it('does respect maxLength prop', async () => {
+    const { events, ...queries } = renderTextInputWithToolkit({
+      maxLength: 2,
+    });
+
+    const user = userEvent.setup();
+    await user.type(queries.getByTestId('input'), 'abc');
+
+    const eventNames = events.map((e) => e.name);
+    expect(eventNames).toEqual([
+      'pressIn',
+      'focus',
+      'pressOut',
+      'keyPress',
+      'change',
+      'changeText',
+      'selectionChange',
+      'keyPress',
+      'change',
+      'changeText',
+      'selectionChange',
+      'endEditing',
+      'blur',
+    ]);
+
+    const lastChangeTestEvent = events.filter((e) => e.name === 'changeText').pop();
+    expect(lastChangeTestEvent).toMatchObject({
+      name: 'changeText',
+      payload: 'ab',
+    });
+  });
 });

src/user-event/type/type.ts

@@ -49,7 +49,9 @@ export async function type(
     const previousText = element.props.value ?? currentText;
     currentText = applyKey(previousText, key);
 
-    await emitTypingEvents(this.config, element, key, currentText, previousText);
+    if (element.props.maxLength === undefined || currentText.length <= element.props.maxLength) {
+      await emitTypingEvents(this.config, element, key, currentText, previousText);
+    }
   }
 
   const finalText = element.props.value ?? currentText;