Dialog does not return returnValue correctly on Vue

[mai1202]

main.js

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import '@material/web/button/text-button.js';
import "@material/web/dialog/dialog.js";

createApp(App).use(router).mount('#app')

test.vue

    <md-dialog open>
        <form slot="content" id="form-id" method="dialog">...</form>
        <div slot="actions">
            <md-text-button form="form-id" value="cancel">Cancel</md-text-button>
            <md-text-button form="form-id" value="ok">Ok</md-text-button>
        </div>
    </md-dialog>
</template>

<script setup>
import { onMounted } from "vue";
let d;
onMounted(()=> {
    d = document.querySelector("md-dialog");
    d.returnValue = "default";
    d.addEventListener('close', () => {
        console.log(d.returnValue);
    });
})
</script>

When I close the dialog, the console will output “default”. If remove d.returnValue = "default";, it will output a empty string.

Is it a bug or my wrong?

[asyncliz]

How are you closing the dialog, and what do you expect the return value to be?

If you cancel the dialog by pressing the escape key or clicking the background, the returnValue property is not changed, so it would be "default" since you set it to that, or its default empty string when unset.

When I try using the dialog it correctly reports "default" when canceled and either "cancel" or "ok" when the buttons are pressed.

[mai1202]

How are you closing the dialog, and what do you expect the return value to be?

If you cancel the dialog by pressing the escape key or clicking the background, the returnValue property is not changed, so it would be "default" since you set it to that, or its default empty string when unset.

When I try using the dialog it correctly reports "default" when canceled and either "cancel" or "ok" when the buttons are pressed.

@asyncliz This situation seems to only occur on Vue. Example: https://github.com/mai1202/mw-test

[asyncliz]

Can you provide an online reproduction with something like Stackblitz?

[mai1202]

@asyncliz When I ran it on StackBlitz, it returned

Error in /turbo_modules/@material/[email protected]/button/text-button.js (10:25)
Unexpected token 'export'

Could you run it locally?

[asyncliz]

Unfortunately it's a bit hard to download and run projects on my work laptop.

Is it possible you need to wait for the custom element to register before setting the property? Vue's onMounted() callback may be too early.

<script setup>
import { onMounted } from "vue";
let d;
onMounted(()=> {
    customElements.whenDefined('md-dialog').then(() => {
        d = document.querySelector("md-dialog");
        d.returnValue = "default";
        d.addEventListener('close', () => {
            console.log(d.returnValue);
        });
    });
})
</script>

Can you also let us know what you expect the return value to be, and how you are closing the dialog?

[mai1202]

@asyncliz I tried changing to the code you gave me but it doesn't work.

I think maybe it's not a running time problem. I've tried running it with setTimeout() before, but it still didn't work.

Regarding the return value, I expect it to return “cancel” when I click Cancel and “ok” when I click Ok. And this is a video of it operating on Vue: https://github.com/material-components/material-web/assets/63698132/9ddb835e-c6ae-4c32-9dc5-c1c1a7d728a6

[asyncliz]

The best way we could help figure this out is if we can isolate the problem.

First, can you try installing @material/web@nightly and see if the issue is still present? Let's make sure it didn't get fixed already.

Next, let's try to create a reproduction without Vue. If we can or cannot reproduce it outside of Vue, that will help us narrow it down to something specific with Vue or the dialog element.

[mai1202]

Any progress here?

[asyncliz]

No progress updates to report. Thanks for your patience! We're stretched pretty thin right now

[mai1202]

I've upgraded @material/web to the latest version.

Then I tried using without Vue, as this:https://github.com/mai1202/mw-test/blob/main/without-vue/index.html . It works.

But on Vue, it still did not work.

[asyncliz]

I was able to run your app, and it looks like the value attributes are removed from the text buttons.

This means the dialog doesn't update its returnValue since it can't find a value attribute on the button.

Digging in deeper, it looks like Vue will decide to try and set the property button.value = 'cancel' instead of button.setAttribute('value', 'cancel'). Our property doesn't reflect to the attribute, and then things break.

We can fix this on our end by making the button's value attribute reflects.

[asyncliz]

I filed #5409 to fix it. Should have a fix out shortly, it's pretty straightforward. You can install with @material/web@nightly tomorrow.

[mai1202]

Thank you so much!