super_editor icon indicating copy to clipboard operation
super_editor copied to clipboard

[SuperTextField][Android][iOS] - Fix golden test for hint padding

Open matthew-carroll opened this issue 1 year ago • 0 comments

In https://github.com/superlistapp/super_editor/pull/1803 I added a golden test that attempts to show padding around the hint in desktop, Android, and iOS text fields. It works fine for desktop, but the hint doesn't show up at all for mobile. Also, the hint displays fine in a real app, but not in a test.

I spent a while investigating this issue. I couldn't figure out which difference between the desktop field and the mobile fields would result in the difference.

All the text fields use a custom widget called FillWidthIfConstrained. This widget helps to size its children in three scenarios that we have in text fields. One of those three scenarios is for a single-line text field where the text isn't long enough to fill the width of the field. In this case FillWidthIfConstrained will force the text to fill the available viewport width so that we can align to the left, center, and right. To force the text to be as wide as the viewport, FillWidthIfConstrained attempts to lookup an ancestor Scrollable, get its RenderBox and then query its width. This seems to work fine in real apps. However, when running tests, the Scrollable's RenderObject is null, and therefore we can't query a width. This might be an issue with Flutter's test implementation, or it might be a strange side effect from some part of our code.

Another notable difference between the desktop text field and the mobile text fields is that the mobile text fields include a text line limiter widget, which runs layout on its subtree, queries the text metrics from the subtree, and then lays it out again based on the desired min and max lines. For some reason, we didn't add this text line limiter to the desktop field, so I filed this: https://github.com/superlistapp/super_editor/issues/1802 - when adding the text line limiter to the desktop, it might reveal why the mobile text fields are running into strange measurement issues.

The issue with showing the hint doesn't appear to be specific to the hint. It's really all of the overlays and underlays that end up laying out with a width of 0.0 because the widget tree within the text field's scrollview is ending up with a width of 0.0. That's the root problem that needs to be solved.

What we want to achieve is the ability to render golden tests for all platforms, which paints the hint text along with different levels of padding.

matthew-carroll avatar Jan 15 '24 04:01 matthew-carroll