[0.65] Fixes Issues with Text backgroundColor (#8490)

* Cherry Pick e64bc29

* Delete react-native-windows-57b2d9fa-1663-4577-b3bf-4e684b970508.json

* Change files

Co-authored-by: Eric Rozell <[email protected]>

change/react-native-windows-d5ee9be9-4beb-4ab9-897d-f9fe3808d36b.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Cherry Pick e64bc29",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/@react-native-windows/tester/src/js/examples-win/Text/TextExample.windows.tsx

@@ -10,7 +10,9 @@
 import * as React from 'react';
 import {
   /*Image,*/ StyleSheet,
+  Switch,
   Text,
+  TextInput,
   View,
   TextStyle,
   TouchableWithoutFeedback,
@@ -167,6 +169,66 @@ export class BackgroundColorDemo extends React.Component<{}> {
   }
 }
 
+export class TextHighlightDemo extends React.Component<
+  {},
+  {search: string; toggled: boolean}
+> {
+  constructor(props: any) {
+    super(props);
+    this.state = {search: '', toggled: false};
+  }
+
+  private getTextParts(text: string) {
+    if (this.state.search === '') {
+      return [text];
+    }
+
+    let parts = text.split(this.state.search);
+    for (let i = parts.length - 2; i >= 0; --i) {
+      parts = [
+        ...parts.slice(0, i + 1),
+        this.state.search,
+        ...parts.slice(i + 1),
+      ];
+    }
+
+    const highlight = {
+      backgroundColor: 'yellow',
+    };
+
+    return parts.map((part, i) => (
+      <Text key={i} style={i % 2 === 0 ? undefined : highlight}>
+        {part}
+      </Text>
+    ));
+  }
+
+  public render() {
+    const exampleText = 'The quick brown fox jumped over the lazy dog.';
+    const parts = this.getTextParts(exampleText);
+    const rootHighlight = {
+      backgroundColor: this.state.toggled ? 'cyan' : undefined,
+    };
+    return (
+      <View testID={'highlights'}>
+        <TextInput
+          placeholder="Enter search text"
+          value={this.state.search}
+          onChangeText={text => this.setState({search: text})}
+        />
+        <View style={{flexDirection: 'row', alignItems: 'center'}}>
+          <Text style={{paddingRight: 5}}>Toggle highlight on all text:</Text>
+          <Switch
+            onValueChange={isOn => this.setState({toggled: isOn})}
+            value={this.state.toggled}
+          />
+        </View>
+        <Text style={rootHighlight}>{parts}</Text>
+      </View>
+    );
+  }
+}
+
 export class TextExample extends React.Component<
   {},
   {toggle1: boolean; toggle2: boolean; toggle3: boolean}
@@ -792,6 +854,9 @@ export class TextExample extends React.Component<
             </Text>
           </View>
         </RNTesterBlock>
+        <RNTesterBlock title="Dynamic backgroundColor">
+          <TextHighlightDemo />
+        </RNTesterBlock>
       </RNTesterPage>
     );
   }