search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

Text Area with footer sizing race condition #8683

Open RSantosGIS opened 9 months ago

RSantosGIS commented 9 months ago

Check existing issues

Actual Behavior

The text area does not properly size to the vertical height in its container on initial render, but then will "snap" to the correct size once the user begins typing or a re-render event occurs. This only occurs for text areas with a footer

Per comments from @anveshmekala: This is an interesting race condition. We calculate height of the internal textarea el based on the height of the component host and footer. The calculation occurs once the component is rendered to leverage the dimensions correctly. From the above samples, it looks like the calibration method for height of textarea el is unable to access the full height of the component host which is causing the issue. It could be related to rendering order of parent component with calcite-text-area component or the calibration technique we use. This does qualify as a bug

Expected Behavior

If you set a text area to be 100% of the height of its container, then it should initialize to that height of the parent.

Reproduction Sample

documentation sample

Reproduction Steps

Please see our discussion at https://teams.microsoft.com/l/message/19:fd15b51dacd24e70895ec1218a54ae06@thread.skype/1706639520523?tenantId=aee6e3c9-711e-4c7c-bd27-04f2307db20d&groupId=56fae21a-9407-4943-859f-a9bfcf0bbad3&parentMessageId=1706639520523&teamName=Calcite%20Design%20System&channelName=Get%20Help%20-%20Development&createdTime=1706639520523

This includes a variety of videos of the bug on an in development version of ArcGIS Knowledge Studio.

Reproduction Version

2.1.0

Relevant Info

No response

Regression?

No response

Priority impact

p2 - want for current milestone

Impact

We can work around this by using a text area without a footer and attempting to recreate the footer elements using other Calcite components and CSS placement techniques. However that is definitely not ideal.

Calcite package

Esri team

ArcGIS Knowledge

RSantosGIS commented 9 months ago

We did find a workaround for the component. The work around involves watching until the component renders the shadow root, and then setting the textarea in the shadow root's block-size like so: image

RSantosGIS commented 9 months ago

This workaround is definitely not a good practice and is brittle, but it seems to work fine for now

jcfranco commented 8 months ago

@anveshmekala Can you help provide an estimate for this one?