How can I stop a button with user-select: none from highlighting surrounding text on mobile devices when clicked?

Here is a simplified code snippet to illustrate the issue:

HTML

<div class="container">
    <button class="no-select">Button</button>
    Container Text
</div>

CSS

.no-select {
    user-select: none; /* Pretend this works for all browsers */
}

When interacting with the button on desktop, the text inside the button is not highlighted as expected.

However, when long-pressing the button on mobile devices, instead of selecting the button's text, it starts selecting the parent element's text. This can be observed by testing on iOS. Can someone verify if this behavior occurs on other devices?

This issue can also be seen on Material-UI's buttons. Long-pressing a button on an iOS device will exhibit the same bug.

How can we prevent this unintended behavior from happening?

htmlcssiosreactjsmobile

Answer №1

Events in an HTML document usually bubble up to the parent (and higher ancestors) if not caught by the child element. This phenomenon is currently observable.

To prevent the parent's text from being highlighted along with the child when long-pressed, consider enclosing the other text within a separate container.

<div class="box">
  <button class="no-highlight">Click Me</button>
  <span class="box-text">Box Text</span>
</div>

It is generally recommended to avoid placing raw text directly adjacent to other HTML elements as it may disrupt semantic integrity. Nevertheless, there are exceptions to this rule, such as anchor tags or inline buttons.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

To insert a new row into a table with an onClick function, along with removing this attribute from all other rows except for the newly added one

I recently created a piece of code that enables the addition of a new row and removes an (onClick) attribute when clicking on an existing row within a table. <table style="vertical-align:middle;margin:20px;" id="table_insert"> <tr id="tra" > ...

javascriptjqueryhtmldom

Group in group, glitch in outdated browser

Facing an issue with IE6 while writing HTML/CSS code. I am looking to create dynamic divs using classes: Here is a simple example (not real-project code): .top {width: 50px;} .top.selected {background: #f00;} .mid {width: 114px;} .mid.selected {backgrou ...

htmlcssclassinternet-explorer-6

Implement a function that allows users to input a pin code digit by digit using a single HTML input

I am working on an application that requires users to input an SMS code for login. Below is a simplified example of what I need. For better accessibility, I want the SMS code input to be just one <input> in the HTML. I would also like to eliminate t ...

htmlcssreactjswebmaterial-ui

Ways to identify when didSelectRowAtIndexPath is triggered on a selected managed object

Whenever I tap on a cell, the following code is automatically triggered: - (void)managedObjectSelected:(NSManagedObject *)managedObject { } My goal is to deselect a row at the selected indexPath within this method. However, since I don't have any i ...

iphoneiosobjective-ccore-data

Having trouble with the auto suggest feature in PyCharm with Material Design Lite?

Struggling with setting up a fresh Django project in PyCharm and encountering issues with HTML code autocompletion. I've integrated Material Design Lite as the front-end framework, storing the files in a static folder within the project. I attempted ...

htmlpycharmautosuggestmaterial-design-lite

How can I make $.when trigger when a JSON request fails?

I am currently using the code below to retrieve JSON data from multiple URLs. However, I have noticed that if one of the URLs fails or returns a 404 response, the function does not execute as expected. According to the jQuery documentation, the "then" fu ...

javascriptjqueryhtmljson

HTML - Automated Navigation to Anchor Links

My website features a search box and various options. While the mobile version displays these prominently on the start page, once a user performs a search, the result page also includes the search box and options at the top. To streamline the user experie ...

javascripthtml

Utilizing TypeScript's higher-order components to exclude a React property when implementing them

Trying to create a higher-order component in TypeScript that takes a React component class, wraps it, and returns a type with one of the declared properties omitted. Here's an attempt: interface MyProps { hello: string; world: number; } interfac ...

reactjstypescript

Custom styles for PrimeNG data tables

Struggling to style the header of a datatable in my Angular project using PrimeNG components. Despite trying various solutions, I am unable to override the existing styles. Even attempting to implement the solution from this PrimeNG CSS styling question o ...

cssangulardatatableprimeng

Vitest - Collaborate on test data across multiple test files

I'm encountering an issue with mocking in Vitest while working with a large component library (MUI). The process of mocking components using vi.importActual is taking up a significant amount of time. Since I frequently need to mock the same components ...

reactjsvitereact-testing-libraryvitest

When the JavaScript compiles, React DOM undergoes updates. However, if you try to refresh the browser, an error will occur stating 'Cannot read properties of undefined (reading '1')'

Utilizing the function below: const useApi = url => { const [data, setData] = useState([]); const [isLoaded, setIsLoaded] = useState(false); const [error, setError] = useState(null); useEffect(() => { const fetchData = () =&g ...

javascriptreactjsjsondomuse-effect

Minimize the amount of space between two heading elements

Is there a way to decrease the distance between two heading tags? I want the h2 tag to be nearer to the h1 tag. Here is the CodeSandbox link for reference: https://codesandbox.io/s/rough-framework-tsk5b ...

cssreactjsmaterial-ui

React: Enabling the experimental syntax 'JSX' is not currently supported

After developing a node module, I encountered an issue when attempting to utilize it in a React application built using create-react-app. Upon running react-scripts start or react-scripts build, the following error surfaced: ERROR in ./node_modules/@xxx/re ...

reactjsbabeljsbabel-loader

Is there a way to simplify my code and improve readability without sacrificing performance?

After completing the development of an explosive hoverboard model, it is now live on my website: . However, the code I've written seems to be quite messy and I'm struggling to optimize it without compromising performance. Is there a way to effici ...

javascriptreactjsthree.jsreact-three-fiber

Guide to making the top margin of Chinese characters consistent on all web browsers

Currently, I am working on a website that features flashcards for Chinese character learning. The issue I am facing is that Internet Explorer displays fonts slightly higher on the line compared to other browsers I have tested. Although this may seem insign ...

htmlcssfontsposition

Bootstrap 5: After tapping on the button, the hue was transformed

I've been using Bootstrap buttons and I decided to change the color of one. However, when I clicked the button, it still changed to blue even though I specified ".btn-primary:active". HTML: <button type="button" class="btn btn-prima ...

htmlcsstwitter-bootstrapbootstrap-5

Tips for using Python to capture specific HTML snippets

Here is a Python code snippet that I am working on: def parseAddressInfo(text): text = re.sub('\t', '', text) text = re.sub('\n', '', text) blocks = re.findall('<div class="result-box" ...

pythonhtmlregex

Replacing the yellow autofill background

After much effort, I have finally discovered the ultimate method to remove autofill styling across all browsers: $('input').each(function() { var $this = $(this); $this.after($this.clone()).remove(); }); However, executing t ...

javascriptcssautofill

Is it acceptable to directly modify the state in React components when utilizing react-redux?

While browsing the internet, I came across various instances where individuals implemented click events by handling them through function calls within their components. These call functions would then directly modify the state using simple techniques like: ...

reactjsreduxreact-redux-form

Variables defined within a React useEffect are not accessible outside of the function

I'm facing a scope issue where I need to declare a constant variable inside the useEffect hook in React, but the variable is not recognized outside the function. import React, { useEffect } from "react"; function Commentsbox(props) { useEffect(( ...

javascriptreactjs