Text field with empty value omits html props

[ahiyalala]

Describe the Bug

When a <Text /> field has an empty value, the styling that was intended for this element was omitted because the htmlProps were not applied to the DefaultEmptyFieldEditingComponentText whose rendering was only return <span>[No text in field]</span>

To Reproduce

Create a styling for the text element, for example:

.bg-red {
 background-color: red;
}

Apply CSS class in the <Text /> component:

<Text tag="p" className="bg-red" field={props.field.TextField} />

Where props.field.TextField is a Field<string> and is empty.

Here's a real life example, where the field Secondary Topic is empty in one, and populated on another

Expected Behavior

Styling should still appear even if the text field has an empty value.

Possible Fix

Ensure DefaultEmptyFieldEditingComponentText component would still apply the htmlProps

Provide environment information

• Sitecore Version: XM Cloud
• JSS Version: 22.1.4
• Browser Name and version: Edge/Chromium
• Operating System and version (desktop or mobile): Windows 11
• Link to your project (if available): N/A

[art-alexeyenko]

Thanks @ahiyalala for a clear scenario. I've added this to our team's backlog.