Issue: Firefox is not registering the first click event when a textarea has the following CSS:
textarea:focus {
resize: vertical;
}
Check out the demo: http://jsbin.com/wuxomaneba/edit?html,css,output
The fix for this problem is straightforward - just remove the :focus selector.
I am curious about why this issue occurs and if there are any other css rules or scenarios where this could happen.
It appears that there may be a bug causing this issue (thank you for reporting it!). Typically, a click event is triggered on the deepest element that has observed both the mousedown and mouseup events. One way to disrupt the click event is by repositioning the textarea when it is in focus (for example, using position:absolute; top: xxx). This is because the sequence of events is mousedown->focus (which updates the web page)->mouseup->click.
The resize property governs "anonymous content" that is not visible to the web page but is utilized by the browser to provide additional UI features for the user's convenience. It is possible that modifications to this content are causing interference with the detection of the click event>. However, without examining this situation in a debug build, it is difficult to ascertain the exact cause.
function logEvent(ev) {console.log(ev.type, window.getComputedStyle(document.querySelector("textarea")).resize)}
document.querySelector("textarea").addEventListener("mousedown", logEvent, false);
document.querySelector("textarea").addEventListener("focus", logEvent, false);
document.querySelector("textarea").addEventListener("mouseup", logEvent, false);
document.querySelector("textarea").addEventListener("click", logEvent, true);textarea:focus{
position:absolute; top: 500px;
}<textarea>click me</textarea>The reason for this behavior is that when you click on the resize button in Firefox, it doesn't focus on the textarea itself but on the resize button. It's uncertain whether this is a bug or an intentional design choice. By removing the :focus styling, the need to specifically focus on the textarea is eliminated, allowing the resizing function to work seamlessly even when holding the button and dragging vertically.
An easy and effective method is to utilize jQuery's focus function, which works smoothly across all browsers.
If you wish for a specific element to be focused upon page load:
$( document ).ready(function() {
$('#elementId').focus();
});
While switching to a different tab in Chrome on iPhone (without closing it), the publisher's stream.hasAudio value changes to false. It switches back to true only upon returning to the stream tab. Can anyone explain why this occurs and how to stop has ...
I'm having trouble getting the lodash's shuffle method to animate properly in Vue.js. I followed the code from the documentation, but for some reason, the shuffle occurs instantly instead of smoothly. When I tested the animation with actual item ...
I want to organize and display data in a sortable table format javascript let dataList = [ { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number, index: number }, { idx: number, name: string, btn: number ...
After creating an animation to simulate an opening door using jQuery, I discovered that it works perfectly on Firefox 24, Chrome 28, and IE 8. However, Safari presents a problem - the door opens but then the "closed" door reappears at the end of the animat ...
I have a scenario where I have multiple folders, each containing up to 20 images. On my HTML page, I want to display the first 5 images and provide a "click to view more" option to show the remaining 15 images when clicked. Currently, the issue I am facin ...
I am in the process of developing a Q&A platform where users can vote on answers. I have assigned project.problem.upVoted to store a list of answers that the user has already upvoted. If an answer has already been voted on, the callback function for cl ...
I am trying to make use of the variable StatusASof within the inserthtml function in the following manner. App.controller("SS_Ctrl", function ($scope, $http, $location, $window, $sce, $q) { var ShiftDetails = []; function acquireMAStatusASof(Id) { ...
There's something I've been pondering that pertains to MVC platforms, but could also be relevant to any web-based platform that deals with user input forms. When is the best time and method to eliminate leading/trailing whitespace from user inpu ...
Exploring the process of waiting for a condition before logging into a web page using Selenium Driver has proven to be more complex than initially expected. Currently, I am resorting to utilizing Thread.Sleep(3000); as a workaround, although I am certain t ...
I'm encountering an issue with mapping objects in ReactJS. Even though I am able to fetch data, when I try to map it, I receive the following error: this.state.Data.map is not a function Here's the code snippet: import React, { Component } fro ...
In one of my defined less files, I have the following code: //style.less .ant-modal-close-x { visibility: collapse; } Within a component class, I am using this less file like this: //testclass.tsx import './style.less'; class ReactComp{ re ...
I would like to create an HTML table where I can insert rows by clicking on a centered "insert row" button placed between each pair of rows. This will help in visually indicating where the new row will be added. Is there a CSS solution to achieve this lay ...
I'm attempting to achieve the following: Displaying an SVG square (with a 1:1 aspect ratio) inside a div element. When the width of the div is greater than its height, the square should adjust to fit within the container based on the height (red box ...
I'm currently facing a challenge with hand-rolling a solution that involves adding a click listener to an X-Axis label in a column chart using the HighCharts API within an Angular 2+ application. Here is what I have gathered so far: I am utilizing ...
As a beginner in writing regex, I have been tasked with creating a phone number validation system. Currently, it's proving to be quite challenging for me. My progress so far: ^([+]45|[(][+]45[)]?|[(]0045[)]|0045)?\s*([0-9]{8})$ I need to accomp ...
Looking to create a hidden block of amenities on my hotel website that can be expanded and collapsed with buttons in NextJS using tailwind-css. How can I achieve this functionality? Example 1: https://i.stack.imgur.com/BbrUj.png Example-2: https://i.stac ...
My personally built AngularJs user authentication system is experiencing an unusual issue. While everything seems to be working fine - I can login, check access for specific pages, etc. - there is a strange behavior with the token authentication. It seems ...
Obtaining a very large state from JSON can be challenging, especially when it consists of at least 50 lines. During page generation, an error like "there is no such value" may occur if the initial value is not set and the interface is not assigned properl ...
I set up an express server as a proxy for my React app, but I am facing an issue where I cannot get the error response back in my React code. No matter if I use `return next(err)` or `res.send(err)`, the latter gets stuck in the `then` block and does not t ...
Recently, I have been experimenting with DiscordJS and exploring its logging functionality. I am aware that the method I am using is outdated and may not be the most secure for actively changing data, but I am intrigued. let count = JSON.parse(fs.readFile ...