0

I use reactstrap. I have this kind of <button> with an icon inside :

{this.props.mode === "update" 
  ? 
     <Button 
        className="btn btn-danger btn-sm" 
        onClick={() => this.deleteQuestion()}
     >
       <i className="fa fa-trash"></i>  
     </Button> 
  : null 
}

If I click on the icon, the function in not triggered.
If I click outside the icon (but inside the button), the function is triggered.

What is this mystery? I am a beginner in React and react-strap.

halfer
  • 19,824
  • 17
  • 99
  • 186
Dom
  • 2,984
  • 3
  • 34
  • 64
  • Did you try putting onClick function on the icon itself? – Ayesha Iftikhar Apr 04 '20 at 16:56
  • 2
    You can also try removing pointer events from the icon. ` ` – Zachary Haber Apr 04 '20 at 16:57
  • This is the first time I have seen something weird like this. Agree with Haber's solution, but I think it is a bit waste of effort. I recommend you should give `Ant Design` or `Material-UI` a try for larger community support. Have a look at [this Antd Button](https://ant.design/components/button/) – Cam Song Apr 04 '20 at 17:15
  • Does this answer your question? [What is event bubbling and capturing?](https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing) – MwamiTovi Apr 04 '20 at 17:34

2 Answers2

2

The reason it behaves this way is because icon captures click before it is propagated to the button. The easiest way to fix this is to add the following in your css

.btn i.fa{
  pointer-events: 'none';
}

it will fix it for all the buttons in your project

Max Gram
  • 685
  • 4
  • 14
  • Hi Max. thank for the answer. I think it is the best one in my context. Even if I discovered that there is a lot of other available answers. I tried and it works. – Dom Apr 05 '20 at 08:29
1

There is a concept called event capturing and event bubbling in JavaScript. Take a look at Event Capturing and Event Bubbling. This concept helps you overcome the problem that you're facing currently.Take a look at this. You can add the same function onClick to the icon too. This will help you as well!!.. There are so many design templates available you can try those too. For eg. There's Ant Design. Hope it helps!!.. Happy Coding!!

Anglesvar
  • 1,132
  • 8
  • 15