Popover miscalculates height when using a multiline TextField

[mrcthms]

Issue summary

A Popover will explicitly set the height on the overlay, which is calculated based on the contents of the Popover. However, when the contents of the Popover include a TextField component, which has a numerical multiline prop, the height of the Popover gets calculated and set incorrectly.

Expected behavior

The Popover should correctly calculate the height of the contents.

Actual behavior

It calculates it incorrectly – it uses the default height value of the TextField.

Steps to reproduce the problem

1. Create a Popover with a multiline Textfield in its contents
2. Observe the Popover being cut off.

Reduced test case

https://codesandbox.io/s/optimistic-water-4fgqj?file=/App.js

Specifications

• Are you using the React components? (Y):
• Polaris version number: 7.2.0
• Browser: Chrome
• Device: MacBook
• Operating System: OSX

👋 Thanks for opening your first issue. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines.

[melaniedamilig]

Reopening the issue because it seems like it resurfaced recently (noticed on v10.34.0). It doesn't happen very consistently, but most times, the popover gets cut off and won't resize properly until you write something in the TextField

(codesandbox)

Specifications

• Are you using the React components? Yes
• Polaris version number: 10.34.0
• Browser: Chrome
• Device: MacBook
• Operating System: Ventura 13.3.1

[dGoligorsky]

@martenbjork has this pr for the polaris popover component to update its height if style attributes are changed.

[martenbjork]

Closing again, since I think we fixed the root cause in #8983. (However, there are some other problems with the TextField's height that should be solved as well...)