How to cancel autofill for taiga inputs?

Sometimes browsers provide autofill for inputs. There is an attribute autocomplete="off" for native input fields. Howerver i have inputs fields form taiga UI library:

<tui-input
    formControlName="title"
    [tuiTextfieldCleaner]="true"
    [tuiTextfieldLabelOutside]="true"
    [tuiTextfieldSize]="'m'"
>
    enter text
</tui-input>

autocomplete="off" attribute doesnt work for tui-input. Please help me cancel autofill for tui-input.

I try to use autocomplete="off" for parent div. But is is doesnt work, i need decision namely for tui-input

Create a custom directive to handle this scenario.

autocomplete directive:

import { Directive, ElementRef, Input } from '@angular/core';

@Directive({
  selector: '[autoComplete]',
})
export class AutoCompleteDirective {
  @Input() autoComplete = 'off';
  constructor(private elementRef: ElementRef) {}

  ngAfterViewInit() {
    const input = this.elementRef.nativeElement.querySelector('input');
    input.setAttribute('autocomplete', this.autoComplete);
  }
}

html

<tui-root>
  <form class="b-form" [formGroup]="testForm">
    <tui-input
      autoComplete="off"
      formControlName="testValue"
      [tuiTextfieldCleaner]="true"
      [tuiTextfieldLabelOutside]="true"
      [tuiTextfieldSize]="'m'"
    >
      enter text
    </tui-input>
  </form>
</tui-root>

Option 2 define an input inside the tui-input with the autocomplete set to off

<tui-input formControlName="testValue2">
  Type an email
  <input tuiTextfield type="email" autocomplete="off" />
</tui-input>

Stackblitz Demo