The Android "Touch to Search" interaction is very useful for websites. But in many web apps or PWAs, it can be extremely annoying. Tapping a word may accidentally select the text, which prompts an unwanted popup.

Disabling text selection with code

As it can be fixed with a single code snippet, this feature is not directly included in Progressier. To prevent "touch to search" in your PWA, disable text selection in your app altogether by adding the following bit of CSS in the <head> of your HTML:

<style>
*:not(input):not(select):not(code):not(textarea):not([contenteditable]) {
   -webkit-touch-callout: none;
   -webkit-user-select: none;
   -khtml-user-select: none;
   -moz-user-select: none;
   -ms-user-select: none;
   user-select: none;
}
</style>

This snippet disables text selection in all HTML elements that aren't input, select, code, textarea, or contenteditable, as users may want to select text inside those elements. Adjust the selector to exclude or include other types of elements.

Disabling text selection in a Bubble app

Open your Bubble.io dashboard, then go to Settings > SEO / metatags and copy and paste the code snippet above into the Script/meta tags in header section.

After inserting the code, redeploy your Bubble app, and users will no longer be able to select text in your PWA. Goodbye, accidental "Touch to Search"!