<html>

    <head>

      <base href="https://bugs.webkit.org/" />

    </head>

    <body><table border="1" cellspacing="0" cellpadding="8">

        <tr>

          <th>Bug ID</th>

          <td><a class="bz_bug_link 

          bz_status_NEW "

   title="NEW - Replacing input element using outerHTML with new element containing &quot;autofocus&quot; focuses newly replaced element"

   href="https://bugs.webkit.org/show_bug.cgi?id=148177">148177</a>

          </td>

        </tr>

        <tr>

          <th>Summary</th>

          <td>Replacing input element using outerHTML with new element containing &quot;autofocus&quot; focuses newly replaced element

          </td>

        </tr>

        <tr>

          <th>Classification</th>

          <td>Unclassified

          </td>

        </tr>

        <tr>

          <th>Product</th>

          <td>WebKit

          </td>

        </tr>

        <tr>

          <th>Version</th>

          <td>WebKit Nightly Build

          </td>

        </tr>

        <tr>

          <th>Hardware</th>

          <td>Unspecified

          </td>

        </tr>

        <tr>

          <th>OS</th>

          <td>Unspecified

          </td>

        </tr>

        <tr>

          <th>Status</th>

          <td>NEW

          </td>

        </tr>

        <tr>

          <th>Severity</th>

          <td>Normal

          </td>

        </tr>

        <tr>

          <th>Priority</th>

          <td>P2

          </td>

        </tr>

        <tr>

          <th>Component</th>

          <td>HTML DOM

          </td>

        </tr>

        <tr>

          <th>Assignee</th>

          <td>webkit-unassigned&#64;lists.webkit.org

          </td>

        </tr>

        <tr>

          <th>Reporter</th>

          <td>martijn.dashorst&#64;gmail.com

          </td>

        </tr></table>

      <p>

        <div>

        <pre>When replacing an existing &lt;input&gt; element using outerHTML where the new markup has &lt;input autofocus&gt; puts the focus on the new element instead of keeping the focus on the current form element.

The markup below illustrates the issue:

&lt;!DOCTYPE html&gt;

&lt;html&gt;

&lt;head&gt;

&lt;script type=&quot;text/javascript&quot;&gt;

    function replaceLastName() {

        var newMarkup = &quot;&lt;input type='text' id='lastname' autofocus placeholder='Last name' value='Banana'&gt;&quot;;

        document.getElementById(&quot;lastname&quot;).outerHTML = newMarkup;

    }

&lt;/script&gt;

&lt;/head&gt;

&lt;body&gt;

    &lt;form&gt;

        &lt;input type=&quot;text&quot; id=&quot;lastname&quot; autofocus placeholder=&quot;Last name&quot;&gt;

        &lt;input type=&quot;text&quot; id=&quot;firstname&quot; placeholder=&quot;First name&quot; onfocus=&quot;replaceLastName();&quot;&gt;

        &lt;input type=&quot;submit&quot;&gt;

    &lt;/form&gt;

&lt;/body&gt;

&lt;/html&gt;

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.</pre>

        </div>

      </p>

      <hr>

      <span>You are receiving this mail because:</span>

      <ul>

          <li>You are the assignee for the bug.</li>

      </ul>

    </body>

</html>