[Blazor] InputText binding is not supported well with Shadow DOM elements · dotnet/aspnetcore#60885

(9 留言) (0 反應) (0 負責人)C# (37,933 star) (10,653 fork)batch import

area-blazorbughelp wanted

描述

Is there an existing issue for this?

I have searched the existing issues

Describe the bug

I use a web component library which create input elements within shadow DOM (shadowRoot property). Let's call it <super-input> I overrided InputText content with .

When using @bind on the value with oninput event, it doesn't work as well as the InputText or html input element. Characters could be sent weirdly depending the connection, and the use or websocket or no, and specially when the typing is fast.

I already digged into the problem and found a fix on my branch : https://github.com/Poppyto/aspnetcore/tree/poppyto/use-shadow-input-with-binding

The idea is to relay on event.composedPath().find(_=>true) instead of event.target when dealing with some events.

I would be happy to discuss about this bug

Expected Behavior

The typing must be smooth

Steps To Reproduce

No response

Exceptions (if any)

No response

.NET Version

Anything else?

No response

貢獻者指南

技術棧: csharp
領域: frontend
議題類型: bug
難度: 3
預計時間: half day
活動狀態: active
清晰度: clear
前置要求: Basic Blazor knowledgeShadow DOM conceptsEvent propagation understanding
新手友善度: 50
研究方向: The issue proposes a fix using event.composedPath() instead of event.target for Shadow DOM elements. A reference branch exists at https://github.com/Poppyto/aspnetcore/tree/poppyto/use shadow input with binding. Investigate the Blazor input binding mechanism in aspnetcore, likely in files related to event handling (e.g., WebEvent.cs or InputText.cs). Review the proposed changes, test with the provided scenario, and ensure no regressions in standard input binding.