Reports

In 2025:

i created a codesandbox with stenciljs to emulate the autofill with all the solutions from here https://codesandbox.io/p/devbox/stencil-component-custom-autofill-detection-k4474k

I used empty css animations:

@keyframes onAutoFillStart {
    from {/**/}
    to {/**/}
}

@keyframes onAutoFillCancel {
    from {/**/}
    to {/**/}
}

To handle the animation:

input:-webkit-autofill {
  animation: onAutoFillStart 1s;
  /* remove blue chrome background */
  -webkit-background-clip: text;
}

input:not(:-webkit-autofill) {
    animation: onAutoFillCancel 1s;
}

And detect the css animation in js:

handleAutofill = (event) => {
    if (event.animationName === 'onAutoFillStart') {
      this.isAutofilled = true;
    } else {
      this.isAutofilled = false;
    }
};

<input 
    type="search" 
    name={this.name} 
    value={this.value} 
    onAnimationStart={this.handleAutofill}
    />

Thanks for the attention

79401350