Sequential use of the same Modal

[plckr]

Thanks for the package, looks great 💪

I have a question, I'm trying to implement the same Modal to appear twice, one after the other. When the user submits the first Modal, the second will appear. Sadly, isn't working perfectly

PS: I'm using bootstrap

const inputModal = useModal(ModalInput)

inputModal.show({ title: 'Step 1', defaultValue: 'Hello' }).then((r) => {
  inputModal.show({ title: 'Step 2', defaultValue: 'World' }).then((r) => alert(r.value))
})

That alert at the end, is reporting the value from the first Modal, also, the second defaultValue never appears, I guess the second Modal never shows. I tried added a hide() before the show() but couldn't make it work (maybe hide() doesn't return a promise so I can wait for it to hide)

How should I make this work? Is this a limitation or can I have a workaround to make it work?

[supnate]

Is title changed to 'Step 2' ? If so, it should be because the modal is not re-mount, so though default value is updated, the input will not use it again. If you need a new mounted modal, you can resolve it in onExited prop for bootstrap modal:

<BootstrapDialog
  onOk={() => modal.hide();}
  onExited:={() => {  modal.remove(); modal.resolve(); }}
  ...

Then you should be able to chain it.

[supnate]

If you don't want to re-mount the modal, you can also reset the form with input in the modal before calling modal.resolve.

[plckr]

Is title changed to 'Step 2' ?

Yes, it's showing

---

onOk doesn't exist on Bootstrap I want to re-mount the Modal but it's not working, assuming the first example I give and your onExited, it should work?

[plckr]

Now I understand what you meant, but there's a problem. I don't want to hide it instantly, before hide I want to do some processing on background, then outside the modal I call the hide()

When the user submits, the promise is resolved with the current value inserted, but stays opened

[plckr]

Consider the following code, this is how I'm doing https://codesandbox.io/s/nice-modal-sequential-use-of-the-same-modal-li2ng

[supnate]

It needs some workaround for such case: https://codesandbox.io/s/nice-modal-sequential-use-of-the-same-modal-forked-qbspg?file=/src/App.js .

However, it would be better handle the wizard logic in the dialog, for example, create a WizardDialog to handle next/prev navigations.

[plckr]

However, it would be better handle the wizard logic in the dialog, for example, create a WizardDialog to handle next/prev navigations.

My InputModal is a generic modal used across the entire App, so isn't beneficial to have a wizard system.

---

Your example looks nice, but unfortunately not perfect. In my case I handle the modal's hide outside of the modal itself, so in your code it needs to declare the modals (modal1, modal2, etc) at the component's root, making it a dirty solution since I don't know how many modals will be needed. And resulting in unnecessary code IMO.

One possible solution I thought, was having the hide() method returning a Promise, and is resolved when the modal is fully hidden. That way I can use the same modal in sequence, and keeping the animations. What do you think?

EDIT: Example code:

const modal = useModal(ModalInput)

const onClick = () => {
  modal.show({ title: "Step 1" }).then(r => {
    console.log(r)
    modal.hide().then(() => {
      modal.show({ title: "Step 2" }).then(r => {
        console.log(r)
        modal.hide()
      })
    })
  })
}

[supnate]

hmm, seems a reasonable case. I will consider adding promise for hide method.

[plckr]

Let me know if you have plans to make the change soon, if not, I can try to do this myself.

[supnate]

Yes, I plan to do it this week.

[supnate]

Done, plz look at the example: https://ebay.github.io/nice-modal-react/#promise . Let me know if something is missing.

[supnate]

Use the latest v1.1.0 .

[plckr]

Wow 🎉 Works like a charm, and it's so smooth. Thanks a lot!