Add guard check for cleared closest DOM element (#24707)

* Add guard check for cleared closest DOM element

* Update src/Components/Web.JS/src/Rendering/BrowserRenderer.ts

Co-authored-by: Steve Sanderson <[email protected]>

Co-authored-by: Steve Sanderson <[email protected]>

Author: captainsafia

src/Components/Web.JS/dist/Release/blazor.server.js

@@ -58,7 +58,7 @@ export class BrowserRenderer {
       }
     }
 
-    const ownerDocument = getClosestDomElement(element).ownerDocument;
+    const ownerDocument = getClosestDomElement(element)?.ownerDocument;
     const activeElementBefore = ownerDocument && ownerDocument.activeElement;
 
     this.applyEdits(batch, componentId, element, 0, edits, referenceFrames);

src/Components/Web.JS/dist/Release/blazor.webassembly.js

@@ -668,5 +668,20 @@ public void CanPatchRenderTreeToMatchLatestDOMState()
                     && completeLIs[0].FindElement(By.CssSelector(".item-isdone")).Selected;
             });
         }
+
+        [Fact]
+        public void CanHandleClearedChild()
+        {
+            var appElement = Browser.MountTestComponent<ContentEditable>();
+            var input = appElement.FindElement(By.Id("editable-div"));
+            var clickable = appElement.FindElement(By.Id("clickable"));
+
+            input.Clear();
+            clickable.Click();
+
+            var log = Browser.Manage().Logs.GetLog(LogType.Browser);
+            Assert.DoesNotContain(log, entry => entry.Level == LogLevel.Severe);
+            Browser.Equal("", () => input.Text);
+        } 
     }
 }

src/Components/Web.JS/src/Rendering/BrowserRenderer.ts

@@ -0,0 +1,17 @@
+@using BasicTestApp.FormsTest
+
+<h3 id="clickable">ContentEditable</h3>
+
+<div contenteditable="true" style="border: 1px solid gray;" id="editable-div" @onblur="HandleBlur">
+    <EditableText Content="@content"></EditableText>
+</div>
+
+@code {
+    public string content = "";
+
+    private async Task HandleBlur()
+    {
+        await Task.Delay(1000);
+        Console.WriteLine("Handle blur...");
+    }
+}

src/Components/test/E2ETest/Tests/ComponentRenderingTest.cs

@@ -0,0 +1,8 @@
+This is the default content.
+
+@Content
+
+@code {
+    [Parameter]
+    public string Content { get; set; }
+}

src/Components/test/testassets/BasicTestApp/ContentEditable.razor

@@ -86,6 +86,7 @@
         <option value="BasicTestApp.VirtualizationComponent">Virtualization</option>
         <option value="BasicTestApp.SelectVariantsComponent">Select with component options</option>
         <option value="BasicTestApp.ToggleEventComponent">Toggle Event</option>
+        <option value="BasicTestApp.ContentEditable">Content-editable</option>
     </select>
 
     <span id="runtime-info"><code><tt>@System.Runtime.InteropServices.RuntimeInformation.FrameworkDescription</tt></code></span>