Any plans to add support for the HTMLDialogElement?

[derekdon]

Basic info:

• Node.js version: v16.13.0
• jsdom version: 18.1.0

Minimal reproduction case

/**
 * show and showModal don't exist (jsdom + HTMLDialogElement)
 */
// Suite('can have state toggled', async ({element}) => {
//   assert.is(element.open, false);
//   element.show();
//   assert.is(element.open, true);
//   element.close();
//   assert.is(element.open, false);
// });

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

[zarahzachz]

Can anyone speak to the status of this? <dialog> and its show methods are now supported by all modern browsers, but implementation is breaking my unit tests.

Receiving TypeError: dialogNode.show is not a function

Break seems to be related to this change to HTMLDialogElement

[domenic]

The status is that we're waiting on you to submit a pull request implementing this feature :)

[Asim-Tahir]

I think #3403 fixes this.

Workaround for jest

beforeAll(() => {
  HTMLDialogElement.prototype.show = jest.fn();
  HTMLDialogElement.prototype.showModal = jest.fn();
  HTMLDialogElement.prototype.close = jest.fn();
});

Workaround for vitest

beforeAll(() => {
  HTMLDialogElement.prototype.show = vi.fn();
  HTMLDialogElement.prototype.showModal = vi.fn();
  HTMLDialogElement.prototype.close = vi.fn();
});

[ardunster]

It would be great if this could get some more visibility / priority. Using the <dialog> tag increases accessibility functionality (screen readers, keyboard control, automatic focusing on open, etc) over options like hiding/displaying a div to show a dialog and is supported in all the major browsers at this point. We used the workaround listed above to set the functions as prototypes but then also had to rewrite tests against implementation instead of behavior which feels terrible.

[jtrein]

Adding to the workaround posted, if you are using Jest, this may help to do some assertions while we wait for #3403 to be merged.

Mocks

HTMLDialogElement.prototype.show = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = true;
});

HTMLDialogElement.prototype.showModal = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = true;
});

HTMLDialogElement.prototype.close = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = false;
});

Assertions:

// Assert `<dialog>` is shown - probably not necessary in a test, but for proof the value is set
await waitFor(() => {
  expect((screen.getByLabelText(/some aria-label on the dialog/i) as HTMLDialogElement).open).toBe(
    true
  );
});

// Assert some `<dialog>` content is shown. Should work as expected in `@testing-library`, for example.
await waitFor(() => {
  expect(screen.getByText(/Some Title/i)).toBeVisible();
});

[redaaax]

HTMLDialogElement.prototype.show = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = true;
});

HTMLDialogElement.prototype.showModal = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = true;
});

HTMLDialogElement.prototype.close = jest.fn(function mock(
  this: HTMLDialogElement
) {
  this.open = false;
});

I get a ReferenceError: HTMLDialogElement is not defined

[crutchcorn]

@domenic I'd love to help contribute support for this better, but don't know what all this would entail. I'm an experienced engineer, but would love some guidance on what next steps would be so that I can open a PR to fix :)

[Mange]

When implementing this, I think we should also implement the HTMLDialogElement.returnValue and <form method="dialog"> system.

[stefanonepanedap]

I am not sure if the current implementation supports it, but the "cancel" event would be a nice addition...

[nezed]

I was lucky to find that happy-dom already have a very nice basic implementation it.

It still lacks some things like returnValue and keyboard accessibility, maybe this would inspire someone:

• https://github.com/capricorn86/happy-dom/blob/v12.10.3/packages/happy-dom/src/nodes/html-dialog-element/HTMLDialogElement.ts
• https://github.com/capricorn86/happy-dom/blob/v12.10.3/packages/happy-dom/test/nodes/html-dialog-element/HTMLDialogElement.test.ts