Merge pull request #39 from github/required-attr-change

dgraham · web-flow · commit 13e844cc2997 · 2019-10-16T10:32:09.000-06:00
Respond to required attribute changes
diff --git a/src/index.js b/src/index.js
@@ -40,6 +40,18 @@ export default class AutoCheckElement extends HTMLElement {
     input.setCustomValidity('')
   }
 
+  attributeChangedCallback(name: string) {
+    if (name === 'required') {
+      const input = this.input
+      if (!input) return
+      input.required = this.required
+    }
+  }
+
+  static get observedAttributes(): Array<string> {
+    return ['required']
+  }
+
   get input(): ?HTMLInputElement {
     const input = this.querySelector('input')
     return input instanceof HTMLInputElement ? input : null
@@ -71,10 +83,6 @@ export default class AutoCheckElement extends HTMLElement {
   }
 
   set required(required: boolean) {
-    const input = this.input
-    if (!input) return
-
-    input.required = required
     if (required) {
       this.setAttribute('required', '')
     } else {
diff --git a/test/test.js b/test/test.js
@@ -40,8 +40,7 @@ describe('auto-check element', function() {
     })
 
     it('invalidates empty input', function() {
-      // FIXME Must implement attributeChanged callback.
-      checker.required = true
+      assert.isTrue(input.hasAttribute('required'))
       assert.isFalse(input.checkValidity())
     })
 
