I'm developing asp.net core and test in Edge browser(version: 96.0.1054.62).

I'm send ajax request and get the html content, then I embedded the html block into current page. After that, I set focus on the html elment in the html block. But I cannot see the focus effect when I call the setFcous function.

In general, when I set focus on one elment, it will have black border wrap it like fhe following.

The following is the code sample:

Index.cshtml

<form>
    <input id="btnDelete" value="Delete" type="button" style="width: 60px" />
</form>

<div id="divInputs" style="display: none">
</div>

<script type="text/javascript">
function setFocus(elementId) {
    var obj = document.getElementById(elementId);
    if (isDefine(obj)) {
        console.log(obj);
        obj.focus();
    }
}

function isDefine(obj) {
    return !(obj == undefined || obj == null)
}

$(function () {
    $('#btnDelete').on('click', function () {
        $.get('/Home/Delete?', (data) => {
            $('#divInputs').html($(data));
            $('#divInputs').show();
            setFocus('btnAction');
        });
    });
});
</script>

HomeController.cs

public IActionResult Delete()
{
    return View("Delete");
}

Delete.cshtml

@{
Layout = null;
}

<div>
    <input id="btnAction" class="button" type="button" value="Delete"/>
    <input id="btnCancel" class="button" value="Cancel" type="button"/>
</div>