Merge pull request #35 from github/set-loading-state-before-debouncing

Set input as invalid on input before debounce

Author: koddsson

README.md

@@ -50,19 +50,31 @@ check.addEventListener('error', () => container.classList.add('is-error'))
 
 ### Auto-check events
 
+**`auto-check-start`** is dispatched on when there has been input in the element. In `event.detail` you can find:
+
+- `setValidity`: A function to provide a custom failure message on the input. By default it is 'Verifying…'.
+
+
+```js
+const input = check.querySelector('input')
+
+input.addEventListener('auto-check-start', function(event) {
+  const {setValidity} = event.detail
+  setValidity('Loading validation')
+})
+```
+
 **`auto-check-send`** is dispatched before the network request begins. In `event.detail` you can find:
 
 - `body`: The FormData request body to modify before the request is sent.
-- `setValidity`: A function to provide a custom validation message while the request is in-flight. By default it is 'Verifying…'.
 
 
 ```js
 const input = check.querySelector('input')
 
 input.addEventListener('auto-check-send', function(event) {
-  const {body, setValidity} = event.detail
+  const {body} = event.detail
   body.append('custom_form_data', 'value')
-  setValidity('Checking with server…')
 })
 ```
 

src/index.js

@@ -21,6 +21,8 @@ export default class AutoCheckElement extends HTMLElement {
     const state = {check: checker, controller: null, previousValue: null}
     states.set(this, state)
 
+    input.addEventListener('change', setLoadingState)
+    input.addEventListener('input', setLoadingState)
     input.addEventListener('change', checker)
     input.addEventListener('input', checker)
     input.autocomplete = 'off'
@@ -35,6 +37,8 @@ export default class AutoCheckElement extends HTMLElement {
     if (!state) return
     states.delete(this)
 
+    input.removeEventListener('change', setLoadingState)
+    input.removeEventListener('input', setLoadingState)
     input.removeEventListener('change', state.check)
     input.removeEventListener('input', state.check)
     input.setCustomValidity('')
@@ -91,6 +95,36 @@ export default class AutoCheckElement extends HTMLElement {
   }
 }
 
+function setLoadingState(event: Event) {
+  const input = event.currentTarget
+  if (!(input instanceof HTMLInputElement)) return
+
+  const autoCheckElement = input.closest('auto-check')
+  if (!(autoCheckElement instanceof AutoCheckElement)) return
+
+  const src = autoCheckElement.src
+  const csrf = autoCheckElement.csrf
+  const state = states.get(autoCheckElement)
+
+  // If some attributes are missing we want to exit early and make sure that the element is valid.
+  if (!src || !csrf || !state) {
+    return
+  }
+
+  let message = 'Verifying…'
+  const setValidity = text => (message = text)
+  input.dispatchEvent(
+    new CustomEvent('auto-check-start', {
+      bubbles: true,
+      detail: {setValidity}
+    })
+  )
+
+  if (autoCheckElement.required) {
+    input.setCustomValidity(message)
+  }
+}
+
 function makeAbortController() {
   if ('AbortController' in window) {
     return new AbortController()
@@ -114,19 +148,22 @@ async function fetchWithNetworkEvents(el: Element, url: string, options: Request
 }
 
 async function check(autoCheckElement: AutoCheckElement) {
-  const src = autoCheckElement.src
-  if (!src) {
-    throw new Error('missing src')
-  }
-  const csrf = autoCheckElement.csrf
-  if (!csrf) {
-    throw new Error('missing csrf')
-  }
   const input = autoCheckElement.input
-  if (!input) return
+  if (!input) {
+    return
+  }
 
+  const src = autoCheckElement.src
+  const csrf = autoCheckElement.csrf
   const state = states.get(autoCheckElement)
-  if (!state) return
+
+  // If some attributes are missing we want to exit early and make sure that the element is valid.
+  if (!src || !csrf || !state) {
+    if (autoCheckElement.required) {
+      input.setCustomValidity('')
+    }
+    return
+  }
 
   const body = new FormData()
   body.append('authenticity_token', csrf)
@@ -136,24 +173,20 @@ async function check(autoCheckElement: AutoCheckElement) {
   if (id && id === state.previousValue) return
   state.previousValue = id
 
-  let message = 'Verifying…'
-  const setValidity = text => (message = text)
+  if (!input.value.trim()) {
+    if (autoCheckElement.required) {
+      input.setCustomValidity('')
+    }
+    return
+  }
+
   input.dispatchEvent(
     new CustomEvent('auto-check-send', {
       bubbles: true,
-      detail: {body, setValidity}
+      detail: {body}
     })
   )
 
-  if (!input.value.trim()) {
-    input.dispatchEvent(new CustomEvent('auto-check-complete', {bubbles: true}))
-    return
-  }
-
-  if (autoCheckElement.required) {
-    input.setCustomValidity(message)
-  }
-
   if (state.controller) {
     state.controller.abort()
   } else {

test/test.js

@@ -44,6 +44,13 @@ describe('auto-check element', function() {
       assert.isFalse(input.checkValidity())
     })
 
+    it('invalidates the input element on keypress', async function() {
+      const inputEvent = once(input, 'change')
+      triggerChange(input, 'hub')
+      await inputEvent
+      assert.isFalse(input.checkValidity())
+    })
+
     it('invalidates input request is in-flight', async function() {
       triggerChange(input, 'hub')
       await once(checker, 'loadstart')
@@ -66,7 +73,7 @@ describe('auto-check element', function() {
     it('customizes the in-flight message', async function() {
       checker.src = '/fail'
       const send = new Promise(resolve => {
-        input.addEventListener('auto-check-send', event => {
+        input.addEventListener('auto-check-start', event => {
           event.detail.setValidity('Checking with server')
           resolve()
         })
@@ -174,6 +181,23 @@ describe('auto-check element', function() {
       triggerChange(input, 'hub')
     })
 
+    it('emits auto-check-start on input', function(done) {
+      input.addEventListener('auto-check-start', () => done())
+      input.value = 'hub'
+      input.dispatchEvent(new InputEvent('input'))
+    })
+
+    it('emits auto-check-start on change', function(done) {
+      input.addEventListener('auto-check-start', () => done())
+      triggerChange(input, 'hub')
+    })
+
+    it('emits auto-check-send 300 milliseconds after keypress', function(done) {
+      input.addEventListener('auto-check-send', () => done())
+      input.value = 'hub'
+      input.dispatchEvent(new InputEvent('input'))
+    })
+
     it('emits auto-check-success when server responds with 200 OK', async function() {
       triggerChange(input, 'hub')
       const event = await once(input, 'auto-check-success')
@@ -208,6 +232,14 @@ describe('auto-check element', function() {
       input.dispatchEvent(new InputEvent('change'))
       input.dispatchEvent(new InputEvent('change'))
     })
+
+    it('do not emit if essential attributes are missing', async function() {
+      const events = []
+      checker.removeAttribute('src')
+      input.addEventListener('auto-check-start', event => events.push(event.type))
+      triggerChange(input, 'hub')
+      assert.deepEqual(events, [])
+    })
   })
 })