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]

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.

[Josh-Cena]

Accepting a PR along @bsmth's suggestion

[bsmth]

the intent was never to show which option the user chose from the dropdown, but what button closed the dialog.

I agree with this, by the way. We should make that clear in the prose before the example. Either it's fixed in the prose or we update it to the suggestion above

[low-perry]

I think the definition also needs to be rewritten.
The returnValue property of the <dialog> element is a string that stores the value provided when the dialog is closed using the .close(returnValue) method.

(I am struggling to come up with a better definition cause you can also set the returnValue just by passing a string to dialog.returnValue = "some string"

The HTML suggestion above (@bsmth ) is better than the original one.
I think the following js would be sufficient:

   const dialog = document.getElementById("termsDialog");
    const openDialog = document.getElementById("openDialog");
    const statusText = document.getElementById("statusText");
    const declineButton = document.getElementById("declineButton");
    const acceptButton = document.getElementById("acceptButton");

    function openCheck(dialog) {
      if (dialog.open) {
        statusText.innerText = "Dialog open";
      } else {
        statusText.innerText = "Dialog closed";
      }
    }

    function handleUserInput(returnValue) {
      if (!returnValue) {
        statusText.innerText += ". There was no return value";
      } else {
        statusText.innerText += ". Return value: " + returnValue;
      }
    }

    openDialog.addEventListener("click", () => {
      dialog.showModal();
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });

    declineButton.addEventListener("click", () => {
      dialog.close("declined");
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });

    acceptButton.addEventListener("click", () => {
      dialog.close("accepted");
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });

    dialog.addEventListener("close", () => {
      openCheck(dialog);
      handleUserInput(dialog.returnValue);
    });