<p dir="auto">Another autofocus-related change in addition to <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="2974888260" data-permission-text="Title is private" data-url="https://github.com/openstreetmap/openstreetmap-website/issues/5899" data-hovercard-type="pull_request" data-hovercard-url="/openstreetmap/openstreetmap-website/pull/5899/hovercard" href="https://github.com/openstreetmap/openstreetmap-website/pull/5899">#5899</a>.</p>
<p dir="auto">Normally on map view pages we have the search input autofocused. But on the <em>Add a note</em> page it makes sense to focus on the note description input. Since it may be loaded in the sidebar after the regular page load, we're focusing with javascript instead of a html attribute.</p>
<p dir="auto">Now try adding a note on a phone with a small screen. What's normally a sidebar now takes up the upper half of the screen. You get the lower half to see the map and to place the note marker. Except not really because the virtual keyboard shows up as soon as the description input gains focus, that is right away:</p>
<p dir="auto"><a href="https://github.com/user-attachments/assets/1c313e5c-516f-46fc-8174-b98614c33389">Screenshot_20250406-144921.png (view on web)</a></p>
<p dir="auto">This PR adds <a href="https://gist.github.com/supertanuki/1f73f9aa33d5010bf07205804596e042">a workaround</a> to suppress the initial focus from triggering the virtual keyboard. The proper API for that <a href="https://developer.mozilla.org/en-US/docs/Web/API/VirtualKeyboard_API" rel="nofollow">is still experimental</a>.</p>

<hr>

<h4>You can view, comment on, or merge this pull request online at:</h4>
<p>  <a href='https://github.com/openstreetmap/openstreetmap-website/pull/5900'>https://github.com/openstreetmap/openstreetmap-website/pull/5900</a></p>

<h4>Commit Summary</h4>
<ul>
  <li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900/commits/c1eee571f6b6a7bde52bb236a336fbc69598f3fe" class="commit-link">c1eee57</a>  Fix typo in moveNewNoteMarkerToClick</li>
  <li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900/commits/2919473f5b0012b9b6557be821c01b60adee0903" class="commit-link">2919473</a>  Replace deprecated jQuery .focus() with .trigger("focus")</li>
  <li><a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900/commits/382a48fd5812003292f66dee473a8943a30a86db" class="commit-link">382a48f</a>  Avoid virtual keyboard when visiting new node page</li>
</ul>

<h4 style="display: inline-block">File Changes </h4> <p style="display: inline-block">(<a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900/files">1 file</a>)</p>
<ul>
  <li>
    <strong>M</strong>
    <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900/files#diff-08fd2f80528286cf96375b12d81cac98954dee8e6a6899f5f261a127861fdd49">app/assets/javascripts/index/new_note.js</a>
    (14)
  </li>
</ul>

<h4>Patch Links:</h4>
<ul>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5900.patch'>https://github.com/openstreetmap/openstreetmap-website/pull/5900.patch</a></li>
  <li><a href='https://github.com/openstreetmap/openstreetmap-website/pull/5900.diff'>https://github.com/openstreetmap/openstreetmap-website/pull/5900.diff</a></li>
</ul>

<p style="font-size:small;-webkit-text-size-adjust:none;color:#666;">—<br />Reply to this email directly, <a href="https://github.com/openstreetmap/openstreetmap-website/pull/5900">view it on GitHub</a>, or <a href="https://github.com/notifications/unsubscribe-auth/AAK2OLIEHTDETTELTZ4URG32YEKHBAVCNFSM6AAAAAB2RUG2TGVHI2DSMVQWIX3LMV43ASLTON2WKOZSHE3TIOJRGE4TENY">unsubscribe</a>.<br />You are receiving this because you are subscribed to this thread.<img src="https://github.com/notifications/beacon/AAK2OLN34J3MC5JCKFLVK332YEKHBA5CNFSM6AAAAAB2RUG2TGWGG33NNVSW45C7OR4XAZNFJFZXG5LFVJRW63LNMVXHIX3JMTHLCUMNW4.gif" height="1" width="1" alt="" /><span style="color: transparent; font-size: 0; display: none; visibility: hidden; overflow: hidden; opacity: 0; width: 0; height: 0; max-width: 0; max-height: 0; mso-hide: all">Message ID: <span><openstreetmap/openstreetmap-website/pull/5900</span><span>@</span><span>github</span><span>.</span><span>com></span></span></p>
<script type="application/ld+json">[
{
"@context": "http://schema.org",
"@type": "EmailMessage",
"potentialAction": {
"@type": "ViewAction",
"target": "https://github.com/openstreetmap/openstreetmap-website/pull/5900",
"url": "https://github.com/openstreetmap/openstreetmap-website/pull/5900",
"name": "View Pull Request"
},
"description": "View this Pull Request on GitHub",
"publisher": {
"@type": "Organization",
"name": "GitHub",
"url": "https://github.com"
}
}
]</script>