search

flekschas / svelte-simple-modal

A simple, small, and content-agnostic modal for Svelte v3 and v4
https://svelte.dev/repl/b95ce66b0ef34064a34afc5c0249f313
MIT License
422 stars 30 forks source link

Can't override closeButton #21

Closed bllfrnch closed 3 years ago

bllfrnch commented 3 years ago

Hello! I've tried overriding closeButton on a project I'm working. In the debugger, I see it get passed in, but the default close button is still shown. I created a repo (forked from https://github.com/mvolkmann/svelte-ssr) to illustrate the issue; looks like neither client nor server code is working properly (and also not sure why there'd be a difference to begin with). You can see the issue here: https://github.com/bllfrnch/svelte-simple-modal-close-button

Follow instructions for building on client or server, and note the modal that's displayed on clicking the button still shows the default close button.

Thanks for all your hard work!

flekschas commented 3 years ago

Thanks for reporting. That's odd. Can you confirm that you're seeing a custom close button in the live demo? https://svelte.dev/repl/033e824fad0a4e34907666e7196caec4?version=3.20.1 (Please click on the Show a customized popup and listen to events!)

I looked at your code and can't find an obvious issue. Could you do me a favor and recreate the issue in https://svelte.dev/repl/ or does the issue only happen locally?

flekschas commented 3 years ago

I had another look at your repo and noticed that you're using a pretty old version of Svelte. Please try again with a more current version like >=3.20.x because SvelteComponent.isPrototypeOf(component) doesn't work with older version of Svelte.

flekschas commented 3 years ago

I just tested the Modal. It turns out you need at least v3.19 to use the custom close button. SvelteComponent.isPrototypeOf isn't available or doesn't work before that. I'll update the README.md accordingly.

bllfrnch commented 3 years ago

Thanks for your reply – I updated the forked repo referenced above to Svelte 3.28.0, and am still not seeing the custom close button.

bllfrnch commented 3 years ago

And here's the same issue demonstrated in the Svelte REPL: https://svelte.dev/repl/33534e6a14864bd09d33318d36988626?version=3.28.0

Yahatix commented 3 years ago

Found the issue. You have to open the modal like so: open(Thing,{}, { closeButton: CloseButton });

Yahatix commented 3 years ago

Also, you can import a npm package in the repl like so: import Modal from 'svelte-simple-modal'

flekschas commented 3 years ago

Good catch @Yahatix! The first argument of open is the modal component, the second argument are the modal component props, and the third argument are options.