Bug 148177

Summary: Replacing input element using outerHTML with new element containing "autofocus" focuses newly replaced element
Product: WebKit Reporter: Martijn Dashorst <martijn.dashorst>
Component: DOMAssignee: Nobody <webkit-unassigned>
Status: NEW ---    
Severity: Normal    
Priority: P2    
Version: WebKit Nightly Build   
Hardware: Unspecified   
OS: Unspecified   

Description Martijn Dashorst 2015-08-19 07:00:50 PDT 
When replacing an existing <input> element using outerHTML where the new markup has <input autofocus> puts the focus on the new element instead of keeping the focus on the current form element.

The markup below illustrates the issue:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
    function replaceLastName() {
        var newMarkup = "<input type='text' id='lastname' autofocus placeholder='Last name' value='Banana'>";
        document.getElementById("lastname").outerHTML = newMarkup;
    }
</script>
</head>
<body>
    <form>
        <input type="text" id="lastname" autofocus placeholder="Last name">
        <input type="text" id="firstname" placeholder="First name" onfocus="replaceLastName();">
        <input type="submit">
    </form>
</body>
</html>

When you modify the contents of field 'lastname' and switch the focus to 'firstname', Safari 8 and Webkit nightly remove the focus from the 'firstname' field and put the focus on 'lastname'.

All other major browsers retain the focus on the 'firstname' field.