I am asked to do the following:

allow the user to click anywhere in the field and start inputting that would then override the digits as they are entering.

The solution I have works when user clicks next to the digit(s) they attempt to re-enter the revised digits. which I believe is pretty standard in UI practice. Does anyone have a solution on how to achieve what is asked in the bolded area, update the phone number field by clicking the field, and start inputting/overriding.?

//have an observer on the following function:

static get observers() { return [
    _workNumber(_contract.workPhone),
}}

_workNumber(str) {

    let cleaned = ('' + str).replace(/\D/g, '');
    let match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) {

        //the binding value in the input tag in HTML.
        this._contract.workPhone = '(' + match[1] + ') ' + match[2] + '-' + match[3];
        return '(' + match[1] + ') ' + match[2] + '-' + match[3]
    };

        return null

};