[POS UI Extensions] TextArea shifting/inconsistent size between states when `rows` is set

[timvandam]

Please list the package(s) involved in the issue, and include the version you are using

@shopify/retail-ui-extensions@1.5.1
@shopify/retail-ui-extensions-react@1.5.1

Describe the bug ui issues

A minor ui issue: the size of the TextArea component changes depending on whether you are focused on not, and whether it has content or not. This only happens when the rows prop is set to something other than 1.

Additionally, TextArea seems to have a large vertical margin that other input components (e.g. TextField) do not have. This makes layouts containing both TextField and TextArea inconsistent.

Steps to reproduce the behavior:

1. Put TextArea and a TextField components in a POS UI Extension
2. Play around with the TextArea, and see the size changes, and the difference in vertical margin between TextArea and TextField

Expected behavior

I would expect the size of TextArea to stay consistent as long as the content does not change. Additionally, I would expect the same margin as TextField. Additional padding can always be added later on using the paddingVertical and paddingHorizontal props of the Stack component.

Screenshots

Additional context

[timvandam]

Some additional context: this seems to happen when working with stacks in some specific configuration. I have changed my layout setup and the text boxes are now always aligned to the top. I believe that the issue with <TextArea> is that it allows itself to grow to fill the containing element (similar to flex={1}) when focused, while this is not the behavior when not focused