score:2
I just ran into the same thing. It appears that the onClickAway handler is called before the onClick handlers of its children.
In my case clicking away changes the state so that some of its children won't be rendered. The child with the broken onClick was one of those and was rendered in a react portal so onClickAway was being triggered when clicking on this child. This meant that the child would no longer be rendered by the time it would have triggered its onClick handler.
I don't love this workaround, but wrapping the onClickAway handler in a setTimeout (0ms) fixed the issue for me.
An example:
<ClickAwayListener onClickAway={() => setTimeout(onDelete)}>
...
I'm know this question is a little old and I'm not sure if it fixes your problem but I figured it might help someone that runs into this issue.
Source: stackoverflow.com
Related Query
- ClickAwayListener is disabling onClick in a nested component
- onClick event not working within nested React / Next.js component
- OnClick event of nested React component is not firing with Firefox or IE11
- How to conditionally set an onClick attribute to component without having to repeat lines of nested code?
- onClick works but onDoubleClick is ignored on React component
- React onClick event on component
- ReactJS: onClick handler not firing when placed on a child component
- How can I animate a react.js component onclick and detect the end of the animation
- How to optimize small updates to props of nested component in React + Redux?
- How do I get an attribute of an element nested in a React component using Jest and/or Enzyme?
- onClick does not work for custom component
- How to toggle class in the nested component in ReactJS
- Passing a function with React Context API to child component nested deep in the tree
- Setting conditional onClick behaviour in React Component
- How to test a component with a nested container with React and Redux?
- React router Link not causing component to update within nested routes
- React: Nested onclick also triggers parent
- Scroll page to the nested React component on a button click
- Nested React Router : hide parent component on showing nested child component
- How to handle React nested component circular dependency? (using es6 classes)
- how should I build onClick action in my react component + Redux
- How to render a component onClick with React?
- react-router - creating nested routes with no Component nesting
- react-table component onClick event for a column
- Material UI List onClick fires click event on nested list
- Pass state to recursively nested component in React/Redux
- Keyboard dismisses while typing TextInput in nested functional component React Native
- React onClick inside .map then change data in another sibling component
- Pass click event to nested component - React | Material-UI
- Can't override a style of a deeply nested component (Material-UI Jss Styling)
More Query from same tag
- axios.post with formData always return empty
- React TypeScript: (props: OwnProps) => Element' is not assignable to type 'FunctionComponent<{}>
- How to iterate over dictionary of array values to render components? ReactJS
- What is wrong in my "Hello World" example?
- Mapping Object Array Data in Redux
- How to fix problem with arguments in function?
- Error handling redux-promise-middleware
- How do I compare my input to my state array, to prevent duplicate INPUT
- How to go back to the first appearance of state on React
- JavaScript/React - access bound 'this' in new Promise constructor
- disable a function on state change
- React state not getting updated in function call
- How to get NPM reactify working globally?
- Page is rendering but not components although everything compiles and styles can be added outside the component
- How to extend an ArrayInput to iterate on properties of an object
- How can I repeat a function and variable?
- ReactJS component height '100%'
- MERN: Sendgrid returns unathorized when try registering a user
- Trigger function of a specific component - ReactJS
- how to prevent mapped Redux dispatch in props causing re-renders in React
- How to filter records from an api server according to some specific properties in redux using axios
- React, implementing Dark-Light-Mode with localStrorage
- How to filter array of objects in React
- reactjs - How to render a component which render return a component?
- I created one react project and I started working on Routing, Routing is working fine but Navbar is not working properly
- need to remove border from searchbar
- ReactJS / Chatbot with hooks
- Inherit CSS classes in styled-components definitions?
- How to check if react component detached
- React + Webpack/ Create-React-App: Very Big Bundle Size
