CODEWITHSUNDEEP
javascriptreactjs
Balanjaneyulu K
Balanjaneyulu K

Reputation: 4324

Unable to trigger onClick event

I have a Div element with input and FontIcons as child elements. When I enter or update any value in the input controller and moves the focus out of that, onBlur event is called. Here, I also have a click handle on font icon and it is not working as expected.

When I update the input element and click on FantoIcon, Only blur event is triggered but not click event.

How can we trigger click instead of blur event? I tried keeping zIndext but no luck

<div>
    <input onBlur={this.onBlurHandler}>
    <FontIcon onClick ={this.clickHandle}>
</div>

enter image description here

Upvotes: 2

Views: 593

Answers (1)

Yuan-Hao Chiang
Yuan-Hao Chiang

Reputation: 2603

<FontIcon> is probably not receiving extra props. If it's your component, you can add it:

export const FontIcon({ propA, propB ...props }) {
  return (
    <div {...props}>
      // whatever goes here
    </div>
  );
}

If it is not your component, then wrap it in a <button> or div with role=button:

<button onClick={this.clickHandle}>
  <FontIcon />
</button

Upvotes: 2

Related Questions