taiga-family/maskito

๐Ÿš€ - in Angular Maskito should not be applied at all if null passed to input

Closed this issue ยท 0 comments

Which package(s) are relevant/related to the feature request?

No response

Description

Currently wanted to create a kustom component with build in support for maskito in this type of manner:

<mat-form-field
  class="mat-form-field"
  [floatLabel]="'auto'"
  [appearance]="transparent ? 'outline' : 'fill'"
  [class.mat-mdc-form-field-invalid]="isMatFormFieldInvalid$ | async">
  <mat-label class="input-label" *ngIf="label">
    {{ label }}
  </mat-label>
  <input
    class="input"
    #input
    matInput
    [type]="type"
    [placeholder]="placeholder !== null ? placeholder : ''"
    [maskito]="maskito"
@Component({
  selector: 'kfb-text-form-field',
  templateUrl: './kfb-text-form-field.component.html',
  styleUrls: ['./kfb-text-form-field.component.scss'],
})
export class KfbTextFormFieldComponent extends Destroyable implements ControlValueAccessor, AfterViewInit {
  @Input() @HostBinding('attr.data-appearance') appearance: TextFormFieldAppearance = 'default';
  @Input() @HostBinding('attr.data-shape') shape: TextFormFieldShape = 'default';
  @Input() type = 'text';
  @Input() placeholder: string | null = null;
  @Input() label?: string;
  @Input() disabled = false;
  @Input() maskito: MaskitoOptions | null = null;

however event if maskito == null then maskito setups it self around the component with some default options.

It seams strange for there to be something like "default mask" and this can cause problems.

For example if the input type="email" and maskito=null the maskito still works under the hood and causes an error in browser logs

image (4)

to work around it we did such a custom wrapper

@Directive({
  // eslint-disable-next-line @angular-eslint/directive-selector
  selector: 'input[maskito]',
})
export class KfbConditionalMaskitoDirective extends MaskitoDirective implements OnChanges {
  override async ngOnChanges() {
    if (this.maskito) {
      return await super.ngOnChanges();
    }
  }
}

but I think it would be better to have this behaviour by default

further more maskito should not try to call setSelectionRange on inputs that do not have it