Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Mitosis react-like textarea syntax does not work in angular

See original GitHub issue

I am interested in helping provide a fix!


Which generators are impacted?

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

Reproduction case

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,src%2Fapp%2Fapp.component.ts

Issue Analytics

  • State:open
  • Created a year ago
  • Comments:5 (5 by maintainers)

github_iconTop GitHub Comments

chadalencommented, Nov 4, 2022

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.

  Content of the textarea.
</textarea> “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 <textarea> and the end tag </textarea>”

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.

samijabercommented, Nov 8, 2022

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

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.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Issues · BuilderIO/mitosis - GitHub
Mitosis does not convert optional callbacks in angular to use @Output and ... Mitosis react-like textarea syntax does not work in angular bug...
Read more >
Textarea does not work in Angular but Input works fine
I am trying to create a directive for text area, where I can show the number of characters remaining and clear the whole...
Read more >
The Textarea element - HTML: HyperText Markup Language
This attribute enables you to place <textarea> elements anywhere within a document, not just as descendants of form elements. maxlength. The ...
Read more >
Angular textarea Directive - W3Schools
AngularJS holds the current state of all textarea elements. Textarea fields have the following states: $untouched The field has not been touched yet ......
Read more >
How to change the Content of a textarea using JavaScript
Method 1: This method uses id attribute of textarea with value property to change the content of <textarea> element. JavaScript code is ......
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Post

No results found

github_iconTop Related Hashnode Post

No results found