Skip to content

Add event detail - eventType to 'remote-input-success' customEvent #34

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Apr 8, 2024
Merged

Add event detail - eventType to 'remote-input-success' customEvent #34

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
5fb21bb
Add event detail - eventType to success customEvent
kendallgassner Mar 28, 2024
7886c72
clean;
kendallgassner Mar 28, 2024
a0aab0e
fix debounce
kendallgassner Mar 29, 2024
92337bc
Add instanceof to error
TylerJDev Mar 29, 2024
4a212b1
Update test
TylerJDev Mar 29, 2024
a2157a3
Merge branch 'kendallg/add-event-detail-eventType' of https://github.…
TylerJDev Mar 29, 2024
07422fd
formatting
TylerJDev Mar 29, 2024
af8252a
add back eslint
TylerJDev Mar 29, 2024
5c96242
remove lint for now -- will add updated lint versions in a new PR
TylerJDev Mar 29, 2024
e120777
Apply suggestion from @kendallgassner
kendallgassner Mar 29, 2024
7fdbaad
Apply suggestions from code review
kendallgassner Mar 29, 2024
b5e7c4f
formatting
TylerJDev Mar 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,8 @@ const states = new WeakMap()
class RemoteInputElement extends HTMLElement {
constructor() {
super()
const fetch = fetchResults.bind(null, this, true)
const state = {currentQuery: null, oninput: debounce(fetch), fetch, controller: null}
const fetch = (e: Event) => fetchResults.bind(null, this, true, e)
const state = {currentQuery: null, oninput: (e: Event) => debounce(fetch(e)), fetch, controller: null}
Copy link
Contributor

@keithamus keithamus Mar 28, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this would be better:

Suggested change
const state = {currentQuery: null, oninput: (e: Event) => debounce(fetch(e)), fetch, controller: null}
const state = {currentQuery: null, oninput: debounce((e: Event) => fetch(e)), fetch, controller: null}

Copy link
Contributor Author

@kendallgassner kendallgassner Mar 29, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good point!

states.set(this, state)
}

Expand Down Expand Up @@ -68,7 +68,7 @@ function makeAbortController() {
return {signal: null, abort() {}}
}

async function fetchResults(remoteInput: RemoteInputElement, checkCurrentQuery: boolean) {
async function fetchResults(remoteInput: RemoteInputElement, checkCurrentQuery: boolean, event?: Event) {
const input = remoteInput.input
if (!input) return

Expand Down Expand Up @@ -121,7 +121,7 @@ async function fetchResults(remoteInput: RemoteInputElement, checkCurrentQuery:

if (response && response.ok) {
resultsContainer.innerHTML = html
remoteInput.dispatchEvent(new CustomEvent('remote-input-success', {bubbles: true}))
remoteInput.dispatchEvent(new CustomEvent('remote-input-success', {bubbles: true, detail: { "eventType": event? event.type : undefined}}))
} else {
remoteInput.dispatchEvent(new CustomEvent('remote-input-error', {bubbles: true}))
}
Expand Down
11 changes: 11 additions & 0 deletions test/test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@ describe('remote-input', function() {
it('loads content again after src is changed', async function() {
const result1 = once(remoteInput, 'remote-input-success')
changeValue(input, 'test')


await result1
assert.equal(results.querySelector('ol').getAttribute('data-src'), '/results?q=test')
Expand All @@ -122,6 +123,16 @@ describe('remote-input', function() {
await result2
assert.equal(results.querySelector('ol').getAttribute('data-src'), '/srcChanged?q=test')
})

it('check eventType', async function() {
const result = Promise(() => {
element.addEventListener(eventName, (event) => {
assert.equal(event.detail.eventType, 'change')
}, {once: true})
})
changeValue(input, 'test')
await result
})
})
})

Expand Down