双击只读字段不会立即聚焦，但外部按钮运行相同的代码

Question

我的输入组件中有以下模板作为更大组件的一部分。 出于某种原因，当我单击铅笔按钮使得该字段聚焦时，将光标显示在输入内。但是当我dblClick字段时运行的相同函数没有在字段中准备好光标。因此，双击时不会立即聚焦。实际上，如果有价值，我希望它也能选择它。

我如何确保它们的工作方式相似？

npm -v

这些是按钮和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>