Mitosis react-like textarea syntax does not work in angular

[cadamsdev]

I am interested in helping provide a fix!

Yes

Which generators are impacted?

• [ ] All
• [X] Angular
• [ ] HTML
• [ ] Qwik
• [ ] React
• [ ] React-Native
• [ ] Solid
• [ ] Stencil
• [ ] Svelte
• [ ] Vue
• [ ] Web components

Reproduction case

https://mitosis.builder.io/?outputTab=IYOw5grgNsBOQ%3D%3D%3D&code=JYWwDg9gTgLgBAbzgVwM4FMDKMCGN1wC%2BcAZlBCHAEQACARssADYAm6UAdMBAPQjAwIqYKioBuAFAT0AD0iw4bEjmRN4JZADsAxjG6a4AWQCeAYQqRN6TTAAUASkQS4cKOhjIoB285dwAPPgyuG44cABuOEzI6AC8AOT4qDDxcDwAfL72koRAA%3D%3D

Expected Behaviour

When using the react-like syntax to set the value of a textarea e.g

<textarea value='test' />

Mitosis converts this into the following angular code

<textarea value="test"></textarea>

Instead mitosis should convert this into one of the following syntaxes which works in angular.

<textarea [value]="'test'"></textarea>
<textarea [(ngModel)]="name"></textarea>

Actual Behaviour

<textarea value="test"></textarea>

does not show "test" inside the textarea in angular.

Additional Information

See stackblitz https://stackblitz.com/edit/angular-ivy-zar36q?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

[samijaber]

Confused why this doesn't work in Angular. Can you link to Angular docs that explain? isn't <textarea value="test"></textarea> valid HTML?

[cadamsdev]

Confused why this doesn't work in Angular. Can you link to Angular docs that explain? isn't <textarea value="test"></textarea> valid HTML?

From what I see in regular html the text goes between the opening and closing textarea tag. That tag doesn't have a "value" attribute like input does.

<textarea>
  Content of the textarea.
</textarea>

https://www.w3schools.com/react/react_forms.asp "The textarea element in React is slightly different from ordinary HTML" "In HTML the value of a textarea was the text between the start tag and the end tag "

I did link a stackblitz that shows the problem. Though if you use property binding in angular with the value attribute it does work..

<textarea [value]="'test'"></textarea>

I'll look around see if I can find any better docs though.

[samijaber]

Oh, in that case, that won't work in any output other than React either. So it don't make sense to code it this way in the Mitosis code to begin with.

The better approach might be to:

• remove value as a valid type for textarea in JSX Mitosis types
• write <textarea>{value}</textarea> in Mitosis
• change the react generator so that it takes the children content of textarea and moves that to the value prop of textarea

[cadamsdev]

Oh, in that case, that won't work in any output other than React either. So it don't make sense to code it this way in the Mitosis code to begin with.

The better approach might be to:

• remove value as a valid type for textarea in JSX Mitosis types
• write <textarea>{value}</textarea> in Mitosis
• change the react generator so that it takes the children content of textarea and moves that to the value prop of textarea

I know if you write it like this in angular

<textarea>{value}</textarea>

It'll preserve white spaces so if you indent your code you're gonna see white spaces in front of the value. (Which is probably not what you want) I just updated the stack blitz to show that https://stackblitz.com/edit/angular-ivy-zar36q?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

Though with property binding or two-way binding this is not a problem.

<textarea [value]="'test'"></textarea>
<textarea [(ngModel)]="name"></textarea>

[samijaber]

Ok, we'd need to put together a list of how each framework handles textarea values to best decide what to do:

• React: value goes into value prop: https://svelte.dev/tutorial/textarea-inputs
• Angular: [value] or [(ngModel)]
• Svelte: bind:value https://svelte.dev/tutorial/textarea-inputs
• SolidJS: unsure
• Qwik: unsure
• Vue: it seems like we also have a :value binding here: https://vuejs.org/guide/essentials/forms.html

Once this list is complete we can figure out the best thing to do.

It does seem like textarea's value is a special case in almost all modern web frameworks, so it might make the most sense to allow a value field in Mitosis types, and make sure to give it a special mapping in each framework as expected.

[relliv]

@samijaber In angular [ngModel] (one-way) or [(ngModel)] (two-way) is required for almost all input types to work consistently. We need to consider all input cases.