Dynamic Modal Sheet is not destroyed after closed and create duplication of modals

[rapgithub]

I have a modal sheet that is created dynamically when clicking a marker on a google map, the modal sheet is created without any issues but when closed there is an error in the console and the modal sheet after closed is in the DOM so when I click again the same marker I open the modal sheet again and in the DOM there are two modal sheets with the same ID… and if I close and open it again now I have three modal sheet with the same ID and so on…

How can I destroy a modal sheet created dynamically so it does not create another modal sheet with same ID all the time every time I close it and open it again?

any solution?
I tried everything and same issue all the time… maybe a bug in the sheet-class.js?

thanks

here the code:

      createSheet(store_id) {

        var self = this;
        var app = self.$app;
        var $ = self.$$; 

        var map_store = app.data.stores.find(item => {
            return item.store_id == store_id;
        });

        var store_id = map_store.store_id;

        var tmp_store = '';

        tmp_store =
            '\
            <div class="sheet-modal demo-sheet-swipe-to-close" style="height:800px">\
              <div class="toolbar">\
                <div class="toolbar-inner justify-content-flex-end">\
                  <a href="#" class="link sheet-close">Close</a>\
                </div>\
              </div>\
            <div class="sheet-modal-inner">\
              {{#each store}}\
              <div class="page-content" ref-store="{{store_id}}">\
              </div>\
              {{/each}}\
              </div>\
            </div>\
            ';

      // Create sheet modal
      if (!self.sheet || self.sheet.destroyed) {
        self.sheet = self.$app.sheet.create({
          swipeToClose: false,
          closeByBackdropClick: false,
          content: Template7.compile(tmp_store)(store),
          on: {
            close: function () {
              console.log('Closing sheet...');
              self.sheet.destroy();
            },
            opened: function () {
              console.log('opened sheet modal!');
            },
          },
        });
      }
      self.sheet.open();
    }

here the error after close I see in the console:

[nolimits4web]

Remove this from close event:

self.sheet.destroy();

You can destroy it in closed event:

closed() {
  setTimeout(() => {
    self.sheet.destroy();
  });
}

[rapgithub]

I will try that and let you know thanks for the tip!

[rapgithub]

Vladimir do you mean using it like this inside on: { … ?

I did it this way inside on: { … ? no error in the console but in the DOM the modal sheet is not destroyed… it duplicates all the time I open the same google marker creating another ID with the same name all the time

if (!self.sheet || self.sheet.destroyed) {
        self.sheet = self.$app.sheet.create({
          content: Template7.compile(tmp_store)(store),
          on: {
            close: function (sheet) {
              console.log('Close sheet...');
            },
            closed: function (sheet) {
              console.log('Closed sheet...');
              self.sheet.destroy();
            },
...

or
where will you write this code?

closed() {
  setTimeout(() => {
    self.sheet.destroy();
  });
}

here my console showing the problem:

[rapgithub]

I did this and worked:

          on: {
            close: function (sheet) {
              console.log('Close sheet...');
            },
            closed: function (sheet) {
              console.log('Closed sheet...');
              setTimeout(() => {
                self.sheet.destroy();
              }, 10);
            },

the code below made it work just fine! no more duplication after sheet is closed:

              setTimeout(() => {
                self.sheet.destroy();
              }, 10);

Thanks, maybe it should be stated in the documentation that when creating dynamic modal sheets the need to destroy after closed event is necessary to avoid duplication of modal sheets and errors… and use a setTimeout with a delay…

thanks Vladimir that fixed the error in the console and also the duplication of modal sheets with same ID names!