Example HTML Dialog

[NPBogdan]

What information was incorrect, unhelpful, or incomplete?

I believe it's not working as expected. The part where you handleUserInput(). I believe something is not correct.

What did you expect to see?

I expect to see a selected option in the output div, but it shows the btn value. I hope i'm not wrong. I understand the code but i think you wanted to show a selected option.

Do you have any supporting links, references, or citations?

https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue#examples

Do you have anything more you want to share?

Nope.

[github-actions[bot]]

It looks like this is your first issue. Welcome! 👋 One of the project maintainers will be with you as soon as possible. We appreciate your patience. To safeguard the health of the project, please take a moment to read our code of conduct.

[bsmth]

Thanks a lot for opening this one. I took a look through this and I agree it's a little hard to tell what the intention is. What do you think about reducing it down to something like:

<dialog id="termsDialog">
  <p>Do you agree to the Terms of Service(link)?</p>
  <button id="declineButton" value="declined">Decline</button>
  <button id="acceptButton" value="accepted">Accept</button>
</dialog>

<p>
  <button id="openDialog">Review ToS</button>
</p>
<p id="statusText"></p>

And in the JS we have something like:

  // setup etc.

  termsDialog.addEventListener('close', () => {
    statusText.innerText = 'ToS dialog return value: ' + termsDialog.returnValue;
  });

[low-perry]

Hello, I was reading through this issue and noticed the following sentences:

I expect to see a selected option in the output div, but it shows the btn value. I hope i'm not wrong. I understand the code but i think you wanted to show a selected option.

I think the intent of the author of the docs is to show, how the returnValue property of the <dialog> element works. It states that this property "gets or sets the return value for the dialog, usually to indicate which button the user pressed to close it". And if that's the case, the intent was never to show which option the user chose from the dropdown, but what button closed the dialog.