ng-matero/extensions

How to disable autofocus on Time selection inputfield in mtx-datetimepicker on mobile?

Closed this issue · 1 comments

Hi,

is there an option to disable autofocusing input field for the time if I am on a mobile device? I dont want to use touchUi because it does not get displayed correctly.

Here is my Datetimepicker code

<div class="col-sm-6 col-xl-4">
          <mat-form-field>
            <mat-label>Startzeitpunkt</mat-label>
            <input [mtxDatetimepicker]="datetimePickerStartZeitpunkt"
                   readonly
                   formControlName="startDateTime"
                   placeholder="Klicken Sie auf das Icon."
                   matInput
                   required>
            <mtx-datetimepicker-toggle [for]="datetimePickerStartZeitpunkt" matSuffix></mtx-datetimepicker-toggle>
            <mtx-datetimepicker #datetimePickerStartZeitpunkt
                                [type]="type"
                                [mode]="mode"
                                [multiYearSelector]="multiYearSelector"
                                [calendarHeaderComponent]="customHeader"
                                [startView]="startView"
                                [twelvehour]="twelvehour"
                                [timeInterval]="timeInterval"
                                [touchUi]="touchUi"
                                [timeInput]="timeInput">
            </mtx-datetimepicker>
          </mat-form-field>
        </div>


And things from the .ts file:

type: MtxDatetimepickerType = 'datetime';
  mode: MtxDatetimepickerMode = 'auto';
  startView: MtxCalendarView = 'month';
  multiYearSelector = false;
  touchUi = false;
  twelvehour = false;
  timeInterval = 1;
  timeInput = true;
  customHeader!: any;

I could set timeInput to false to disable the digit input for the time, but I want to keep this feature. I just want to disable the autofocus on mobile, so that the mobile keyboard won't open. In the screenshot the cursors gets set automatically to hour input field and this is not what I want.

Greenshot 2024-11-30 23 27 28
nzbin commented

Now the 18.4.0 added a new prop timeInputAutoFocus, please have a try.