CollaboraOnline
Mobile Search: Edit Mode: Input Hidden by Keyboard and Misaligned Navigation Arrows
Describe the Bug
On mobile devices, when a user taps the search icon, the search input is rendered beneath the on-screen keyboard, making it difficult to see what’s being typed. As a result, users must frequently dismiss the keyboard just to view their input.
Additionally, the search input and the up/down navigation arrows are misaligned. When there are multiple results, tapping the navigation arrows reactivates the keyboard unnecessarily, interrupting the flow and making it hard to browse results smoothly.
This leads to a frustrating user experience where both visibility and navigation are hindered.
Steps to Reproduce
Open Collabora Office on a mobile device Open a Text document Click the search icon on the Toolbar. And notice the behavior of the Search input
Expected Behavior
When tapping the search icon on mobile, the search input should remain fully visible above the on-screen keyboard. The input field and navigation arrows (up/down) should be properly aligned. Navigating through search results using the arrows should not trigger the keyboard to reappear unless the user explicitly taps into the input field.
Actual Behavior
When the search icon is tapped, the search input appears underneath the on-screen keyboard, making it hard to see what is being typed. The input field and up/down arrows are misaligned. Each time the user taps the navigation arrows to move between search results, the keyboard reopens, which interrupts the navigation experience and forces the user to constantly hide the keyboard.
Preview
https://github.com/user-attachments/assets/a6c45cc0-15be-48c6-ae7c-db61acab9cc6
Smartphone
- Device: iPhone 16 Pro
- OS: iOS 18.5
- Version: 25.04.2.1
cc @Minion3665 @pedropintosilva
I can confirm this issue occurs when using a mobile device to access via mobile web browser.
The Collabora Office build shows the expected behaviour - The search input bar does not hide
https://github.com/user-attachments/assets/b0d0fd5d-d881-4148-ac64-30d51512d654
@Ezinnem we have the issue for the misalignment on browser in mobile https://github.com/CollaboraOnline/online/issues/11989
However the above issue is for mobile application.