change: [M3-8978] - Disable Autocomplete search on touch devices

[abailly-akamai]

Description 📝

This PR addresses a rather annoying issue with Autocomplete on mobile. As the user taps on the Autocomplete to make a selection, the keyboard gets triggered (as to search) and obfuscate the selections. Once the user tries to close the keyboard then the focus disappears and the autocomplete closes, which is a pretty bad user experience.

A quick & concise solution is to disable the search completely on touch devices. While it removes a useful functionality, it certainly allows to user to go through the flow properly and without friction. A reasonable assumption is that to complete a more complicated operation (with a select containing too many options to scroll through) usually wouldn't get done on a mobile device.

Open to feedback on the approach of course, if this solution feels like too much of a drastic approach for our (very) low percentage of mobile users. I found it to be a really nice improvement when trying on a real mobile device via preview link 👍

Changes 🔄

• Disable Autocomplete search on touch devices

Preview 📷

Before	After
Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-27.at.16.10.53.mp4	Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-03-27.at.16.08.43.mp4

How to test 🧪

Prerequisites

Two ways:

• use the preview link on your device (ask if you can't find it)
• use the IOS Simulator with an account you don't need ACC to sign in

Verification steps

• Confirm search is disabled on a touch device
• Confirm the experience is better on mobile

Author Checklists

As an Author, to speed up the review process, I considered 🤔

👀 Doing a self review
❔ Our contribution guidelines
🤏 Splitting feature into small PRs
➕ Adding a changeset
🧪 Providing/improving test coverage
🔐 Removing all sensitive information from the code and PR description
🚩 Using a feature flag to protect the release
👣 Providing comprehensive reproduction steps
📑 Providing or updating our documentation
🕛 Scheduling a pair reviewing session
📱 Providing mobile support
♿ Providing accessibility support

• I have read and considered all applicable items listed above.

As an Author, before moving this PR from Draft to Open, I confirmed ✅

• All unit tests are passing
• TypeScript compilation succeeded without errors
• Code passes all linting rules

[mjac0bs]

This is going to break the Help & Support algolia search. We just refactored that search to an autocomplete pretty recently, so I think we're going to need a solution that allows for more flexibility than the sweeping change at the Autocomplete level.

Prod	This Branch - Search Regression
ScreenRecording_03-27-2025_14-45-34_1.mov	Screen.Recording.2025-03-27.at.2.50.46.PM.mov

I was trying to think of other places where the change might not be an improvement. Timezone selection was another one with a long list of options, possibly something a user would want to do on mobile, and potentially a worse experience to scroll through everything. That being said, timezone doesn't seem like something a user would be adjusting often, so I was learning towards 'better UX overall'. We do need to address search, though.

Header	Header
prod.mov	fix-mobile.mov

[abailly-akamai]

@mjac0bs - good call! how about adding a keepSearchEnabledOnMobile?: boolean for exceptions?

I think i'd rather go that route than the other way so we don't hav to address every Autocomplete/Select out there.

[mjac0bs]

how about adding a keepSearchEnabledOnMobile?: boolean for exceptions?

This sounds good!

[abailly-akamai]

The text input is overridden here so this technically has no effect, but I added it to be explicit in case this is refactored at one point or another

[mjac0bs]

Thanks Alban.

✅ Search(es) look good and text-searchable.

I'd also add keepSearchEnabledOnMobile on TimeZoneSelect due to the very large number of options, but leaving that up to whether other reviewer(s) agree and your discretion.

[abailly-akamai]

@mjac0bs done!

@harsh-akamai can I get some eyes on the PR please?

[bnussman-akamai]

Going to do a bit more testing, but this looks better than it was!

Is the Autofull popup that @mjac0bs and I observed in the drop left of the screen is a bit unfortunate.

ScreenRecording_04-08-2025.16-59-09_1.MP4

[harsh-akamai]

Thanks Alban! 🙌

All the Autocomplete fields are working as expected on mobile view.

I feel we could also add the keepSearchEnabledOnMobile for the Country and State fields inside UpdateContactInformationForm.tsx as they both have long lists and could be updated on mobile.

[linode-gh-bot]

Cloud Manager UI test results

🎉 540 passing tests on test run #9 ↗︎

❌ Failing	✅ Passing	↪️ Skipped	🕐 Duration
0 Failing	540 Passing	4 Skipped	99m 51s