diff --git a/change/react-native-windows-f5511915-0776-4804-894c-ee2485410b96.json b/change/react-native-windows-f5511915-0776-4804-894c-ee2485410b96.json new file mode 100644 index 00000000000..4a7aa58d71d --- /dev/null +++ b/change/react-native-windows-f5511915-0776-4804-894c-ee2485410b96.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "TextInputs are zero height if there is no value and no placeholder text", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap index 611ddc52e47..9281d259c6e 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap @@ -254,7 +254,7 @@ exports[`TextInput Tests Single-line TextInputs can enable text selection 1`] = "Visual Tree": { "Comment": "singleline-text-input", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -564,7 +564,7 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Character "Visual Tree": { "Comment": "capitalize-characters", "Offset": "0, 0, 0", - "Size": "791, 19", + "Size": "791, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -639,7 +639,7 @@ exports[`TextInput Tests TextInputs can autocapitalize: Autocapitalize Turned Of "Visual Tree": { "Comment": "capitalize-none", "Offset": "0, 0, 0", - "Size": "791, 19", + "Size": "791, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -717,7 +717,7 @@ exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = ` "Visual Tree": { "Comment": "textinput-autocomplete-address-country", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -873,7 +873,7 @@ exports[`TextInput Tests TextInputs can autocomplete, one-time-code 1`] = ` "Visual Tree": { "Comment": "textinput-autocomplete-one-time-code", "Offset": "0, 0, 0", - "Size": "916, 28", + "Size": "916, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1153,7 +1153,7 @@ exports[`TextInput Tests TextInputs can be defined as a set using accessibilityP "Visual Tree": { "Comment": "textinput-set", "Offset": "0, 0, 0", - "Size": "916, 93", + "Size": "916, 94", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1222,12 +1222,12 @@ exports[`TextInput Tests TextInputs can be defined as a set using accessibilityP }, { "Offset": "0, 31, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1286,12 +1286,12 @@ exports[`TextInput Tests TextInputs can be defined as a set using accessibilityP }, { "Offset": "0, 62, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1373,7 +1373,7 @@ exports[`TextInput Tests TextInputs can be editable 1`] = ` "Visual Tree": { "Comment": "textinput-editable", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1683,7 +1683,7 @@ exports[`TextInput Tests TextInputs can be set to not editable 1`] = ` "Visual Tree": { "Comment": "textinput-not-editable", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1836,7 +1836,7 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = ` "Visual Tree": { "Comment": "textinput-clear-on-submit", "Offset": "0, 0, 0", - "Size": "916, 10", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1886,7 +1886,7 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = ` }, "Offset": "5, 5, 0", "Opacity": 0, - "Size": "1, 1", + "Size": "1, 19", "Visual Type": "SpriteVisual", }, ], @@ -1986,7 +1986,7 @@ exports[`TextInput Tests TextInputs can clear on submit with custom submit key e "Visual Tree": { "Comment": "textinput-clear-on-submit-2", "Offset": "0, 0, 0", - "Size": "916, 10", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2061,7 +2061,7 @@ exports[`TextInput Tests TextInputs can customize its padding 1`] = ` "Visual Tree": { "Comment": "textinput-padding", "Offset": "0, 0, 0", - "Size": "916, 10", + "Size": "916, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2293,7 +2293,7 @@ exports[`TextInput Tests TextInputs can have a color 1`] = ` "Visual Tree": { "Comment": "style-color", "Offset": "0, 0, 0", - "Size": "791, 28", + "Size": "791, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2524,7 +2524,7 @@ exports[`TextInput Tests TextInputs can have a font style 1`] = ` "Visual Tree": { "Comment": "style-fontStyle", "Offset": "0, 0, 0", - "Size": "791, 29", + "Size": "791, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2601,7 +2601,7 @@ exports[`TextInput Tests TextInputs can have a font weight 1`] = ` "Visual Tree": { "Comment": "style-fontWeight", "Offset": "0, 0, 0", - "Size": "791, 28", + "Size": "791, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2757,7 +2757,7 @@ exports[`TextInput Tests TextInputs can have caretHidden 1`] = ` "Visual Tree": { "Comment": "textinput-carethidden", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2913,7 +2913,7 @@ exports[`TextInput Tests TextInputs can have custom return key label, React Nati "Visual Tree": { "Comment": "textinput-return-React Native", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2991,7 +2991,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, done 1`] = "Visual Tree": { "Comment": "textinput-return-done", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3147,7 +3147,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, next 1`] = "Visual Tree": { "Comment": "textinput-return-next", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3225,7 +3225,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, none 1`] = "Visual Tree": { "Comment": "textinput-return-none", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3459,7 +3459,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, send 1`] = "Visual Tree": { "Comment": "textinput-return-send", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3615,7 +3615,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=0 "Visual Tree": { "Comment": "textinput-letterspacing-0", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3771,7 +3771,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9 "Visual Tree": { "Comment": "textinput-letterspacing-9", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4177,7 +4177,7 @@ exports[`TextInput Tests TextInputs can have inline images, drawable props not s "Visual Tree": { "Comment": "textinput-inline-images-3", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4255,7 +4255,7 @@ exports[`TextInput Tests TextInputs can have inline images, drawableLeft and dra "Visual Tree": { "Comment": "textinput-inline-images-2", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4333,7 +4333,7 @@ exports[`TextInput Tests TextInputs can have shadows 1`] = ` "Visual Tree": { "Comment": "textinput-shadow", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4410,7 +4410,7 @@ exports[`TextInput Tests TextInputs can have text decoration lines 1`] = ` "Visual Tree": { "Comment": "style-textDecorationLine", "Offset": "0, 0, 0", - "Size": "791, 29", + "Size": "791, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4487,7 +4487,7 @@ exports[`TextInput Tests TextInputs can have text shadows 1`] = ` "Visual Tree": { "Comment": "style-textShadow", "Offset": "0, 0, 0", - "Size": "791, 28", + "Size": "791, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4718,7 +4718,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with C "Visual Tree": { "Comment": "rewrite_clear_input", "Offset": "0, 0, 0", - "Size": "867, 10", + "Size": "867, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4793,7 +4793,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with N "Visual Tree": { "Comment": "rewrite_no_sp_input", "Offset": "0, 0, 0", - "Size": "916, 10", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4868,7 +4868,7 @@ exports[`TextInput Tests TextInputs can rewrite characters: Replace Space with U "Visual Tree": { "Comment": "rewrite_sp_underscore_input", "Offset": "0, 0, 0", - "Size": "892, 10", + "Size": "892, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5253,7 +5253,7 @@ exports[`TextInput Tests TextInputs have a custom background color 1`] = ` "Visual Tree": { "Comment": "textinput-custom-background-color", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5330,7 +5330,7 @@ exports[`TextInput Tests TextInputs have a custom highlight color 1`] = ` "Visual Tree": { "Comment": "textinput-custom-highlight-color", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5641,7 +5641,7 @@ exports[`TextInput Tests TextInputs have a default placeholder text color 1`] = "Visual Tree": { "Comment": "textinput-default-placeholder-color", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5718,7 +5718,7 @@ exports[`TextInput Tests TextInputs have a default text color 1`] = ` "Visual Tree": { "Comment": "textinput-default-color", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5796,7 +5796,7 @@ exports[`TextInput Tests TextInputs have a default underline color 1`] = ` "Visual Tree": { "Comment": "textinput-default-underline-color", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -5873,7 +5873,7 @@ exports[`TextInput Tests TextInputs support secure entry 1`] = ` "Visual Tree": { "Comment": "textinput-password", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -6041,17 +6041,17 @@ exports[`TextInput Tests TextInputs which have a searchbox role should also supp "Visual Tree": { "Comment": "textinput-searchbox", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 31", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp index 0041ca80582..16169eac4ac 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/CompositionViewComponentView.cpp @@ -528,10 +528,10 @@ facebook::react::RectangleEdges ComponentView::focusNudges() const noexcep Assert(m_componentHostingFocusVisual); - if (layoutMetrics.frame.origin.x < 0) { + if (layoutMetrics.frame.origin.x < m_componentHostingFocusVisual->m_layoutMetrics.frame.origin.x) { nudgeEdges.left = true; } - if (layoutMetrics.frame.origin.y < 0) { + if (layoutMetrics.frame.origin.y < m_componentHostingFocusVisual->m_layoutMetrics.frame.origin.y) { nudgeEdges.top = true; } if (layoutMetrics.frame.getMaxX() > m_componentHostingFocusVisual->m_layoutMetrics.frame.getMaxX()) { diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp index 8055894d2b2..0f4b8a966f8 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputComponentView.cpp @@ -1681,7 +1681,8 @@ void WindowsTextInputComponentView::DrawText() noexcept { } bool isZeroSized = - m_layoutMetrics.frame.size.width <= (m_layoutMetrics.contentInsets.left + m_layoutMetrics.contentInsets.right); + m_layoutMetrics.frame.size.width <= (m_layoutMetrics.contentInsets.left + m_layoutMetrics.contentInsets.right) || + m_layoutMetrics.frame.size.height <= (m_layoutMetrics.contentInsets.top + m_layoutMetrics.contentInsets.bottom); if (!m_drawingSurface || isZeroSized) return; diff --git a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp index 29e9f97120c..f8ce4e23712 100644 --- a/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp +++ b/vnext/Microsoft.ReactNative/Fabric/Composition/TextInput/WindowsTextInputShadowNode.cpp @@ -5,6 +5,7 @@ #include #include +#include #include #include #include @@ -185,6 +186,7 @@ AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(cons const auto &props = getConcreteProps(); AttributedString attributedString; + attributedString.setBaseTextAttributes(props.textAttributes); //[windows if (!props.placeholder.empty()) { auto textAttributes = TextAttributes::defaultTextAttributes(); @@ -203,7 +205,7 @@ AttributedString WindowsTextInputShadowNode::getPlaceholderAttributedString(cons } // windows] - return attributedString; + return ensurePlaceholderIfEmpty_DO_NOT_USE(attributedString); } #pragma mark - LayoutableShadowNode