Linked Questions
68 questions linked to/from Detect click outside React component
4
votes
1
answer
467
views
HTML onUnclick handler? [duplicate]
I want to trigger one handler when an input field is clicked, and another handler when it is deselected (i.e. if someone clicks outside of the field). Is there a way to accomplish this?
The click ...
- 6,388
2
votes
0
answers
119
views
Detect click on outer component [duplicate]
So this is my code:
export default ({user, showFriendsInvitations}) => {
const handleBlur = () => {
console.log('blur');
setShowFriendInvitations(false);
};
const ...
- 5,089
1
vote
0
answers
84
views
Need to simulate a click outside of react dropdown, but in this case its really hard because the code is complex [duplicate]
I need to simulate a click outside of my react dropdown. The problem is, I am a junior dev (not even that) with 3 months experience, non with react. I have tried many tutorials but to no avail. I ...
- 11
1
vote
0
answers
29
views
detect click outside of react component [duplicate]
I have a responsive nav bar in a react app, when the screen size shrinks, the nav buttons disappear and a menu icon appears. I have some state set up where if you click the menu icon, the nav buttons ...
- 155
1
vote
0
answers
24
views
Reactjs Antd Table onRow outside click? [duplicate]
as the title describe, i want to listen a event outside click, how can i do that ?
ref to https://ant.design/components/table#components-table-demo-edit-row
I want to make a editable table. But ...
- 11
212
votes
4
answers
307k
views
CSS media query to target only iOS devices [duplicate]
Is there a @media query to target only devices running iOS?
For example:
@media (min-device-width:320px) and (max-device-width:768px) {
#nav {
yada: yada;
}
}
Would this also alter ...
- 2,485
116
votes
7
answers
182k
views
Listen to keypress for document in reactjs
I want to bind to close the active react bootstrap popover on escape press. Here is the code
_handleEscKey: function(event) {
console.log(event);
if (event.keyCode == 27) {
this.state....
- 6,950
90
votes
1
answer
42k
views
blur event.relatedTarget returns null
I have an <input type="text"> field and I need to clear it when this field loses focus (whiech means that user clicked somewhere on the page). But there is one exception. Input text field should'...
- 3,111
39
votes
6
answers
27k
views
React - ul with onBlur event is preventing onClick from firing on li
I've created a mobile dropdown menu that toggles open and closed based on state. Once it's open, I would like the user to be able to close the dropdown by clicking anywhere outside the ul.
I'm ...
16
votes
4
answers
40k
views
Detect click outside component react hooks
I am trying to use react hooks to determine if a user has clicked outside an element. I am using useRef to get a reference to the element.
Can anyone see how to fix this. I am getting the following ...
- 9,890
33
votes
5
answers
30k
views
Unit testing React click outside component
Using the code from this answer to solve clicking outside of a component:
componentDidMount() {
document.addEventListener('mousedown', this.handleClickOutside);
}
componentWillUnmount() {
...
- 3,022
23
votes
2
answers
43k
views
How can I add a click handler to BODY from within a React component?
I am building a pulldown menu React component that should close when the user clicks anywhere in the DOM outside of the component.
Using jQuery I would typically add an event listener to the body ...
- 6,461
32
votes
3
answers
41k
views
Using 'ref' on React Styled Components is not working
I am having difficulty using refs with Styled Components. When I try to access them in my class methods like below, I get the following error:
Edit.js:42 Uncaught TypeError: this.....contains is not ...
- 22.1k
18
votes
1
answer
20k
views
How do I check if the user clicked inside the current component?
I have a component called Dialog, in which I attach an event listener on mouse clicks on the window object.
componentDidMount() {
document.addEventListener('click', this.handleClick);
}
...
- 11.3k
8
votes
3
answers
25k
views
onblur event is not firing
I need to fire onblur event when I click outside "aside panel", in order to make the panel close if user clicks outside navigation panel.
Though I'm using React JS - but for simplicity I've written ...
- 3,600