Cannot focus an input right after enabling it

Aperta
  • Qualcosa non va?
#3,772 4 commenti 1 reazione 1 assegnatario Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

@alicewriteswrongs ci sta già lavorando.

Dal 27/10/2022.

Valutazione

Questa issue non è ancora stata valutata.

Descrizione

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.

Lingua principale
TypeScript
Stelle
13.2k
Fork
865
Merge medio
2g 16h
PR unite (30g)
29

Preparare l'ambiente

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di stenciljs/core

Tutte le issue di stenciljs/core

Issue simili

Altre issue su TypeScript

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.