Open Kevin-Andrew opened 1 year ago
If you have a , which needs to get its data from a method, not a bindable property, and we also want to save any changes made by the user to the text in that <textarea>, one may think to write the following code:</p> <pre><code><textarea rows="3" style="width: 350px;" @onchange="Text_OnChange">@GetData(someParameter)</textarea></code></pre> <p>That code will initialize the <textarea> with the string from the <code>GetData(someParameter)</code> method, which is placed between the opening and closing tag of the <textarea>. This is the recommended practice for initializing a <textarea> in HTML. What I mean by that is, according to <a rel="noreferrer nofollow" target="_blank" href="https://www.w3schools.com/tags/tag_textarea.asp">https://www.w3schools.com/tags/tag_textarea.asp</a>, a <textarea> <strong>does not</strong>, for example, have/support a <code>value</code> attribute like other <code><input></code> elements.</p> <p>Then, because we also want to get any changes that the user may make to the text, we wire up the <code>onchange</code> event. This should conceptually and effectively give us two-way binding of the <textarea>. In the first example of the following documentation, <a rel="noreferrer nofollow" target="_blank" href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0">https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-6.0</a>, it says the same thing:</p> <blockquote> <p>As a demonstration of how data binding composes in HTML, the following example binds the InputValue property to the second <input> element's value and onchange attributes (<a rel="noreferrer nofollow" target="_blank" href="https://developer.mozilla.org/docs/Web/API/HTMLElement/change_event">change</a>). The second <input> element in the following example is a concept demonstration and isn't meant to suggest how you should bind data in Razor components. <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211207126-b56bef72-421a-4a3f-b0a0-367cd853378b.png" alt="image" /></p> </blockquote> <p>Again, the reason why we don't simply just use a <code>@bind</code> attribute on the <textarea> is because we don't have a bindable property. The data is coming from a method.</p> <p>Initially, this code appears to work. However, in the following <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Kevin-Andrew/BlazorTextAreaNotUpdating">complete example</a>, it does not work as expected. You can download the example from the repo, but I'll also outline and include most of the details and code directly here too for others to quickly see and read.</p> <p>Create a new solution/project using either the Blazor WebAssembly App or Blazor Server App project templates: <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211207595-354659d2-c33d-4c94-9c69-4ee1811cf4b1.png" alt="image" /> In the <code>Index.razor</code> page, replace the code with the following:</p> <pre><code>@page "/" <PageTitle>Index</PageTitle> <h1>Instructions</h1> <br/> <ol> <li>Click one of the links below. A textarea and text box will be rendered with some initial text.</li> <li>Click back and forth between each link. Notice that both textarea and text box will be populated with, and change between, the initial/default values assigned to each link. </li> <li>Click the Method 1 link, then change the value of the text in the <b>textarea</b>.</li> <li>Then click the Method 2 link. Notice that the text in the textarea did not get updated/changed to the Method 2 text, as the text box did. This doesn't seem like correct behavior. </li> </ol> <a href="./?method=method1">Method 1</a> <br /> <a href="./?method=method2">Method 2</a> @if (!String.IsNullOrWhiteSpace(Method)) { <form> @* In HTML, according to https://www.w3schools.com/tags/tag_textarea.asp, the text that is to be displayed in the textarea should be placed between the opening and closing <textarea> tags. *@ <textarea rows="3" style="width: 350px;" @onchange="Text_OnChange">@GetData(Method)</textarea> <br /> <input type="text" style="width: 350px;" value="@GetData(Method)" @onchange="Text_OnChange" /> <br/> <br/> @* If, however, we make the <textarea> similar to the <input type="text"> by specifying a 'value' attribute, then the behavior matches that of the <input type="text">, as desired. However, according to https://www.w3schools.com/tags/tag_textarea.asp, the <textarea> doesn't have/support a 'value' attribute. (Also, while this workaround happens to work in this simple sample, I have another project where this workaround doesn't fix the problem.) *@ @* Uncomment the following code to text this workaround. *@ @*<textarea rows="3" style="width: 350px;" value="@GetData(Method)" @onchange="Text_OnChange"></textarea>*@ </form> } @code { private Dictionary<string, string> cache = new Dictionary<string, string> { { "method1", "Initial value for method 1" }, { "method2", "Method 2 initial value." }, }; [Parameter, SupplyParameterFromQuery(Name = "method")] public string? Method { get; set; } protected override Task OnInitializedAsync() { return base.OnInitializedAsync(); } protected override void OnParametersSet() { base.OnParametersSet(); } private void Text_OnChange(ChangeEventArgs e) { Console.WriteLine($"Text_OnChange: {e.Value}"); if (Method != null && cache.ContainsKey(Method)) { cache[Method] = (string)e.Value!; } } private string GetData(string key) { Console.WriteLine($"Data for {key} is: {cache[key]}"); return cache[key]; } }</code></pre> <p>Run/debug the app and follow the instructions by clicking on both links to see the initial data: <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211207707-1c61b969-5237-4fc8-b798-faf44c53f2f9.png" alt="image" /> and <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211207723-53cd2b5c-eeea-442f-bd71-66358f0265db.png" alt="image" /></p> <p>Then change the text in the <textarea> of the first link: <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211207932-2aa10cb6-2c09-43ca-9c4a-4083412995ba.png" alt="image" /></p> <p>Finally, click on the "Method 2" link and notice that the text in the <textarea> is not updated: <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211208137-39bfef35-b87d-42dd-af84-8e7937e5fa22.png" alt="image" /></p> <p>As you see in the example, I have also include an <code><input type="text"></code> element. With an <code><input type="text"></code> element, the proper way to set/initialize the text value is to set the <code>value</code> attribute. So we can accomplish what we need to do, that is, conceptually/effectively perform two-way binding by setting the <code>value</code> attribute to the result of the <code>GetData(someParameter)</code> method and wiring up and handling the <code>@onchange</code> event.</p> <p>If you noticed in the last screen shot, the text in the regular text box was correctly updated. So why wasn't the <textarea>? We can take it a step further and have the user change the text in the regular text box too, then click back and forth between the two links and the text in the text box is always updated correctly: <img referrerpolicy="no-referrer" src="https://user-images.githubusercontent.com/22459191/211208588-96b23dfd-4259-4742-b75a-424819f06116.png" alt="image" /></p> <p>So why is the behavior between those to, very similar elements, different?</p> <p>Doing more tests on my own, I also discovered that if you change the <textarea> to instead use/have a <code>value</code> attribute, which again, according to the HTML specification is not a valid attribute, then the behavior is as expected and matches that of the regular <code><input type="text"></code> element. At least, in this simple example, that workaround yields the correct/desired behavior. However, in my real project, that workaround still doesn't give the correct/expected behavior.</p> <p>I have found and read the following: <a rel="noreferrer nofollow" target="_blank" href="https://github.com/dotnet/aspnetcore/issues/45797">https://github.com/dotnet/aspnetcore/issues/45797</a> I have also read the following, that is new in .NET 7. <a rel="noreferrer nofollow" target="_blank" href="https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-7.0#use-bindgetbindset-modifiers-and-avoid-event-handlers-for-two-way-data-binding">https://learn.microsoft.com/en-us/aspnet/core/blazor/components/data-binding?view=aspnetcore-7.0#use-bindgetbindset-modifiers-and-avoid-event-handlers-for-two-way-data-binding</a> But in my example, I'm not trying to do. Specifically, I am not attempting to modify the value that the user enters and expect Blazor to render that modified value.</p> <p>I have not tried the new <code>@bind:get/@bind:set</code> modifiers available in .NET 7 to know whether or not it would fix my problem. But if the new <code>@bind:get</code> only supports binding to a C# property, then no, that won't solve my problem because I need to pass in a parameter to a method.</p> <h3>Expected Behavior</h3> <p>Having said all of that, I have worked around all of the issues, but I wanted to report this nonetheless and at least try to get an answer to the following: Why, in the provided example code, is there a behavior difference between a <textarea> that is written as:</p> <pre><code><textarea rows="3" style="width: 350px;" @onchange="Text_OnChange">@GetData(Method)</textarea></code></pre> <p>versus being written as:</p> <pre><code><textarea rows="3" style="width: 350px;" value="@GetData(Method)" @onchange="Text_OnChange"></textarea></code></pre> <p>To me, the second one, that uses the <code>value</code> attribute, shouldn't even be allowed. But at a minimum, isn't it a bug that those two behave differently?</p> <h3>Steps To Reproduce</h3> <p><a rel="noreferrer nofollow" target="_blank" href="https://github.com/Kevin-Andrew/BlazorTextAreaNotUpdating">https://github.com/Kevin-Andrew/BlazorTextAreaNotUpdating</a></p> <h3>Exceptions (if any)</h3> <p><em>No response</em></p> <h3>.NET Version</h3> <p>.NET 6</p> <h3>Anything else?</h3> <p><em>No response</em></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/SteveSandersonMS"><img src="https://avatars.githubusercontent.com/u/1101362?v=4" />SteveSandersonMS</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thanks for reporting this, @Kevin-Andrew. I think this whole issue comes down to the fact that assigning <code>someTextArea.textContent</code> stops changing the UI once the user has edited the textarea. You can reproduce this in a single line of pure JS without involving Blazor, e.g.: <a href="https://jsfiddle.net/rocd8qhp/">https://jsfiddle.net/rocd8qhp/</a></p> <p>I agree that it would be helpful for Blazor to work around this internally. We could do so by special-casing <code>textarea</code> elements in <code>BrowserRenderer.ts</code> so that, after assigning <code>.textContent</code> to any node inside a <code>textarea</code>, we also assign <code>textArea.value = textArea.textContent</code>. That would also fix things if the content is a compound value (e.g., <code><textarea>Some text @withAVariable</textarea></code>). Maybe there are other solutions to consider too.</p> <h3>Workaround</h3> <p>In the meantime I recommend you use the <code>value</code> attribute instead. This will always produce the correct behavior when rendering interactively, because Blazor assigns the textarea's value attribute as being a DOM element <em>property</em> rather than an HTML attribute. It will not produce the expected output when prerendering, so if you want to cover all bases, consider doing this:</p> <pre><code class="language-html"><textarea value="@someValue">@someValue</textarea></code></pre> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>Thanks for contacting us.</p> <p>We're moving this issue to the <code>.NET 8 Planning</code> milestone for future evaluation / consideration. We would like to keep this around to collect more feedback, which can help us with prioritizing this work. We will re-evaluate this issue, during our next planning meeting(s). If we later determine, that the issue has no community involvement, or it's very rare and low-impact issue, we will close it - so that the team can focus on more important and high impact issues. To learn more about what to expect next and how this issue will be handled you can read more about our triage process <a href="https://github.com/dotnet/aspnetcore/blob/main/docs/TriageProcess.md">here</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our <a href="https://github.com/dotnet/aspnetcore/blob/main/docs/TriageProcess.md">Triage Process</a>.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/Kevin-Andrew"><img src="https://avatars.githubusercontent.com/u/22459191?v=4" />Kevin-Andrew</a> commented <strong> 1 year ago</strong> </div> <div class="markdown-body"> <p>@SteveSandersonMS, I'm a bit confused by your reply. Specifically, your mentioning and use of <code>someTextArea.textContent</code> and your provided JSFiddle. What I mean by that, is according to the specifications <a href="https://www.w3schools.com/jsref/dom_obj_textarea.asp">here</a> and <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLTextAreaElement">here</a>, there is no documentation that suggests using <code>textContent</code> when it comes to programmatically changing the <strong>value</strong> of a <code><textarea></code>.</p> <p>Doing an Internet search for "javascript set textarea text" (without the quotes), in all search engines, the first result is to: <a href="https://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript">https://stackoverflow.com/questions/1642447/how-to-change-the-content-of-a-textarea-with-javascript</a>, which was posted over 13 years ago. And again, even in it, there is no mention of using a <code>textContent</code> property on the <code><textarea></code> in JavaScript.</p> <p>Instead, when using JavaScript, you are supposed to use the <code>value</code> property. I have taken your JSFiddle and modified it to show the correct, working example: <a href="https://jsfiddle.net/dgtaz1n7/">https://jsfiddle.net/dgtaz1n7/</a></p> <p>Therefore, I would not consider your example to be an accurate representation of the problem and try to blame the problem on the web browser. In my opinion, you're not using the right tool for the job. So of course it's not going to function correctly.</p> <p>There appears to be a misunderstanding around the <code><textarea></code> element. With a <code><textarea></code>, there is a difference between the value seen on the screen and what the initial value is in the DOM. With a <code><textarea></code>, there is effectively an extra property, <code>defaultValue</code>: <a href="https://www.w3schools.com/jsref/prop_textarea_defaultvalue.asp">https://www.w3schools.com/jsref/prop_textarea_defaultvalue.asp</a></p> <p>When Blazor updates the DOM by changing the text between the tags of a <code><textarea></code>, by using <code>.textContent</code> or whatever, to a web browser, it is only changing the <code>defautlValue</code>, not the <code>value</code> which is what is currently displayed on the screen. And let's be honest, the intent of every developer, when using Blazor to update the text of a <code><textarea></code> is to have that updated text be displayed on the screen, not the underlying default value in the DOM.</p> <p>So while the use of <code>.textContent</code> may work for other elements, something else needs to be done with a <code><textarea></code> to be able to get the developer's intent, by default, of having the value displayed on the screen of a <code><textarea></code> be updated. If the developer truly wants to set the <code>defaultValue</code> of a <code><textarea></code>, perhaps Blazor can offer some special case way of doing that.</p> <p>I appreciate you taking the time that you have thus far. But I really hope you give this more consideration. At a minimum, this should be documented to try and clear up that misunderstanding and explain the difference between the <code>defaultValue</code> versus the <code>value</code> seen on screen, and how to change each of them using Blazor.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/ghost"><img src="https://avatars.githubusercontent.com/u/10137?v=4" />ghost</a> commented <strong> 11 months ago</strong> </div> <div class="markdown-body"> <p>We've moved this issue to the Backlog milestone. This means that it is not going to be worked on for the coming release. We will reassess the backlog following the current release and consider this item at that time. To learn more about our issue management process and to have better expectation regarding different types of issues you can read our <a href="https://github.com/dotnet/aspnetcore/blob/main/docs/TriageProcess.md">Triage Process</a>.</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>
Is there an existing issue for this?
Describe the bug
If you have a