Close dialog on click 'outside'

When clicking outside the dialog (on the backdrop) we call the `closeDialog` function. As it is not possible to add event listeners for pseudo-element we rely on the fact that the dialog element is target only when the backdrop is clicked.

packages/components/addon/components/hds/dialog/index.hbs

@@ -1,4 +1,11 @@
-<dialog class={{this.classNames}} ...attributes aria-labelledby={{this.id}} {{did-insert this.setupDialog}}>
+{{! template-lint-disable no-invalid-interactive }}
+<dialog
+  class={{this.classNames}}
+  ...attributes
+  aria-labelledby={{this.id}}
+  {{on "click" this.onClick}}
+  {{did-insert this.setupDialog}}
+>
   {{yield (hash Header=(component "hds/dialog/header" id=this.id closeDialog=this.closeDialog))}}
   {{yield (hash Body=(component "hds/dialog/body"))}}
   {{yield (hash Footer=(component "hds/dialog/footer"))}}

packages/components/addon/components/hds/dialog/index.js

@@ -15,6 +15,15 @@ export default class HdsDialogIndexComponent extends Component {
     element.showModal();
   }
 
+  @action
+  onClick(event) {
+    // This may seem counterintuitive, but the <dialog> element is the target only when the backdrop is clicked
+    // otherwise the target would be a child of the <dialog>
+    if (event.target.tagName === 'DIALOG') {
+      this.closeDialog();
+    }
+  }
+
   @action
   closeDialog() {
     this.element.close();