calcite-text-area: width not calculated correctly

[AdelheidF]

Check existing issues

• I have checked for existing issues to avoid duplicates

Actual Behavior

Narrow shell area

Wide shell area

Expected Behavior

input and text-area right border always align vertically

Reproduction Sample

https://codepen.io/afreitag/pen/WNmXZPm

Reproduction Steps

Open codepen and look

Reproduction Version

2.3.0

Relevant Info

No response

Regression?

don't think so

Priority impact

p2 - want for current milestone

Impact

won't use text-area until this is fixed

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Map Viewer

[jcfranco]

@anveshmekala Can you take a look at the estimate and adjust if needed?

[anveshmekala]

@anveshmekala Can you take a look at the estimate and adjust if needed?

The current estimate looks good.

[macandcheese]

You can also drag the text-area to be wider than the width of it's parent. I'd expect it to only extend to the parent's extent. Not sure if this issue is the appropriate place but mentioning it here.

Screen.Recording.2024-03-21.at.5.20.09.PM.mov

[anveshmekala]

You can also drag the text-area to be wider than the width of it's parent. I'd expect it to only extend to the parent's extent. Not sure if this issue is the appropriate place but mentioning it here.

Thanks for bring this up. This is consistent with native <textarea/> element https://codepen.io/ANVESHMEKALA/pen/rNbmyjz. Workaround is to add max-width property on <textarea/> element inside shadowDOM of calcite-text-area to restrict the resizing behavior. We can provide this option via @prop may be. Thoughts?

[macandcheese]

Yeah, I generally do like to default to matching native functionality - but not sure if it is a benefit to a user here or it could be an improvement our component has there. Could also be a discussion for a separate issue if it's out of scope here.