Implements backgroundColor for Fabric's TextInput (#12079)

* Render background color on Text
Applies a fill rect to the composition visual
Fixes #11763

* Change files

* Protect color conversions from empty values

* Apply scale factor to fill rect

* Remove unneded ViewProps alias

* Render background color on Text
Applies a fill rect to the composition visual
Fixes #11763

* Change files

* Protect color conversions from empty values

* Apply scale factor to fill rect

* Remove unneded ViewProps alias

* Use isColorMeaningful

Author: chrisglein

change/react-native-windows-32422a54-a587-407d-ad45-00d1b263f1f1.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Render background color on Text Applies a fill rect to the composition visual Fixes #11763",
+  "packageName": "react-native-windows",
+  "email": "26607885+chrisglein@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -340,8 +340,8 @@ struct CompTextHost : public winrt::implements<CompTextHost, ITextHost> {
 
   //@cmember Get the background (either opaque or transparent)
   HRESULT TxGetBackStyle(TXTBACKSTYLE *pstyle) override {
+    // We draw the background color as part of the composition visual, not the text
     *pstyle = TXTBACK_TRANSPARENT;
-    //*pstyle = TXTBACK_OPAQUE;
     return S_OK;
   }
 
@@ -643,6 +643,10 @@ void WindowsTextInputComponentView::updateProps(
     m_needsRedraw = true;
   }
 
+  if (oldTextInputProps.backgroundColor != newTextInputProps.backgroundColor) {
+    m_needsRedraw = true;
+  }
+
   /*
   if (oldTextInputProps.textAttributes.foregroundColor != newTextInputProps.textAttributes.foregroundColor) {
     if (newTextInputProps.textAttributes.foregroundColor)
@@ -693,16 +697,6 @@ void WindowsTextInputComponentView::updateProps(
       m_element.CharacterCasing(xaml::Controls::CharacterCasing::Normal);
     }
   }
-
-  if (oldViewProps.backgroundColor != newViewProps.backgroundColor) {
-    auto color = *newViewProps.backgroundColor;
-
-    if (newViewProps.backgroundColor) {
-      m_element.ViewBackground(SolidColorBrushFrom(newViewProps.backgroundColor));
-    } else {
-      m_element.ClearValue(winrt::Microsoft::ReactNative::ViewPanel::ViewBackgroundProperty());
-    }
-  }
   */
 
   m_props = std::static_pointer_cast<facebook::react::WindowsTextInputProps const>(props);
@@ -1053,6 +1047,18 @@ void WindowsTextInputComponentView::DrawText() noexcept {
 
     winrt::check_hresult(m_textServices->OnTxInPlaceActivate(&rcClient));
 
+    if (facebook::react::isColorMeaningful(m_props->backgroundColor)) {
+      auto backgroundColor = m_props->backgroundColor.AsD2DColor();
+      winrt::com_ptr<ID2D1SolidColorBrush> backgroundBrush;
+      winrt::check_hresult(d2dDeviceContext->CreateSolidColorBrush(backgroundColor, backgroundBrush.put()));
+      const D2D1_RECT_F fillRect = {
+          static_cast<float>(rcClient.left) / m_layoutMetrics.pointScaleFactor,
+          static_cast<float>(rcClient.top) / m_layoutMetrics.pointScaleFactor,
+          static_cast<float>(rcClient.right) / m_layoutMetrics.pointScaleFactor,
+          static_cast<float>(rcClient.bottom) / m_layoutMetrics.pointScaleFactor};
+      d2dDeviceContext->FillRectangle(fillRect, backgroundBrush.get());
+    }
+
     // TODO keep track of proper invalid rect
     auto hrDraw = m_textServices->TxDrawD2D(d2dDeviceContext.get(), &rc, nullptr, TXTVIEW_ACTIVE);
     winrt::check_hresult(hrDraw);

vnext/Microsoft.ReactNative/Fabric/platform/react/renderer/graphics/Color.cpp

@@ -144,11 +144,17 @@ winrt::Windows::UI::Color ResolvePlatformColor(Color const *const color) {
 }
 
 D2D1::ColorF SharedColor::AsD2DColor() const {
+  if (!m_color) {
+    return D2D1::ColorF{0, 0.0};
+  }
   winrt::Windows::UI::Color color = ResolvePlatformColor(m_color.get());
   return {color.R / 255.0f, color.G / 255.0f, color.B / 255.0f, color.A / 255.0f};
 }
 
 winrt::Windows::UI::Color SharedColor::AsWindowsColor() const {
+  if (!m_color) {
+    return winrt::Windows::UI::Color{0, 0, 0, 0};
+  }
   return ResolvePlatformColor(m_color.get());
 }