Поле двойного щелчка только для чтения не сразу фокусируется, но внешняя кнопка запускает тот же код, что и - PullRequest
Новая
       7

Поле двойного щелчка только для чтения не сразу фокусируется, но внешняя кнопка запускает тот же код, что и

0 голосов
/ 15 мая 2018

У меня ниже шаблон в моем компоненте ввода как часть большего компонента. По какой-то причине, когда я нажимаю кнопку карандаша, которая делает поле сфокусированным, показывает курсор внутри ввода. Но та же функция, которая запускается, когда я dblClick поля, не готов курсор в поле. Так что это не сразу фокусируется при двойном щелчке. На самом деле, я бы хотел, чтобы все это тоже выбиралось, если есть ценность.

Как я могу убедиться, что они работают одинаково? 

<div class="row detail-row " [ngClass]="{'invalid': (invalid),  'valid': 
(!invalid), 'focused': (onFocused)}" parentControl>
        <div class="col col-sm-4">
            <label class="labelheading">{{ labelKey| translate}}</label>
        </div>
        <div class="col col-sm-8">
            <input [attr.id]="fieldId"
                   type="text"
                   [readonly]="readField"
                   (blur)="onBlurEvent(elem)"
                   (dblclick)="onDoubleClick(elem)"
                   class="form-control"
                   [(ngModel)]="fieldValue"
                   #elem
                   [attr.name]="fieldId"
                   (ngModelChange)="onChange()">
        </div>
        <span *ngIf="!readOnly">
            <button class="btn-link edit-icon"
                    (click)="onBtnPencilClick(elem)"
                    title="Edit">
                <span class="glyphicon glyphicon-pencil" alt="Edit" aria-hidden="true"></span>
            </button>
        </span>
        <span *ngIf="!hideSaveButtons">
        <remove-add-buttons [showBtn]="showButtons"
                        (onBtnAdd)="onButtonSave()"
                        (onBtnRemove)="ontButtonCancel()">
        </remove-add-buttons>
        </span>
        <div *ngIf="errorMessage" class="error-message" > {{errorMessage}}</div>
    </div>

И это те функции, которые выполняет кнопка и dblClick. 

onDoubleClick = (e: any): void => {
    this.setInputValuesAndSetFocus(e);
}
onBtnPencilClick = (e: any): void => {
   this.setInputValuesAndSetFocus(e);
}

private setInputValuesAndSetFocus = (e: any): void => {
    this.showButtons = true;
    this.readField = false;
    this.onFocused = true;
    e.focus();

}
...