[Fabric] Introduce autoCapitalize property for TextInput #13266

danielayala94 · 2024-05-22T23:06:28Z

Description

Type of Change

New feature.

Why

Enables TextInput controls to autocapitalize letters, depending on the selected mode.

characters: all characters are capitalized.
words: every first letter of a word is capitalized.
sentences: only the first letter of a sentence is capitalized.
none: no autocapitalization is performed.

Resolves #13120

What

Introduced logic to update the TextInput during updateProps(), and added a new check in OnCharacterReceived() to determine if the character should be capitalized.

Screenshots

AutoCapitalize.mp4

Testing

Tested manually by running the E2E Fabric Test App via Visual Studio, then typing on the corresponding TextInput fields.
Reused existing unit tests to run as part of the TextInputComponentTest suite.

Changelog

No

Microsoft Reviewers: Open in CodeFlow

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

marlenecota · 2024-05-22T23:57:04Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+      }
+    }
+
+    m_textServices->TxSetText(wstrText.c_str());


Suggested change

m_textServices->TxSetText(wstrText.c_str());

winrt::check_hresult(m_textServices->TxSetText(wstrText.c_str()));

marlenecota · 2024-05-23T00:05:08Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    return true;
+  } else if (autoCapitalizeType == "words") {
+    BSTR bstr = nullptr;
+    winrt::hresult hr = m_textServices->TxGetText(&bstr);


Suggested change

winrt::hresult hr = m_textServices->TxGetText(&bstr);

winrt::check_hresult(m_textServices->TxGetText(&bstr));

marlenecota · 2024-05-23T00:07:37Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    SysFreeString(bstr);
+  } else if (autoCapitalizeType == "sentences") {
+    BSTR bstr = nullptr;
+    winrt::hresult hr = m_textServices->TxGetText(&bstr);


Suggested change

winrt::hresult hr = m_textServices->TxGetText(&bstr);

winrt::check_hresult(m_textServices->TxGetText(&bstr));

marlenecota · 2024-05-23T00:09:28Z

changelog should be yes and the comment could just be your PR title

marlenecota · 2024-05-23T00:10:23Z

change/react-native-windows-019fdb51-c5a4-49b7-90c5-36af1060f8f6.json

@@ -0,0 +1,7 @@
+{
+  "type": "none",


Suggested change

"type": "none",

"type": "prerelease",

marlenecota · 2024-05-23T00:10:45Z

change/react-native-windows-019fdb51-c5a4-49b7-90c5-36af1060f8f6.json

+  "comment": "Implemented autoCapitalize prop for TextInput",
+  "packageName": "react-native-windows",
+  "email": "14967941+danielayala94@users.noreply.github.com",
+  "dependentChangeType": "none"


Suggested change

"dependentChangeType": "none"

"dependentChangeType": "patch"

TatianaKapos · 2024-05-23T17:22:09Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    } else if (capitalizationType == "sentences") { // DOUBLE CHECK THIS LOGIC
+      bool newSentence = true;
+
+      // Patterns to look at to declare newSentence as true: first character, or "? ", or "! ", or ". ".


Does a new line count as a new Sentence? I would test this out on a multiline TextInput (mostly because I always miss that edgecase lol)!

also does this work if you copy/paste text into the TextInput? I'm not sure if it's supposed to work on that case (check expo snack) but I would make sure it doesn't cause an exception!

Capitalization rules doesn't apply to characters inserted in the middle of the string, except if autoCapitalize='characters'.

Testing the multiline scenario is a good observation, let me check what iOS/Android do and add new TextInputs to the E2E test app.

sharath2727 · 2024-05-23T18:42:41Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+     None - Do not autocapitalize anything.
+  */
+
+  BSTR bstr = nullptr;


is there a winrt/wil version for this?

Yes, wil::unique_bstr. Initially I wanted to install WIL nupkg but it fails due to a conflict with another package, so to avoid delaying the work I opted to do manual allocation, as other parts of the code already do.

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

sharath2727 · 2024-05-23T18:50:56Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    } else if (capitalizationType == "words") {
+      bool nextWord = true;
+
+      for (auto &ch : wstrText) {


Multiple questions here:

do we need a empty string (not nullptr) check in the beginning?

How do you deal with special characters in this loop? What if the string is just one special character?

You should pretty much never try to do this kind of logic. The localization complexity of text is crazy.

You could maybe use EM_FINDWORDBREAK to move between words.

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

sharath2727 · 2024-05-23T18:55:37Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    m_textServices->TxSetText(wstrText.c_str());
+  }
+
+  SysFreeString(bstr);


maybe if you use a wil wrapper you don't need to handle memory yourself?

That is correct, unfortunately I haven't been able to install WIL yet.

sharath2727 · 2024-05-23T18:56:26Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+  if (autoCapitalizeType == "characters") {
+    return true;
+  } else if (autoCapitalizeType == "words") {
+    BSTR bstr = nullptr;


wil/winrt wrapper? and brace initialization here?

sharath2727 · 2024-05-23T19:00:07Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+// If autoCapitalizeType == "none" or different from characters/words/sentences, return false.
+// NOTE: TxGetText always returns a '\r' at the end of the string. See comments below for potential implications.
+bool WindowsTextInputComponentView::shouldAutoCapitalize() {
+  std::string_view autoCapitalizeType = windowsTextInputProps().autoCapitalize;


brace initialization?

sharath2727 · 2024-05-23T19:00:24Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+    winrt::hresult hr = m_textServices->TxGetText(&bstr);
+
+    if (SUCCEEDED(hr)) {
+      std::wstring wstrText = std::wstring(bstr, SysStringLen(bstr));


brace initialization?

sharath2727 · 2024-05-23T19:06:33Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+      }
+    }
+
+    SysFreeString(bstr);


wil wrapper might be needed here.

acoates-ms · 2024-05-23T21:02:00Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+  WPARAM wParam;
+
+  // Auto-capitalize the key when applicable
+  if (shouldAutoCapitalize()) {


Attempting to just do this on CharRecieved will miss a bunch of cases.

What if the text is set from JS? (Might be worth seeing what happens with a controlled text case in android/iOS).
What if the text is pasted in?
IME input?

AutoCorrectProc (https://learn.microsoft.com/en-us/windows/win32/api/richedit/nc-richedit-autocorrectproc) might be of some interest. Its possibly a better way to modify the text.

acoates-ms · 2024-05-23T21:07:23Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+
+  // Auto-capitalize the key when applicable
+  if (shouldAutoCapitalize()) {
+    wParam = static_cast<WPARAM>(std::towupper(static_cast<wchar_t>(args.KeyCode())));


Is keycode always a wchar? -- What does this do with surrogate pairs?

acoates-ms · 2024-05-23T21:17:12Z

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp

+void WindowsTextInputComponentView::autoCapitalizeOnUpdateProps(const std::string &capitalizationType) noexcept {
+  /*
+    Possible values are:
+     Characters - All characters.


For characters at least, we should just use EM_SETEDITSTYLE and SES_UPPERCASE - to have RichEdit do this properly.

acoates-ms · 2024-05-23T21:25:02Z

Generally trying to do all this with Get/SetText is probably not the way to go about this. -- It scales pretty badly if the app has a large text field, and the interactions with other parts of the text stack are likely to cause other issues.

danielayala94 · 2024-05-28T18:45:22Z

I'm going to review the ideas proposed in this PR, and likely propose a new design for this feature in another PR.

danielayala94 added 2 commits May 22, 2024 15:55

Implemented functionality + enabled unit tests

5c6df9a

Change files

b1e0ddb

danielayala94 requested a review from a team as a code owner May 22, 2024 23:06

danielayala94 requested review from jonthysell and TatianaKapos May 22, 2024 23:11

danielayala94 added 2 commits May 22, 2024 16:41

Formatting as the pipeline checks like it

87b1a26

Merge branch 'main' into autoCapitalize

3fa3306

marlenecota reviewed May 22, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp Show resolved Hide resolved

marlenecota reviewed May 22, 2024

View reviewed changes

vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp Show resolved Hide resolved

marlenecota reviewed May 22, 2024

View reviewed changes

marlenecota reviewed May 23, 2024

View reviewed changes

TatianaKapos reviewed May 23, 2024

View reviewed changes

sharath2727 reviewed May 23, 2024

View reviewed changes

acoates-ms reviewed May 23, 2024

View reviewed changes

danielayala94 closed this May 28, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Fabric] Introduce autoCapitalize property for TextInput #13266

[Fabric] Introduce autoCapitalize property for TextInput #13266

danielayala94 commented May 22, 2024 •

edited

Loading

marlenecota May 22, 2024

marlenecota May 23, 2024

marlenecota May 23, 2024

marlenecota commented May 23, 2024

marlenecota May 23, 2024

marlenecota May 23, 2024

TatianaKapos May 23, 2024

TatianaKapos May 23, 2024 •

edited

Loading

danielayala94 May 23, 2024

sharath2727 May 23, 2024

danielayala94 May 23, 2024 •

edited

Loading

sharath2727 May 23, 2024

acoates-ms May 23, 2024

sharath2727 May 23, 2024

danielayala94 May 23, 2024

sharath2727 May 23, 2024

sharath2727 May 23, 2024

sharath2727 May 23, 2024

sharath2727 May 23, 2024

acoates-ms May 23, 2024

acoates-ms May 23, 2024

acoates-ms May 23, 2024

acoates-ms May 23, 2024

acoates-ms commented May 23, 2024

danielayala94 commented May 28, 2024

	m_textServices->TxSetText(wstrText.c_str());
	winrt::check_hresult(m_textServices->TxSetText(wstrText.c_str()));

	winrt::hresult hr = m_textServices->TxGetText(&bstr);
	winrt::check_hresult(m_textServices->TxGetText(&bstr));

[Fabric] Introduce autoCapitalize property for TextInput #13266

[Fabric] Introduce autoCapitalize property for TextInput #13266

Conversation

danielayala94 commented May 22, 2024 • edited Loading

Description

Type of Change

Why

What

Screenshots

Testing

Changelog

Microsoft Reviewers: Open in CodeFlow

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

marlenecota commented May 23, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

TatianaKapos May 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

danielayala94 May 23, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

acoates-ms commented May 23, 2024

danielayala94 commented May 28, 2024

danielayala94 commented May 22, 2024 •

edited

Loading

TatianaKapos May 23, 2024 •

edited

Loading

danielayala94 May 23, 2024 •

edited

Loading