[Fabric] Introduce clearTextOnFocus property for TextInput (#13227)

* Functionality + add textInput to playground sample * Avoid using duplicated member var * Introducing new Fabric E2E test * Change files * Address build error * Oops there is no TextInput but ExampleTextInput * Update snapshots from failing test suites
microsoft · May 17, 2024 · d38ba13 · d38ba13
1 parent 285b3c4
commit d38ba13
Show file tree

Hide file tree

Showing 7 changed files with 197 additions and 43 deletions.
diff --git a/change/react-native-windows-ee99f5c7-130b-465c-8e13-c8353c3de93c.json b/change/react-native-windows-ee99f5c7-130b-465c-8e13-c8353c3de93c.json
@@ -0,0 +1,7 @@
+{
+  "type": "none",
+  "comment": "Implemented clearTextOnFocus and tests",
+  "packageName": "react-native-windows",
+  "email": "14967941+danielayala94@users.noreply.github.com",
+  "dependentChangeType": "none"
+}
diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js
@@ -252,6 +252,26 @@ const styles = StyleSheet.create({
 
 const examples: Array<RNTesterModuleExample> = [
   ...TextInputSharedExamples,
+  {
+    title: 'Clear text on focus',
+    render: function (): React.Node {
+      return (
+        <View>
+          <Text>Do not clear text on focus:</Text>
+          <ExampleTextInput
+            style={styles.singleLine}
+            testID="clear-text-on-focus-false"
+          />
+          <Text>Clear text on focus:</Text>
+          <ExampleTextInput
+            clearTextOnFocus={true}
+            style={styles.singleLine}
+            testID="clear-text-on-focus-true"
+          />
+        </View>
+      );
+    },
+  },
   {
     title: 'Colors and text inputs',
     render: function (): React.Node {

diff --git a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts
@@ -345,6 +345,68 @@ describe('TextInput Tests', () => {
     const dump = await dumpVisualTree('textinput-clear-on-submit-4');
     expect(dump).toMatchSnapshot();
   });
+  test('TextInputs can keep text on focus', async () => {
+    const componentFocusFalse = await app.findElementByTestID(
+      'clear-text-on-focus-false',
+    );
+
+    await componentFocusFalse.waitForDisplayed({timeout: 5000});
+    await app.waitUntil(
+      async () => {
+        await componentFocusFalse.setValue('Hello World');
+        return (await componentFocusFalse.getText()) === 'Hello World';
+      },
+      {
+        interval: 1500,
+        timeout: 5000,
+        timeoutMsg: `Unable to enter correct text.`,
+      },
+    );
+
+    // Click on another textInput to move focus away from the one tested (clearTextOnFocus={false})
+    const componentFocusTrue = await app.findElementByTestID(
+      'clear-text-on-focus-true',
+    );
+    await componentFocusTrue.waitForDisplayed({timeout: 5000});
+    await componentFocusTrue.click();
+
+    // Then click on the tested component
+    await componentFocusFalse.click();
+
+    // Verify the textInput contents are still the same after regaining focus
+    expect(await componentFocusFalse.getText()).toBe('Hello World');
+  });
+  test('TextInputs can clear text on focus', async () => {
+    const componentFocusTrue = await app.findElementByTestID(
+      'clear-text-on-focus-true',
+    );
+
+    await componentFocusTrue.waitForDisplayed({timeout: 5000});
+    await app.waitUntil(
+      async () => {
+        await componentFocusTrue.setValue('Hello World');
+        return (await componentFocusTrue.getText()) === 'Hello World';
+      },
+      {
+        interval: 1500,
+        timeout: 5000,
+        timeoutMsg: `Unable to enter correct text.`,
+      },
+    );
+
+    // Click on another textInput to move focus away from the one tested (clearTextOnFocus={true})
+    const componentFocusFalse = await app.findElementByTestID(
+      'clear-text-on-focus-false',
+    );
+    await componentFocusFalse.waitForDisplayed({timeout: 5000});
+    await componentFocusFalse.click();
+
+    // Then click on the tested component
+    await componentFocusTrue.click();
+
+    // Verify the textInput contents are cleared after regaining focus
+    expect(await componentFocusTrue.getText()).toBe('');
+  });
   test('TextInputs can have inline images', async () => {
     const component = await app.findElementByTestID('textinput-inline-images');
     await component.waitForDisplayed({timeout: 5000});

diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap
@@ -367,7 +367,7 @@ exports[`TextInput Tests Text have cursorColor 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 128, 0, 255)",
         },
-        "Offset": "83, 133, 0",
+        "Offset": "83, 5, 0",
         "Opacity": 0,
         "Size": "1, 19",
         "Visual Type": "SpriteVisual",
@@ -696,7 +696,7 @@ exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = `
   "Visual Tree": {
     "Comment": "textinput-autocomplete-address-country",
     "Offset": "0, 0, 0",
-    "Size": "916, 28",
+    "Size": "916, 29",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -773,7 +773,7 @@ exports[`TextInput Tests TextInputs can autocomplete, country 1`] = `
   "Visual Tree": {
     "Comment": "textinput-autocomplete-country",
     "Offset": "0, 0, 0",
-    "Size": "916, 29",
+    "Size": "916, 28",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -1079,7 +1079,7 @@ exports[`TextInput Tests TextInputs can be editable 1`] = `
   "Visual Tree": {
     "Comment": "textinput-editable",
     "Offset": "0, 0, 0",
-    "Size": "916, 28",
+    "Size": "916, 29",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -1383,7 +1383,7 @@ exports[`TextInput Tests TextInputs can be set to not editable 1`] = `
   "Visual Tree": {
     "Comment": "textinput-not-editable",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -1583,7 +1583,7 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 0, 0, 255)",
         },
-        "Offset": "5, 5, 0",
+        "Offset": "5, 133, 0",
         "Opacity": 0,
         "Size": "1, 19",
         "Visual Type": "SpriteVisual",
@@ -2487,7 +2487,7 @@ exports[`TextInput Tests TextInputs can have caretHidden 1`] = `
           "Brush Type": "ColorBrush",
           "Color": "rgba(0, 0, 0, 255)",
         },
-        "Offset": "83, 5, 0",
+        "Offset": "83, 133, 0",
         "Opacity": 0,
         "Size": "1, 19",
         "Visual Type": "SpriteVisual",
@@ -2516,7 +2516,7 @@ exports[`TextInput Tests TextInputs can have custom return key label, Compile 1`
   "Visual Tree": {
     "Comment": "textinput-return-Compile",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -2824,7 +2824,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, next 1`] =
   "Visual Tree": {
     "Comment": "textinput-return-next",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -2901,7 +2901,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, none 1`] =
   "Visual Tree": {
     "Comment": "textinput-return-none",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3055,7 +3055,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, search 1`]
   "Visual Tree": {
     "Comment": "textinput-return-search",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3132,7 +3132,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, send 1`] =
   "Visual Tree": {
     "Comment": "textinput-return-send",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3209,7 +3209,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=-1
   "Visual Tree": {
     "Comment": "textinput-letterspacing--1",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3440,7 +3440,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9
   "Visual Tree": {
     "Comment": "textinput-letterspacing-9",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3840,7 +3840,7 @@ exports[`TextInput Tests TextInputs can have inline images, drawable props not s
   "Visual Tree": {
     "Comment": "textinput-inline-images-3",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -3917,7 +3917,7 @@ exports[`TextInput Tests TextInputs can have inline images, drawableLeft and dra
   "Visual Tree": {
     "Comment": "textinput-inline-images-2",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -4600,7 +4600,7 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to false 1`] = `
   "Visual Tree": {
     "Comment": "textinput-readonly-false",
     "Offset": "0, 0, 0",
-    "Size": "916, 29",
+    "Size": "916, 28",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -4677,7 +4677,7 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to true 1`] = `
   "Visual Tree": {
     "Comment": "textinput-readyonly",
     "Offset": "0, 0, 0",
-    "Size": "916, 28",
+    "Size": "916, 29",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -5054,7 +5054,7 @@ exports[`TextInput Tests TextInputs have a custom text color 1`] = `
   "Visual Tree": {
     "Comment": "textinput-custom-color",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -5131,7 +5131,7 @@ exports[`TextInput Tests TextInputs have a custom underline color 1`] = `
   "Visual Tree": {
     "Comment": "textinput-custom-underline-color",
     "Offset": "0, 0, 0",
-    "Size": "916, 32",
+    "Size": "916, 33",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -5283,7 +5283,7 @@ exports[`TextInput Tests TextInputs have a default text color 1`] = `
   "Visual Tree": {
     "Comment": "textinput-default-color",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -5360,7 +5360,7 @@ exports[`TextInput Tests TextInputs have a default underline color 1`] = `
   "Visual Tree": {
     "Comment": "textinput-default-underline-color",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {
@@ -5512,7 +5512,7 @@ exports[`TextInput Tests TextInputs support secure entry, with placeholder text
   "Visual Tree": {
     "Comment": "textinput-password-placeholder",
     "Offset": "0, 0, 0",
-    "Size": "916, 33",
+    "Size": "916, 32",
     "Visual Type": "SpriteVisual",
     "__Children": [
       {