Accidentally deleting draft post when you mention an account

[LukeberryPi]

Describe the bug

When creating a post and mentioning an account, it is possible to blur from the text area and lose your content.

To Reproduce

1. Click on "New Post"
2. Mention someone (e.g.: write "@lukeberrypi.bsky.social")
3. Place your cursor after the last character of the mention
4. Press cmd + ←
5. You will navigate to the previous page (same as clicking the Back button on Chrome)
6. Your original post is now lost

Expected behavior

The expected behavior is to navigate to the beginning of the line, and preserve the post content without unintended navigation.

Screenshots

https://github.com/user-attachments/assets/c96de9c0-c637-4b2c-af87-c40d8d3c94a8

Details

• Platform: macOS and Google Chrome
• Platform version: Sonoma 14.3.1 (23D60) and Chrome Version 128.0.6613.113 (Official Build) (arm64)
• App version: -

Additional context

Just for clarification, when the user is not focused on an text input element (as in or <input>), <code>cmd + ←</code> acts as a "Back" on browser navigation. The issue here is that while composing a post, user intent is to go to the beginning of the line, not going to the previous page.</p> <p>I noticed that mentions on posts are treated differently to normal text, because they can't even be selected via <code>shift + ←</code>, or navigated from within the mention itself. I believe these are valuable clues to locating and solving this bug.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/half144"><img src="https://avatars.githubusercontent.com/u/99549268?v=4" />half144</a> commented <strong> 2 weeks ago</strong> </div> <div class="markdown-body"> <p>hi, I created a PR to fix this, can you take a look? let's see if they approve <a href="https://github.com/bluesky-social/social-app/pull/5110">https://github.com/bluesky-social/social-app/pull/5110</a></p> </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>