Rearranged tabs when re-opening form wizard in bootstrap-vue modal window

[headkit]

I am using the Form Wizard together with Vue Form Generator inside an Bootstrap-Vue modal popup window. When first initialized everything seems to be fine, but when I close the modal and reopen it the tabs have changed their ordering. The last tab is now the first one.

Any idea why this happens?

[Hadas97]

I have the same issue, did you solve it?

[headkit]

not yet, still on it. what's your scenario? I was trying to reset the wizard with

this.$refs.wizard.reset();

on hideModal() but with no effect at all.

[cesarureno]

I have the same problem, you found how to fix it?

[danwalker-caci]

I did seem to get this fixed using refs. On the modal I used @hidden="onModalHidden" then in the formwizard I set ref called "travelwizard" as this is for a custom travel form. Then the event looks like this: onModalHidden: function(args) { vm.ref['travelwizard'].reset() }, vm is actually 'this' but I use vm set to 'this' on mounted to ensure a proper handle on some events

[danwalker-caci]

So, I tried a different approach and wrapped my form-wizard with vue's keep-alive and this really seems to help maintain order and so far it works great!

[yusrenaltair]

I tried version Bootstrap-Vue 2.7.0 and this problem appeared. I tried version 2.0.0-rc.1, it works well. I think the problem is with the Bootstrap-Vue version. The last safe version for vue-form-wizard inside modal is 2.0.0-rc.19 (I'm using this) IDK what happened with the newest version of Bootstrap-Vue.

[tmorehouse]

Modals are portalled (and lazy). Refs are only available when the modal is open (the content is only rendered when the modal is open).

To disable portaling of the modal, set the static prop on <b-modal>.

[tmorehouse]

The cause of the issue stems from this line:

https://github.com/BinarCode/vue-form-wizard/blob/cfc12ce1dcee2487cba41386415c3660259429fd/src/components/FormWizard.vue#L238

Vue 2.6 caches slot functions. All slots are now functions and this.$slots[name] may return stale vNodes (we ran into this issue with b-tabs)

One needs to run this.$scopedSlots[name](scope) to get a fresh copy of vNodes.

[xerox-xeon]

So, I tried a different approach and wrapped my form-wizard with vue's keep-alive and this really seems to help maintain order and so far it works great!

show your code

[jongbonga]

The cause of the issue stems from this line:

https://github.com/BinarCode/vue-form-wizard/blob/cfc12ce1dcee2487cba41386415c3660259429fd/src/components/FormWizard.vue#L238

Vue 2.6 caches slot functions. All slots are now functions and this.$slots[name] may return stale vNodes (we ran into this issue with b-tabs)

One needs to run this.$scopedSlots[name](scope) to get a fresh copy of vNodes.

Hi @tmorehouse , what should name & scope be in this instance. I'm not sure I'm following

[ggondim]

Modals are portalled (and lazy). Refs are only available when the modal is open (the content is only rendered when the modal is open).

To disable portaling of the modal, set the static prop on <b-modal>.

static seems to solve the problem, but it causes modal to be appended to the parent element. If you have a modal declared inside a div, rather than the body, the modal overlays only it.

[jongbonga]

Modals are portalled (and lazy). Refs are only available when the modal is open (the content is only rendered when the modal is open). To disable portaling of the modal, set the static prop on <b-modal>.

static seems to solve the problem, but it causes modal to be appended to the parent element. If you have a modal declared inside a div, rather than the body, the modal overlays only it.

Noticed that too, I'm trying to avoid the static way

[ggondim]

So, I tried a different approach and wrapped my form-wizard with vue's keep-alive and this really seems to help maintain order and so far it works great!

Tried to wrap both around <form-wizard> and <b-modal>. None of them worked.

But wrapping around the tabs seems to work:

[ggondim]

So, I tried a different approach and wrapped my form-wizard with vue's keep-alive and this really seems to help maintain order and so far it works great!

Tried to wrap both around <form-wizard> and <b-modal>. None of them worked.

But wrapping around the tabs seems to work:

I was wrong. It removed the other tabs.

<keep-alive> around each tab content causes the tabs to be ordered different than DOM declarations:

Then, <keep-alive> didn't work at all.

[LRJasmine]

The cause of the issue stems from this line: https://github.com/BinarCode/vue-form-wizard/blob/cfc12ce1dcee2487cba41386415c3660259429fd/src/components/FormWizard.vue#L238

Vue 2.6 caches slot functions. All slots are now functions and this.$slots[name] may return stale vNodes (we ran into this issue with b-tabs) One needs to run this.$scopedSlots[name](scope) to get a fresh copy of vNodes.

Hi @tmorehouse , what should name & scope be in this instance. I'm not sure I'm following

How did you go about fixing this?