Hey guys,
I’m having issues with IonTextarea in my Ionic + Vue app. When I use it without a wrapper, it seems that the textarea expands beyond its limits. Everything below it isn’t clickable (like a submit button) and when I do click, I focus on the textarea.
<template>
// The label-placement appears to cause the problem
<IonTextarea label="Description" label-placement="floating"></IonTextarea>
// This button can't be clicked, because the textarea appears to lay on top of it
<IonButton color="primary" expand="block" v-on:click="handleSubmit">Submit</IonButton>
</template>
The issue appears to be caused by the label-placement attribute. Stacked and floating lead to this unwanted behavior. If I omit the attribute, everything works fine.
I found a solution to this problem, but it causes another one:
<template>
// This causes --padding-start and --pading-end to not work anymore for the textarea
<IonItem>
<IonTextarea label="Description" label-placement="floating"></IonTextarea>
<IonItem>
// This button can be clicked
<IonButton color="primary" expand="block" v-on:click="handleSubmit">Submit</IonButton>
</template>
For some reason when I wrap the textarea in an IonItem, padding-start and padding-end are not being applied anymore (which I especially notice because I apply a background-color).
Am I doing something wrong?
Thanks for the help!