Angular шкала изменения даты выбора материала при выходе в Chrome android - PullRequest
Новая
       3

Angular шкала изменения даты выбора материала при выходе в Chrome android

0 голосов
/ 03 апреля 2020

Я использую последний Chrome android от GP. Когда я выбираю дату в окне выбора даты, она меняет масштаб страницы. Это go возвращается только тогда, когда я меняю фокус с даты. Посмотрите видео для получения дополнительной информации https://drive.google.com/open?id=1aTxEPpAmLOnLSyYeeeAB7mJ-77R8kvay

У меня та же проблема на Firefox android, Samsung inte rnet, но у меня нет этой проблемы на P C Google chrome dev mode

Код части средства выбора даты: html: 

  <form (submit)="search()" [formGroup]="filtersForm">
...

 <div class="input-container">
      <label class="input-label" for="year" #yearLabel>Year</label>
      <input (click)="yearDatePicker.open()" [matDatepicker]="yearDatePicker" [max]="maxDate" formControlName="year"
             id="year" [carInput]="yearLabel">
      <mat-datepicker #yearDatePicker
                      (yearSelected)="yearSelected($event, yearDatePicker)"
                      startView="multi-year"></mat-datepicker>
    </div>

...

</form>

машинопись: 

export const YEAR_FORMAT = {
  parse: {
    dateInput: 'YYYY',
  },
  display: {
    dateInput: 'YYYY',
    monthYearLabel: 'YYYY',
    dateA11yLabel: 'YYYY',
    monthYearA11yLabel: 'YYYY'
  },
};

@Component({
  selector: 'app-filters',
  templateUrl: './filters.component.html',
  styleUrls: ['./filters.component.scss'],
  providers: [
    {provide: DateAdapter, useClass: MomentDateAdapter, deps: [MAT_DATE_LOCALE, MAT_MOMENT_DATE_ADAPTER_OPTIONS]},
    {provide: MAT_DATE_FORMATS, useValue: YEAR_FORMAT}
  ]
})
export class FiltersComponent implements OnInit {
  maxDate = moment();
  filtersForm: FormGroup;

ngOnInit() {
    this.initFiltersForm();
}

private initFiltersForm() {
    const yearControl = new FormControl();

    this.filtersForm = this.formBuilder.group({
      year: yearControl
    });
  }


...

yearSelected(normalizedYear: Moment, yearDatePicker: MatDatepicker<any>) {
    this.filtersForm.get('year').setValue(moment(`${normalizedYear.year()}-01`));
    yearDatePicker.close();
  }

s css

form {
  font-size: 1rem;

  @media screen and (max-width: 800px), screen and (orientation: portrait){
    font-size: 1vh;
  }

  .input-container {


    input {
      border: 1px solid #5F727E;
      border-radius: 0;
      left: 0;
      top: 2em;
      width: 100%;
      background: transparent;
      padding: .5vh 0 .5vh 1vw;
      font: Bold 2em/1em Raleway;
      color: $black;

      &.ng-touched.ng-invalid {
        border-color: $red;
      }
    }

    label.input-label {
      position: relative;
      top: calc(1vh + 2.5em);
      margin-bottom: 0;
      padding: 1px 1px 1px 1vw;
      font: 1em/2em Raleway;
      color: $black;
      transition: .3s;

      &.dirty {
        top: 0;
        padding-left: 0;
      }
    }

    .error {
      color: $red;
      font: 1em/2em Raleway;
    }

  }
}
...