CODEWITHSUNDEEP
javascriptreactjsreact-md
Code Wiget
Code Wiget

Reputation: 1682

onClick not firing, event IS a function

I realize there are 400 questions with the same title here, but for every one, the issue is that the onClick method was NOT a function. Mine is.

<button
    type="button"
    key={level}
    onClick={() => {
      console.log("Why Can't You See Me?")
      props.onSelected(item)
    }}
  >
    {title()}
  </button>

I selected the button that I am clicking with chrome developer tools to show that it is 100% the correct button. I'm so confused as to why the onClick isn't firing.

enter image description here enter image description here

The button is positioned "absolute", if that helps. Could there be anything intercepting the onClick event? I'm relatively new to frontend, but I'm assuming that the issue is with something over top of it, but i dont see it at all.

I'm using https://github.com/mlaursen/react-dd-menu, I basically copied their example code. Any thoughts?

Edit: Added a video demonstrating this: https://youtu.be/qnsp4XTAKzI ... something else it taking priority perhaps?

Edit 2: Here is a picture demonstrating the result of jsejcksn's command.. undefined: enter image description here

Edit 3: Replaced {title()} with {"This button does not work"} and it still does not accept clicks.

Edit 4: Reproduced on Codepen: https://codesandbox.io/s/adoring-wozniak-r6vct?fontsize=14&hidenavigation=1&theme=dark

Upvotes: 0

Views: 120

Answers (1)

Matt Carlotta
Matt Carlotta

Reputation: 19772

The problem stems from this line: https://github.com/mlaursen/react-dd-menu/blob/master/src/js/NestedDropdownMenu.js#L45. It's intercepting all clicks and stopping propagation. Removing this line: https://github.com/mlaursen/react-dd-menu/blob/master/src/js/NestedDropdownMenu.js#L54, fixes the issue.

Working example:

Edit festive-varahamihira-cqxym

That said, the react-dd-menu package is extremely dated. I'd recommend looking for other alternatives (or developing your own drop menu!).

Upvotes: 1

Related Questions