Additional Blazor ElementReference patches (#13853)

aspnetcore/blazor/components.md

@@ -517,9 +517,10 @@ Component references provide a way to reference a component instance so that you
 
 * Add an [@ref](xref:mvc/views/razor#ref) attribute to the child component.
 * Define a field with the same type as the child component.
+* Provide the `@ref:suppressField` parameter, which suppresses backing field generation. For more information, see [Removing automatic backing field support for @ref in 3.0.0-preview9](https://github.com/aspnet/Announcements/issues/381).
 
 ```cshtml
-<MyLoginDialog @ref="loginDialog" ... />
+<MyLoginDialog @ref="loginDialog" @ref:suppressField ... />
 
 @code {
     private MyLoginDialog loginDialog;

aspnetcore/blazor/javascript-interop.md

@@ -119,11 +119,12 @@ Capture references to HTML elements in a component using the following approach:
 
 * Add an `@ref` attribute to the HTML element.
 * Define a field of type `ElementReference` whose name matches the value of the `@ref` attribute.
+* Provide the `@ref:suppressField` parameter, which suppresses backing field generation. For more information, see [Removing automatic backing field support for @ref in 3.0.0-preview9](https://github.com/aspnet/Announcements/issues/381).
 
 The following example shows capturing a reference to the `username` `<input>` element:
 
 ```cshtml
-<input @ref="username" ... />
+<input @ref="username" @ref:suppressField ... />
 
 @code {
     ElementReference username;
@@ -152,7 +153,7 @@ Use `IJSRuntime.InvokeAsync<T>` and call `exampleJsFunctions.focusElement` with
 ```cshtml
 @inject IJSRuntime JSRuntime
 
-<input @ref="username" />
+<input @ref="username" @ref:suppressField />
 <button @onclick="SetFocus">Set focus on username</button>
 
 @code {
@@ -182,7 +183,7 @@ The method is called directly on the object. The following example assumes that
 @inject IJSRuntime JSRuntime
 @using JsInteropClasses
 
-<input @ref="username" />
+<input @ref="username" @ref:suppressField />
 <button @onclick="SetFocus">Set focus on username</button>
 
 @code {

aspnetcore/blazor/javascript-interop/samples_snapshot/component1.razor

@@ -4,6 +4,8 @@
 <button @onclick="SetFocus">Set focus on username</button>
 
 @code {
+    private ElementReference username;
+
     public async void SetFocus()
     {
         await JSRuntime.InvokeAsync<object>(

aspnetcore/blazor/javascript-interop/samples_snapshot/component2.razor

@@ -5,6 +5,8 @@
 <button @onclick="SetFocus">Set focus on username</button>
 
 @code {
+    private ElementReference username;
+
     public async Task SetFocus()
     {
         await username.Focus(JSRuntime);

aspnetcore/includes/blazor-prerendering.md

@@ -6,10 +6,10 @@ To delay JavaScript interop calls until after the connection with the browser is
 @using Microsoft.JSInterop
 @inject IJSRuntime JSRuntime
 
-<input @ref="myInput" value="Value set during render" />
+<input @ref="myInput" @ref:suppressField value="Value set during render" />
 
 @code {
-    private ElementRef myInput;
+    private ElementReference myInput;
 
     protected override void OnAfterRender()
     {
@@ -39,12 +39,12 @@ Where `JSRuntime.InvokeAsync` is called, `ElementRef` is only used in `OnAfterRe
 
 <p>
     Set value via JS interop call:
-    <input id="val-set-by-interop" @ref="myElem" />
+    <input id="val-set-by-interop" @ref="myElem" @ref:suppressField />
 </p>
 
 @code {
     private string infoFromJs;
-    private ElementRef myElem;
+    private ElementReference myElem;
 
     protected override async Task OnAfterRenderAsync()
     {