[BUG] Mobile Keyboard Fluctuation During Search

[badrivlog]

Description

In search page when performing a search on my mobile device, the on-screen keyboard initially appears, then unexpectedly disappears and reappears during the search process, causing an inconsistent user experience and making it challenging to input text efficiently.

Environment
OS: Android
Browser: Google Chrome

Screenshots

No response

Do you want to work on this issue?

Yes

Additional information

No response

[github-actions]

To reduce notifications, issues are locked until they are 🏁 status: ready for dev You can asked for this issue to be assigned (if not already assigned) and to be assigned. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[amandamartin-dev]

Hello! Unable to recreate in my environment. Will unlock for discussion so others can report:

Pixel6a
Android 13
Chrome

See screen recording below for search on mobile working as expected
https://github.com/EddieHubCommunity/BioDrop/assets/97615019/24540485-f648-4c21-a6d7-90ebf939c68d

[badrivlog]

Hello! Unable to recreate in my environment. Will unlock for discussion so others can report:

Pixel6a
Android 13
Chrome

See screen recording below for search on mobile working as expected
https://github.com/EddieHubCommunity/BioDrop/assets/97615019/24540485-f648-4c21-a6d7-90ebf939c68d

It's happening when you type slowly.
My screen recording

Screenrecorder-2023-09-30-21-43-45-728.mp4

[amandamartin-dev]

haha! I am a fast typer, I will leave open for triage and discussion further

[badrivlog]

I've identified the code that's causing the issue with the mobile keyboard behavior during a search. It seems to be related to this code snippet that we're running in a useEffect hook

In there we're replace the search url by router.replace() but problem is here when this code run page gets reloaded. I think to address this issue we should update search url without reloading the page. Thanks

[amandamartin-dev]

Great spot! That makes sense why it would cause the behavior.

[github-actions]

The issue has been unlocked and is now ready for dev. If you would like to work on this issue, you can comment to have it assigned to you. You can learn more in our contributing guide https://github.com/EddieHubCommunity/BioDrop/blob/main/CONTRIBUTING.md

[amandamartin-dev]

@badrivlog thank you for the details providing the problem and proposed solution. I have assigned you.

[eddiejaoude]

In there we're replace the search url by router.replace() but problem is here when this code run page gets reloaded. I think to address this issue we should update search url without reloading the page.

This was added so people can use the back button and also share a deep link to their search results. We want to keep this url history

[amandamartin-dev]

This was added so people can use the back button and also share a deep link to their search results. We want to keep this url history

Perhaps there is a better approach that doesn't reload the page on each keystroke? Apologies for not realizing that was the implementation of the search persistence when I unlocked this.

[badrivlog]

Thanks for providing the details. After reviewing the code and considering the search persistent, I'm thinking of using window.history.replaceState instead of the router.replace method. This should help prevent page reloads when updating the search URL. What are your thoughts on this approach, and do you have any specific recommendations or considerations for implementing it?

[badrivlog]

Hello @eddiejaoude @amandamartin-dev

I hope you're doing well. I wanted to bring your attention to a PR I submitted #9248 . In my research, I came across a popular GitHub discussion vercel/next.js#18072 that seems closely related to the issue this PR aims to address. I believe the insights and solutions discussed in that thread could be beneficial in resolving our issue.

I understand that everyone has their own commitments, but I was wondering if you could take a moment to review my changes and consider the information shared in the linked discussion. Your feedback and guidance would be highly appreciated.

Thank you in advance for your time, and please let me know if there's anything specific you'd like me to address or clarify in the PR.

[amandamartin-dev]

Hello @eddiejaoude @amandamartin-dev

I hope you're doing well. I wanted to bring your attention to a PR I submitted #9248 . In my research, I came across a popular GitHub discussion vercel/next.js#18072 that seems closely related to the issue this PR aims to address. I believe the insights and solutions discussed in that thread could be beneficial in resolving our issue.

I understand that everyone has their own commitments, but I was wondering if you could take a moment to review my changes and consider the information shared in the linked discussion. Your feedback and guidance would be highly appreciated.

Thank you in advance for your time, and please let me know if there's anything specific you'd like me to address or clarify in the PR.

Thank you for doing this research. I have not used this method myself so cannot speak from a place of experience but it does look promising. I did notice in the conversation that many folks mentioned an issue with using the back button. What did you see in your tests? Also, I would like to hear Eddies (or someone elses) thoughts too since I have not implemented this before.