TextInput caret becomes visible on non-focused TextInputs on resize (#14091)

acoates-ms · rnbot · web-flow · commit 84761b721502 · 2024-11-07T05:06:47.000Z
* TextInput caret becomes visible on non-focused TextInputs on resize

* Change files

---------

Co-authored-by: React-Native-Windows Bot &lt;53619745+rnbot@users.noreply.github.com&gt;
diff --git a/change/react-native-windows-ad145bca-5a3a-45aa-ab7b-35661aa5fe59.json b/change/react-native-windows-ad145bca-5a3a-45aa-ab7b-35661aa5fe59.json
@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "TextInput caret becomes visible on non-focused TextInputs on resize",
+  "packageName": "react-native-windows",
+  "email": "53619745+rnbot@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp
@@ -165,6 +165,10 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Show the caret
   BOOL TxShowCaret(BOOL fShow) override {
+    // Only show the caret if we have focus
+    if (fShow && !m_outer->m_hasFocus) {
+      return false;
+    }
     m_outer->ShowCaret(m_outer->windowsTextInputProps().caretHidden ? false : fShow);
     return true;
   }
@@ -915,6 +919,7 @@ void WindowsTextInputComponentView::UnmountChildComponentView(
 
 void WindowsTextInputComponentView::onLostFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_hasFocus = false;
   Super::onLostFocus(args);
   if (m_textServices) {
     LRESULT lresult;
@@ -926,6 +931,7 @@ void WindowsTextInputComponentView::onLostFocus(
 
 void WindowsTextInputComponentView::onGotFocus(
     const winrt::Microsoft::ReactNative::Composition::Input::RoutedEventArgs &args) noexcept {
+  m_hasFocus = true;
   Super::onGotFocus(args);
   if (m_textServices) {
     LRESULT lresult;
diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.h
@@ -128,6 +128,7 @@ struct WindowsTextInputComponentView
   int m_cDrawBlock{0};
   bool m_needsRedraw{false};
   bool m_drawing{false};
+  bool m_hasFocus{false};
   bool m_clearTextOnSubmit{false};
   bool m_multiline{false};
   DWORD m_propBitsMask{0};
