Under certain common formatting conditions text fields will expand outside of their container and can even push other content off of the page. We found the cause and a workaround.
<ui:VisualElement name="top-bar" style="flex-direction: row; align-items: center;">
<ui:TextField picking-mode="Ignore" label="Text Field" value="filler text" />
</ui:VisualElement>
A simple workaround is to place all TextFields inside of a Visual Element. If you are like me and extending the TextField control, you can just extend VisualElement wrap TextField through composition instead of extending TextField directly.
<ui:VisualElement name="top-bar" style="flex-direction: row; align-items: center;">
<ui:VisualElement name="work-around" style="flex-grow: 1;">
<ui:TextField picking-mode="Ignore" label="Text Field" value="filler text" />
</ui:VisualElement>
</ui:VisualElement
It seems that the cause is that the size of the TextInput is the size of the TextField. It doesn’t take into account the size of the Label or any other siblings of the TextInput.