No "Done" button on a keyboard when focusing on a text input in Web Apps

[filippgit]

Checklist

• [x] I am reporting an issue in existing functionality that does not work as intended
• [x] I've searched for existing GitHub issues

Description

No "Done" button on a keyboard when focusing on a text input in Web Apps. Since Safari's default behavior on iOS does not blur the text field when the user taps outside (unlike Android browsers), it basically leaves them "trapped" inside. The only way to get out that I've found is to lose focus of the entire page (i.e. by triggering a popup).

This occurs only in Web Apps, other webviews are showing the said button (see screenshots).

Input in the example below is a HTML element, however <input type="text"> has the same problem (and I assume other inputs do as well).</p> <h3>Expected Behavior</h3> <p>There is a "Done" button on the keyboard which lets the user complete filling in the text field</p> <h3>Actual Behavior</h3> <p>There is no "Done" button</p> <h3>Steps to Reproduce</h3> <ol> <li>Open <a rel="noreferrer nofollow" target="_blank" href="https://t.me/snortingpugbot/app">https://t.me/snortingpugbot/app</a> in the iOS client</li> <li>Tap the text field on the top of the page</li> </ol> <h3>Screenshots and Videos</h3> <p><a rel="noreferrer nofollow" target="_blank" href="https://github.com/TelegramMessenger/Telegram-iOS/assets/35934233/e75159e4-c8fb-43b8-95fc-0e24f4570d3f">https://github.com/TelegramMessenger/Telegram-iOS/assets/35934233/e75159e4-c8fb-43b8-95fc-0e24f4570d3f</a></p> <p><img referrerpolicy="no-referrer" src="https://github.com/TelegramMessenger/Telegram-iOS/assets/35934233/41a09016-f721-46e1-a579-842f70ca4757" alt="photo_2024-04-03_02-41-52" /></p> <p>Below is the same Web App's URL opened in a standard Telegram webview: <img referrerpolicy="no-referrer" src="https://github.com/TelegramMessenger/Telegram-iOS/assets/35934233/86756d8d-2772-4607-8a5c-5325a2e2dba1" alt="photo_2024-04-03_02-41-51" /></p> <h3>Environment</h3> <p><strong>Device:</strong> <code>iPhone 11</code></p> <p><strong>iOS version</strong>: <code>16.7</code></p> <p><strong>App version:</strong> <code>10.10</code></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kubk"><img src="https://avatars.githubusercontent.com/u/22447849?v=4" />kubk</a> commented <strong> 7 months ago</strong> </div> <div class="markdown-body"> <p>Nice catch. I agree that the lack of this button makes forms harder to fill out, especially when you need to switch from one input to another. Would be nice to see it fixed 🙏 </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/azabroflovski"><img src="https://avatars.githubusercontent.com/u/33807338?v=4" />azabroflovski</a> commented <strong> 2 months ago</strong> </div> <div class="markdown-body"> <p>same issue? any updates?</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/quickdevel"><img src="https://avatars.githubusercontent.com/u/3274652?v=4" />quickdevel</a> commented <strong> 3 weeks ago</strong> </div> <div class="markdown-body"> <p>Temporary fix in JS. Remove focus when click on other elements.</p> <pre><code class="language-js">document.addEventListener('click', event => { const focusedElement = document.activeElement if (focusedElement && focusedElement !== event.target && ['INPUT', 'TEXTAREA'].includes(focusedElement.tagName)) { focusedElement.blur() } })</code></pre> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>