[tuiTextfieldCleaner] and Storybook

[loxy]

Hi!

I'm using Storybook and have a problem with [tuiTextfieldCleaner]. In the application everything is working fine, but when running Storybook the input is not cleared (although the icon is there) and no error is thrown. Now I tried to debug that in Chrome to see where it is stuck, but I'm somehow lost. I don't even understand how the cleaner really works. When I look at code I just see:

@Directive({
    standalone: false,
    selector: '[tuiTextfieldCleaner]',
    providers: [tuiProvide(TUI_TEXTFIELD_CLEANER, TuiTextfieldCleanerDirective)],
})
export class TuiTextfieldCleanerDirective extends AbstractTuiController {
    @Input('tuiTextfieldCleaner')
    public cleaner = false;
}

So, I'm wondering how the cleaner works under the hood. I'd expect something like control.reset. But I don't find anything related. Can you point me to the code where the magic happens?

[waterplea]

Are you sure your Storybook has NG_EVENT_PLUGINS enabled? In old controls cleaner just sets input value to empty string, in new ones it focuses them, selects all content and sends document.execCommand to clear it so that it:

1. removes autofill styles in Safari in case you are clearing autofilled value, otherwise it gets stuck yellow in this cursed browser
2. ctrl+z/cmd+z has the ability to roll it back

[loxy]

I'm on Taiga UI 4.10 currently.

Are you talking about: https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand? (which is marked as deprecated in MDN)

And still, where is the code which is doing it?

Good hint with NG_EVENT_PLUGINS. It was only added in app but not Storybook. Unfortunately, it didn't changed anything.
And this is my code now:

@Component({
  selector: 'app-storybook',
  standalone: true,
  imports: [CommonModule, TuiButton, TuiInputModule, ReactiveFormsModule, TuiTextfieldControllerModule],
  providers: [NG_EVENT_PLUGINS],
  template: `
    <button tuiButton (click)="clicked.emit(testForm.controls.testValue.value)">Click Me</button>
    <form [formGroup]="testForm" [tuiTextfieldCleaner]="true">
      <tui-input formControlName="testValue">
        Type an email
        <input tuiTextfieldLegacy type="email" />
      </tui-input>
    </form>
  `,
  styleUrl: './storybook.component.scss',
})
export class StorybookComponent {
  clicked = output<string>();
  protected readonly testForm = new FormGroup({
    testValue: new FormControl('[email protected]'),
  });
}

[waterplea]

Yes, I'm talking about that one, it is deprecated but it's never going away, don't worry. To much of internet relies on it. NG_EVENT_PLUGINS have to be provided in the main injector when you bootstrap your app, you cannot put them into component providers. Here's the cleaner code for legacy controls:
https://github.com/taiga-family/taiga-ui/blob/main/projects/legacy/components/primitive-textfield/primitive-textfield.template.html#L90
It's not working without plugins because it has .stop modifier.

[loxy]

Yeah, this was the culprit. It works now. Just add to decorator:

applicationConfig({
   providers: [NG_EVENT_PLUGINS],
})

Thank you very much!