Datepicker disable partially works with reactive form

[qpfmtlcp]

Describe the bug

When disabled, calendar button works perfectly, but the input tag can change.

How to reproduce

1. Select Clarity Light Theme v13 with Angular 14 in Clarity Stackblitz templates
2. Import ReactiveFormModule
3. Add datepicker with disabled formControl. dateForm = new FormGroup({ date: new FormControl({ value: '', disabled: true }) });
4. Value can change

Expected behavior

Input must not be able to be modified as if calendar button does not work

Versions

Clarity version:

• [x] v13.x
• [ ] v15.x
• [ ] Other:

Framework version:

Angular 14.2

Device:

• Type: mac
• Browser chrome

Additional notes

Disable can be accomplished by using [disabled] attribute directly inside input tag. but it triggers a warning that It looks like you're using the disabled attribute with a reactive form directive. ~~

[Jinnie]

We prefer a working reproduction instead of a step-by-step instruction how to reproduce a bug, because this helps us try it and look for quick fixes at triage time. While with step-by-step it usually gets in the backlog during triage and gets first processed when someone assigns to it and starts working on it.

[qpfmtlcp]

Quick reproduction is here. thanks.

// app.module.ts

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import { ClarityModule } from "@clr/angular";
import { ReactiveFormsModule } from '@angular/forms'
import { AppComponent } from "./app.component";

@NgModule({
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ClarityModule,
    ReactiveFormsModule,
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

// app.components.ts

import { Component } from '@angular/core';
import { FormControl, FormGroup } from '@angular/forms'

@Component({
  selector: 'app-root',
  template: `
    <form clrForm [formGroup]="dateForm" novalidate>
      <h4>Reactive Form Demo</h4>
      <clr-date-container>
        <label>Date</label>
        <input type="date" clrDate formControlName="date"/>
      </clr-date-container>
    </form>
  `,
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  dateForm = new FormGroup({
    date: new FormControl({ value: '', disabled: true })
  });
}

[Jinnie]

https://stackblitz.com/edit/issue-442-datepicker-disabled

[mauritslourens]

any news on this issue? It's very annoying that I have to disable the date input manually.

[michaeljota]

The @HostBinding decorator is being applied on the setter, instead of the getter. That may be why this is not working as expected.

https://github.com/vmware-clarity/ng-clarity/blob/main/projects/angular/src/forms/datepicker/date-input.ts#L118