quasar: Dialog component no longer able to close and also buttons miss-functioning since upgrading to 0.14.6

Software version: Quasar: 0.14.6 OS: Windows 10 Node: 8.6.0 NPM: 5.4.2 Browsers: Chrome & FireFox iOS: Android: Material theme

Issue with Dialog box since upgrading to 0.14.6 The following code stopped working since upgrading (worked fine on previous versions). When trying to click button 1 the console logs the click but fails to close the dialog. When clicking button 2 nothing happens - seems the handler isn’t called. Also - clicking outside the dialog or using the ESC key no longer closes the Dialog.

Here’s my test.vue component:

 <template>
 <div>
    Test area
</div>
</template>

<script>
    import {
       QBtn,
       QIcon,
       QModal,
       Dialog
   } from 'quasar-framework'

    export default {
       name: 'Test',
       components: {
        QBtn,
        QIcon,
        QModal
       },
       data()  {
           return {}
       },
       computed: {
       },
       methods: {
           testDialog() {
                var that = this;
                let tmpDialog = Dialog.create({
                    title: 'Test Dialog',
                    noBackdropDismiss: false,
                    buttons: [
                    {
                        label: 'Button 1',
                        preventClose: true,
                        handler(data, closeThis) {
                            console.log("Button 1 clicked");
                            closeThis();
                         }
                    },
                    {
                        label: 'Button 2',
                        handler(data) {
                            console.log("Button 2 clicked");
                        }
                    }
                    ]
               });
           },
       },
       mounted () {
           this.testDialog();
       },
       nextTick() {},
       updated () {}
   }
</script>

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 1
  • Comments: 24 (10 by maintainers)

Most upvoted comments

Until v0.15 is available, for v0.14 a workaround would be to disable this back-button feature completely by adding this in main.js:

import { Platform } from 'quasar'
Platform.has.popstate = false

Sorry for the delay. I’m sure you all want v0.15 to be perfect when released.

I’m glad to hear that there will be many improvements. I wish you success!

Although this started out as a top feature to set the framework apart from all the rest, it caused more grief than what it brought good to a website/app. The fault is in the History API design and we can’t do anything about it unfortunately.

As a result, this feature has been dropped from v0.15. This greatly simplifies many areas of the framework:

  • You will no longer need QSideLink in drawers. You can directly tell the vue router to go to another route and it will do so without the need to get a Vue reference on the drawer to call its close/hide method. Same applies to QModals and all the components that were using popstate.
  • QModals, QPopovers etc now work flawlessly with HMR too, and they can fully support a v-model instead of using references. And this is just the tip of the iceberg. The overall complexity of app-space code for a website/app with Quasar will drop significantly.

This behavior will go away 100% on v0.15 (to be released really soon).