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

…14091) * TextInput caret becomes visible on non-focused TextInputs on resize * Change files --------- Co-authored-by: React-Native-Windows Bot <[email protected]>
microsoft · Nov 7, 2024 · 84761b7 · 84761b7
1 parent 346ba4e
commit 84761b7
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 0 deletions.
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": "[email protected]",
+  "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};