Vue-material: [mdList] md-list-expand inside a dialog box are open by default

[arnoldmq]

When putting a list with expandable items inside a dialog box, the expandable items are open automatically, and some of those item in the expand element go under the main list items

Steps to reproduce

• create a dialog box,
  -put list with expand items inside,
  -make dialog box big enough that the list will fit in it with the expandable items open,
  -open dialog box
  -now that expandable items are open automatically

Which browser?
chrome , ie

What is expected?
md-list-expand remain close when dialog is open

What is actually happening?
md-list-expand are open when dialog is open

Reproduction Link
http://codepen.io/anon/pen/dWobzK
(to see the issue make the result window in codepen bigger than it usually , if the md-dialog is small then the issue doesnt show, its mostly when the dialog box is bigger)

[coppee]

Any clue ?

[vizv]

Check margin-bottom of md-list-expand, it gives 0 instead of the scrollHeight of md-list-expand, and that's why it looks like already expanded on open.

I have a similar issue for the margin-bottom of md-list-expand may relate to your problem. A PR should come soon.

[mlg-ipleic]

Anyone found solution to this, latest release is not working for me :/ still reproducible

[vizv]

Well, PR #911 is a little bit different case. Could you guys check active state of md-list-expand. I think it might be the active state is somehow be set to true.

[vizv]

@gywgithub I just checked, on button clicked md-list-expand has style="margin-bottom: 0;" which cause the list looks like expanded. I'll look into this issue later.

[vizv]

I found the problem:

When the page loads, margin-bottom was set to its height:

          'margin-bottom': this.height

mdListItemExpand.vue Line 49

and the height was calculated from:

          this.height = -this.$refs.expand.scrollHeight + 'px';

mdListItemExpand.vue Line 67

However, in a dialog the element has a style of display: none at the time when page loads, and thus this.height is calculated to 0px, and margin-bottom is set to 0 initially, and the list appeared to be expanded by default.

I'm thinking with a solution to solve this right now.

[vizv]

@gywgithub actually, if you change v-show to v-if, the problem will be solved.

[vizv]

@arnoldmq I can't fix it due to current mdDialog implementation.

But one (ugly?) hack I can think of is:

add a line to openDialog(ref) method:

      document.querySelectorAll('.md-list-item-expand').forEach((el) => { el.__vue__.calculatePadding() })

[gywgithub]

@vizv
Thank you very much for the perfect solution to my problems .

[synio-wesley]

Also had this problem. Thanks @vizv, you way works, but it gave me another idea. With your solution, the items close with an effect when the dialog opens, I would like them closed without any effect on opening the dialog. So I came up with this solution:

a dialogShown data property which I toggle to true on opening a dialog and false on closing a dialog, and then I use v-if="dialogShown" on the md-list to force a render. Seems to work!

Could also fix the problem with md-tabs in an md-dialog (I also had this problem).

Sample implementation:

const app = new Vue({
    el: '#app',
    data: {
        dialogShown: false
    },
    methods: {
        openDialog(ref) {
            this.$refs[ref].open();
            this.dialogShown = true; // Important to do it after opening.
        },
        closeDialog(ref) {
            this.$refs[ref].close();
            this.dialogShown = false; // Important to reset it (when multiple dialogs are being used)
        },
    }
});

    <md-dialog v-cloak ref="test-dialog">
        <md-dialog-title>Dialog title</md-dialog-title>
        <md-dialog-content>
            <md-list v-if="dialogShown">
                <md-list-item v-for="n in 4">
                    <span>Test item</span>
                    <md-list-expand>
                        <md-list>
                            <md-list-item>
                                Test subitem
                            </md-list-item>
                        </md-list>
                    </md-list-expand>
                </md-list-item>
            </md-list>
        </md-dialog-content>
    </md-dialog>

[Samuell1]

Closing this issue as our focus is on the new 1.0.0 version.