[fields] Correctly handle events with a complete value insertion (#9896)

Signed-off-by: Lukas <[email protected]> Co-authored-by: Flavien DELANGLE <[email protected]>
mui · Aug 3, 2023 · bc9cdb5 · bc9cdb5
1 parent 146ccc7
commit bc9cdb5
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 6 deletions.
diff --git a/packages/x-date-pickers/src/internals/hooks/useField/useField.ts b/packages/x-date-pickers/src/internals/hooks/useField/useField.ts
@@ -193,13 +193,18 @@ export const useField = <
       return;
     }
 
-    const valueStr = event.target.value;
+    const targetValue = event.target.value;
+    const eventData = (event.nativeEvent as InputEvent).data;
+    // Calling `.fill(04/11/2022)` in playwright will trigger a change event with the requested content to insert in `event.nativeEvent.data`
+    // usual changes have only the currently typed character in the `event.nativeEvent.data`
+    const shouldUseEventData = eventData && eventData.length > 1;
+    const valueStr = shouldUseEventData ? eventData : targetValue;
     const cleanValueStr = cleanString(valueStr);
 
-    // If no section is selected, we just try to parse the new value
+    // If no section is selected or eventData should be used, we just try to parse the new value
     // This line is mostly triggered by imperative code / application tests.
-    if (selectedSectionIndexes == null) {
-      updateValueFromValueStr(cleanValueStr);
+    if (selectedSectionIndexes == null || shouldUseEventData) {
+      updateValueFromValueStr(shouldUseEventData ? eventData : cleanValueStr);
       return;
     }
 

diff --git a/test/e2e/index.test.ts b/test/e2e/index.test.ts
@@ -214,7 +214,7 @@ const fakeNow = new Date('2022-04-17T13:37:11').valueOf();
 
         const brand = page.locator('[role="columnheader"][aria-colindex="1"] > [draggable]');
         const year = page.locator('[role="columnheader"][aria-colindex="2"] > [draggable]');
-        await brand.dragTo(year);
+        await brand.dragTo(year, { timeout: 1000 });
 
         expect(
           await page.evaluate(() => document.querySelector('[role="row"]')!.textContent!),
@@ -230,7 +230,7 @@ const fakeNow = new Date('2022-04-17T13:37:11').valueOf();
         const rowColumn1990 = page.locator(
           '[role="row"][data-rowindex="0"] [role="cell"][data-colindex="1"]',
         );
-        await brand.dragTo(rowColumn1990);
+        await brand.dragTo(rowColumn1990, { timeout: 1000 });
 
         expect(await page.locator('[role="row"]').first().textContent()).to.equal('yearbrand');
       });
@@ -436,6 +436,30 @@ const fakeNow = new Date('2022-04-17T13:37:11').valueOf();
           await page.waitForSelector('[role="tooltip"]', { state: 'detached' });
           expect(await page.getByRole('textbox').inputValue()).to.equal('04/11/2022');
         });
+
+        it('should allow filling in a value and clearing a value', async () => {
+          await renderFixture('DatePicker/BasicDesktopDatePicker');
+          const input = page.getByRole('textbox');
+
+          await input.fill('04/11/2022');
+
+          expect(await input.inputValue()).to.equal('04/11/2022');
+
+          await input.blur();
+          await input.fill('');
+
+          expect(await input.inputValue()).to.equal('MM/DD/YYYY');
+        });
+
+        it('should allow typing in a value', async () => {
+          await renderFixture('DatePicker/BasicDesktopDatePicker');
+          const input = page.getByRole('textbox');
+
+          await input.focus();
+          await input.type('04/11/2022');
+
+          expect(await input.inputValue()).to.equal('04/11/2022');
+        });
       });
       describe('<MobileDatePicker />', () => {
         it('should allow selecting a value', async () => {