sweet-modal-vue

sweet-modal-vue copied to clipboard

Hello everyone!

I was facing a bug this other day that my scrollbars disappear for whatever reason. Today I was able to confirm that it is because of SweetModal.

The modal opens, it's all good, but my component looks like this:

<template>
<div>
  <h2 class="ui header">
    <i class="delete icon"></i>
    <div class="content">
      {{ $t('enterprises.tabs.settings.delete.title') }}
      <div class="sub header">
      {{ $t('enterprises.tabs.settings.delete.subHeader') }}
      </div>
    </div>
  </h2>
  <div class="ui negative message">
    <div class="header">
      {{ $t('enterprises.tabs.settings.delete.messageHeader') }}
    </div>
    <p> {{ $t('enterprises.tabs.settings.delete.message') }}</p>
  </div>
  <button @click="confirm" class="ui red button">
    {{ $t('enterprises.tabs.settings.delete.title') }}
  </button>
  <sweet-modal
    ref="confirmationModal"
    overlay-theme="dark"
    icon="warning">
    <template slot="title">
      {{ $t('enterprises.tabs.settings.delete.modalTitle') }} - {{ enterprise.name }}
    </template>
    <template slot="default">
      {{ $t('enterprises.tabs.settings.delete.deleteConfirmation') }}
    </template>
    <template slot="button">
      <div class="ui red button" @click="deleteProject">{{ $t('actions.yes') }}</div>
      <div class="ui basic button" @click="$refs.confirmationModal.close()">{{ $t('actions.no') }}</div>
    </template>
  </sweet-modal>
</div>
</template>
<script>
import {SweetModal} from 'sweet-modal-vue'

export default {
  name: 'DeleteEnterpriseForm',
  props: {
    enterprise: {
      type: Object,
      default: null
    }
  },
  methods: {
    confirm: function () {
      this.$refs.confirmationModal.open()
    },
    deleteProject: function () {
      this.$store.dispatch('enterprises/delete', {
        item: this.enterprise
      })
    }
  },
  components: {
    SweetModal
  }
}
</script>
<style scoped>
.ui.header {
  padding-bottom: 1em;
}
</style>

Notice that inside my deleteProject method, there is no explicit close. When there is no explicit closure of the modal, _unlockBody will not be called. Without it being called, there no scroll bars.

A quick fix here is to call modal.close() inside the delete method.

I'm facing the same issue, except .close() doesn't resolve my one.

unlockBody isn't being called when the sweet-modal component is inside an

E.g. bootstrap nav element which is actually a stand-alone component. Bad design, and I'll refactor that, but still sweet-modal should handle that.

Can someone of you provide a minimal project with only Vue, SweetModal and one of thise problematic situations you encountered?

I can also confirm this happens as well.

Template

<button @click="add()">Add</button>

<sweet-modal ref="modal" title="Add Hole" :enable-mobile-fullscreen="true">
       <button class="button scorecard-form--save"  @click="save()">Save</button>
</sweet-modal>

Methods

add(){
      this.$refs.modal.open();
},

save(){
              
                axios.post('/api/add',{
                    data: this.data,
                })
                .then( response => {
                    <!-- Modal Auto closes before this function for some reason -->

                    this.$refs.modal.close();
                    
                })
                .catch( error => {
                    console.log(error);
                });
                
            },

Error:

this.$refs.modal.close() fails since modal closes before right after the response so the body is stuck. If i remove this.$refs.modal.close() the modal closes still after the response but body is still stuck.

This is happening in my code as well.

I've dug into the build and added logs for the open, lock, unlock and close methods. When I click to close the modal it actually unlocks correctly but the problem is caused because it immediately calls the open method again. It happens if I click the background overlay too so I know it's not clicking through to links behind the modal. I stopped digging into the code as soon as I saw this timeout method setTimeout(() => this.visible = true, 30) I suggest you might want to refactor this as I'm sure it contributes to this issue.

Thanks!

I had this problem as well but resolved it with nextTick. this.$nextTick(() => { this.$refs.modal.open(); });

https://vuejs.org/v2/api/#Vue-nextTick

I'm facing the same issue. The scrollbar dissapears when the modal get's closed. This is a major bug that makes sweetmodal useless.

same problem, in axios response sweet-modal closed successful but in body still height: 100%; overflow: hidden;

              .then(response => {
                this.notification("Success", "Added", "success");
                this.$refs.projectCashAdvanceModal.close()
              }).catch(error =>{
                    console.log(error)
            })

For googlers: try move <sweet-modal> tag to level up in DOM tree.

I solved same issue:

before:

<div>
  <button>Open
    <sweet-modal>...</sweet-modal>
  </button>
</div>

After:

<div>
  <button>Open</button>
  <sweet-modal>...</sweet-modal>
</div>

In my case I had accidentally opened the modal twice, essentially having code similar to:

<div @click="openModal">
    <a href="#" @click="openModal">Open</a>
</div>

So that when it was closed, it was seemingly only closing one instance, keeping the styles on the HTML element. Might not be the same for everyone else, but hopefully it helps someone.