Cannot focus an input right after enabling it

オープン
  • 何か問題がありますか？
#3,772 コメント 4 件 リアクション 1 件 担当者 1 名 GitHub で見る

メンテナーはふだん 1 日以内に返信

@alicewriteswrongs がすでに取り組んでいます。

2022年10月27日 から。

評価

この issue はまだ評価されていません。

説明

Bug: Validated

Stencil version:

 @stencil/[email protected]

Current behavior:
We have a wrapper around an HTML <input> , essentially this (most of the implementation elided for brevity):

export class WrapperTextInput  {
  @Prop({ mutable: true }) value: string;
  @Prop() readonly disabled: boolean = false;
  render() {
    return (
      <Host role="textbox" contenteditable="true">
        <div>
            <input type="text" value={this.value} disabled={this.disabled}></input>
        </div>
      </Host>
    );
  }

Now let's say the WrapperTextInput is disabled, and you run the following code:

wrapperTextInput.disabled= false;
wrapperTextInput.focus();

The call to focus() does not work. The component does not receive focus.
The following is a workaround:

wrapperTextInput.disabled= false;
setTimeout(() => wrapperTextInput.focus(), 50);

This is surprising to users of our components, considering a native <input> handles this without the need for a delay. This is even more awkward in React, as users expect a change in properties to be reflected in the DOM by the time the next useEffect runs, for instance.
I assume this workaround works because it gives the component time to render in its non-disabled state so it can be focused. Does this analysis make sense?

Expected behavior:
It should be possible to focus the component right after setting the disabled property to true.

Repro steps:
Repro here: https://github.com/asik/stencil-focus-issue-repro

You'll be able to see that the native input receives focus, but not the one wrapped in a stencil component.
image
(Clicked the Toggle native button, focus is given to the native input)

image
(Clicked the Toggle Stencil button, focus is not given to the stencil component.)

Other information:
Somewhat related https://github.com/ionic-team/stencil/issues/3246 - although here, it's about the user of a StencilJS component, using it as a black box, so they could not leverage its lifecycle methods like componentDidRender.

主要言語
TypeScript
スター
13.2k
フォーク
865
平均マージ
2日 16時間
マージ済み PR（30日）
29

環境構築

はじめの一歩

  1. issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。
  2. 着手することを issue にコメントします — 二人が同じ作業をするのを防げます。
  3. リポジトリをフォークし、ブランチを切って変更します。
  4. issue 番号を参照したプルリクエストを送ります。

stenciljs/core のほかの issue

stenciljs/core の issue をすべて見る

似ている issue

TypeScript の issue をもっと見る

新しい issue をメールで受け取る

初心者向けの GitHub issue を短くまとめたダイジェスト。