Проблема отказа от контроля - PullRequest
Новая
       126

Проблема отказа от контроля

0 голосов
/ 07 августа 2020

У меня возникла странная проблема при использовании Blazor Webassembly. У меня есть компонент с двумя текстовыми полями. По какой-то причине, если я ввожу что-нибудь в первое текстовое поле, а затем пытаюсь перейти ко второму текстовому полю или щелкнуть во втором текстовом поле, мне придется сделать это дважды. Как будто первая вкладка или клик не регистрируются. Поигравшись с этим, я смог минимально продублировать проблему. Проблема возникает, когда у меня есть привязка модели к элементу управления и я использую атрибут @ref.

Вот мой .cshtml файл: 

@inject IJSRuntime JsRuntime
@page "/"


<div>
    <input class="form-control" id="first-text-box" type="text" @ref="TextBoxControl" @bind="_model.Box1" />
</div>
<div>
    <input class="form-control" id="second-text-box" type="text" @bind="_model.Box2" />
</div>


@code {
    private ElementReference TextBoxControl { get; set; }
    private readonly BoxClass _model = new BoxClass();

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        await JsRuntime.InvokeVoidAsync("jsFunctions.focusElement", TextBoxControl);

        await base.OnAfterRenderAsync(firstRender);
    }
}

Вот focusElement javascript функция: 

window.jsFunctions = {
    focusElement: function(element) {
        element.focus();
    }
};

Наконец, вот сценарий проблемы, чтобы увидеть, как это происходит вживую: https://blazorfiddle.com/s/kph6msiv

Как я уже сказал , просто введите что-нибудь в первое текстовое поле, затем попробуйте перейти на вкладку или щелкнуть следующее текстовое поле, и вы увидите, что вам нужно сделать это дважды.

1 Ответ

1 голос
/ 07 августа 2020

Вы фокусируетесь каждый раз при рендеринге, что происходит при привязке данных Blazor, что происходит при выходе из элемента управления.

Вместо этого вызывайте свой JavsScript, только если firstRender равно true

...