Support autoCapitalize Characters

change/react-native-windows-2019-10-14-11-29-13-autoCapital.json

@@ -0,0 +1,9 @@
+{
+  "type": "prerelease",
+  "comment": "Support autoCapitalize Characters",
+  "packageName": "react-native-windows",
+  "email": "[email protected]",
+  "commit": "ba8d6abb2b955bb89428fc717033cdb2af792837",
+  "date": "2019-10-14T18:29:13.893Z",
+  "file": "D:\\react2\\react-native-windows\\change\\react-native-windows-2019-10-14-11-29-13-autoCapital.json"
+}

packages/E2ETest/app/Consts.ts

@@ -13,6 +13,7 @@ export const TEXTINPUT_TESTPAGE = 'TextInputTestPage';
 
 export const TEXTINPUT_ON_TEXTINPUT = 'TextInput';
 export const ML_TEXTINPUT_ON_TEXTINPUT = 'TextInputMultiLine';
+export const CAP_TEXTINPUT_ON_TEXTINPUT = 'TextInputAutoCap';
 
 // LoginTestPage
 export const LOGIN_TESTPAGE = 'LoginTestPage';

packages/E2ETest/app/TextInputTestPage.tsx

@@ -6,7 +6,7 @@
 
 import React from 'react';
 import {Text, TextInput, View} from 'react-native';
-import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT} from './Consts';
+import {TEXTINPUT_ON_TEXTINPUT, ML_TEXTINPUT_ON_TEXTINPUT, CAP_TEXTINPUT_ON_TEXTINPUT} from './Consts';
 
 interface ITextInputTestPageState {
   curText: string;
@@ -73,6 +73,12 @@ export class TextInputTestPage extends React.Component<
           placeholder="MultiLine"
           multiline={true}
         />
+        <TextInput
+          testID={CAP_TEXTINPUT_ON_TEXTINPUT}
+          style={{height: 80}}
+          placeholder="autoCapitalize"
+          autoCapitalize="characters"
+        />
         <View style={{flexDirection: 'row', justifyContent: 'space-between'}}>
           <Text testID="CurText">curText: {this.state.curText}</Text>
           <Text testID="PrevText">prev: {this.state.prevText}</Text>

packages/E2ETest/wdio/pages/TextInputTestPage.ts

@@ -7,6 +7,7 @@ import { BasePage, By } from './BasePage';
 import {
   TEXTINPUT_ON_TEXTINPUT,
   ML_TEXTINPUT_ON_TEXTINPUT,
+  CAP_TEXTINPUT_ON_TEXTINPUT,
 } from '../../app/Consts';
 
 class TextInputTestPage extends BasePage {
@@ -22,6 +23,10 @@ class TextInputTestPage extends BasePage {
     this.multiLineTextInput.setValue(text);
   }
 
+  clearAndTypeOnAutoCapTextInput(text: string) {
+    this.autoCapTextInput.setValue(text);
+  }
+
   appendNewLineOnMLText(text: string) {
     this.multiLineTextInput.addValue('End');
     this.multiLineTextInput.addValue('Enter');
@@ -36,13 +41,21 @@ class TextInputTestPage extends BasePage {
     return this.multiLineTextInput.getText();
   }
 
+  getAutoCapTextInput() {
+    return this.autoCapTextInput.getText();
+  }
+
   private get textInput() {
     return By(TEXTINPUT_ON_TEXTINPUT);
   }
 
   private get multiLineTextInput() {
     return By(ML_TEXTINPUT_ON_TEXTINPUT);
   }
+
+  private get autoCapTextInput() {
+    return By(CAP_TEXTINPUT_ON_TEXTINPUT);
+  }
 }
 
 export default new TextInputTestPage();

packages/E2ETest/wdio/test/testInput.spec.ts

@@ -23,6 +23,11 @@ describe('First', () => {
     assert.equal(TextInputTestPage.getTextInputText(), 'def');
   });
 
+  it('Type hello world on autoCap TextInput', () => {
+    TextInputTestPage.clearAndTypeOnAutoCapTextInput('hello world');
+    assert.equal(TextInputTestPage.getAutoCapTextInput(), 'HELLO WORLD');
+  });
+
   it('Type abc on multiline TextInput', () => {
     TextInputTestPage.clearAndTypeOnMLTextInput('abc');
     assert.equal(TextInputTestPage.getMLTextInputText(), 'abc');

packages/playground/Samples/textinput.tsx

@@ -56,6 +56,11 @@ export default class Bootstrap extends React.Component<{}, any> {
           keyboardType="number-pad"
           placeholder={'number-pad keyboardType'}
         />
+        <TextInput
+          style={styles.input}
+          autoCapitalize="characters"
+          placeholder={'autoCapitalize characters'}
+        />
         <TextInput
           style={styles.input}
           placeholder={this.state.passwordHidden ? 'Password' : 'Text'}

vnext/ReactUWP/Views/TextInputViewManager.cpp

@@ -563,6 +563,18 @@ void TextInputShadowNode::updateProperties(const folly::dynamic &&props) {
             } else if (propertyValue.isNull())
               textBox.ClearValue(winrt::TextBox::TextProperty());
           }
+        } else if (propertyName == "autoCapitalize") {
+          if (textBox.try_as<winrt::ITextBox6>()) {
+            if (propertyValue.isString()) {
+              if (propertyValue.asString() == "characters") {
+                textBox.CharacterCasing(winrt::CharacterCasing::Upper);
+              } else { // anything else turns off autoCap (should be "None" but
+                       // we don't support "words"/"senetences" yet)
+                textBox.CharacterCasing(winrt::CharacterCasing::Normal);
+              }
+            } else if (propertyValue.isNull())
+              textBox.ClearValue(winrt::TextBox::CharacterCasingProperty());
+          }
         }
       } else { // Applicable properties for PasswordBox
         if (propertyName == "text") {
@@ -604,7 +616,8 @@ folly::dynamic TextInputViewManager::GetNativeProps() const {
       "selectTextOnFocus", "boolean")("spellCheck", "boolean")(
       "text", "string")("mostRecentEventCount", "int")(
       "secureTextEntry", "boolean")("keyboardType", "string")(
-      "contextMenuHidden", "boolean")("caretHidden", "boolean"));
+      "contextMenuHidden", "boolean")("caretHidden", "boolean")(
+      "autoCapitalize", "string"));
 
   return props;
 }