How to make button onClick property work inside of fancybox modal?

[dappbuildernet]

Hi,

I am struggling to make onClick handlers work in a fancybox modal.

I have tried to:

• use onClick property directly
• pass it with props to a button component
• copy the whole html code to as modal's source/frame
• add event listener (fails)

= the result is the same: the onClick property is not rendered (I think this is because the modal element was hidden by default), according to inspection, and nothing happens on click event.

Has anyone solved this issue, or better use another modal?

Thank you.

[fancyapps]

Hi,

Sorry, but I can not help you without seeing your page/demo. If you would create a jsfiddle/codepen/etc demo, that would be great.

[dappbuildernet]

HI,

Here you are:

https://codesandbox.io/s/interesting-spence-kwp5mt

Buttons are not catching click events inside of a fancybox.

[fancyapps]

Thanks for the demo, that looks like a React thing, because it works fine using plain JS - https://jsfiddle.net/ygtjh3k8/
I will try to find the cause and solution.

[fancyapps]

Sorry, but I couldn't find a solution to this problem. You see, React strips all events from "real" DOM, creates virtual DOM and uses synthetic event wrapper. Therefore, if you change location of the element using plain JS, virtual DOM is out of sync and events do not work.

The only solution I could think of is to display an empty element and render your component directly inside it, like this:

Fancybox.show(
  [
    {
      src: "<div></div>",
      type: "html",
    },
  ],
  {
    on: {
      reveal: (_fancybox, slide) => {
        const root = createRoot(
          slide.contentEl.appendChild(document.createElement("div"))
        );

        root.render(
          <button onClick={() => alert("click")}>
            Click me (component)
          </button>
        );
      },
    },
  }
)

https://codesandbox.io/s/festive-matan-y3wtzf?file=/src/App.js

[dappbuildernet]

Hi,

Thank you, looks like a really working way! Will try to use it in my project.