Skip to content
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

feat(ld-select): add filter feature #379

Merged
merged 11 commits into from
Jul 25, 2022
Merged

feat(ld-select): add filter feature #379

Changes from 1 commit
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
6d99a2b
feat(ld-select): add filter feature
borisdiakur Jul 16, 2022
345d943
feat(ld-select): add filter feature
borisdiakur Jul 19, 2022
065a7a1
test(ld-select): re-organize unit tests
borisdiakur Jul 19, 2022
d871162
fix(ld-modal): hide displaced focus outlines
borisdiakur Jul 19, 2022
15f456a
chore(release): 2.3.1 [skip ci]
semantic-release-bot Jul 19, 2022
6fa827f
docs(ld-notification): remove will-change to make fixed position work
borisdiakur Jul 20, 2022
3ff9f20
test(ld-select): add unit and e2e tests for filter
borisdiakur Jul 21, 2022
346c19b
test(ld-select): add unit and e2e tests for filter
borisdiakur Jul 21, 2022
dadf185
test(ld-select): add unit and e2e tests for filter
borisdiakur Jul 21, 2022
124ca7c
refactor(ld-select): apply review suggestions
borisdiakur Jul 21, 2022
5e260f6
refactor(ld-select): remove unnecessary castings
borisdiakur Jul 25, 2022
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
28 changes: 14 additions & 14 deletions src/liquid/components/ld-select/ld-select.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -282,6 +282,11 @@ export class LdSelect implements InnerFocusable {
})
}

private isLdOption = (
el: HTMLElement | Node | EventTarget
): el is HTMLLdOptionElement | HTMLLdOptionInternalElement =>
['LD-OPTION', 'LD-OPTION-INTERNAL'].includes((el as HTMLElement)?.tagName)

private updatePopperWidth = () => {
this.listboxRef.style.setProperty(
'width',
Expand Down Expand Up @@ -464,11 +469,7 @@ export class LdSelect implements InnerFocusable {
}

private handleSlotChange = (mutationsList: MutationRecord[]) => {
if (
!mutationsList.some(
(record) => (record.target as HTMLElement).tagName === 'LD-OPTION'
)
) {
if (!mutationsList.some((record) => this.isLdOption(record.target))) {
return
}

Expand Down Expand Up @@ -594,7 +595,7 @@ export class LdSelect implements InnerFocusable {

if (this.multiple && ev.shiftKey) {
if (
document.activeElement?.tagName === 'LD-OPTION-INTERNAL' &&
this.isLdOption(document.activeElement) &&
!document.activeElement.hasAttribute('selected')
) {
document.activeElement.dispatchEvent(
Expand All @@ -614,6 +615,7 @@ export class LdSelect implements InnerFocusable {
// Type a character: focus moves to the next item with a name that starts with the typed character.
// Type multiple characters in rapid succession: focus moves to the next item with a name that starts
// with the string of characters typed.
if (['Shift', 'Meta'].includes(key)) return
clearTimeout(this.typeAheadTimeout)
this.typeAheadQuery = (this.typeAheadQuery || '') + key
this.typeAheadTimeout = setTimeout(() => {
Expand Down Expand Up @@ -687,7 +689,7 @@ export class LdSelect implements InnerFocusable {
} else {
let current = document.activeElement
while (nextLdOption === undefined) {
if (current.nextElementSibling?.tagName === 'LD-OPTION-INTERNAL') {
if (this.isLdOption(current.nextElementSibling)) {
borisdiakur marked this conversation as resolved.
Show resolved Hide resolved
if ((current.nextElementSibling as HTMLElement).hidden) {
current = current.nextElementSibling
} else {
Expand Down Expand Up @@ -720,13 +722,11 @@ export class LdSelect implements InnerFocusable {
}

// Focus previous visible option, if any.
if (document.activeElement?.tagName === 'LD-OPTION-INTERNAL') {
if (this.isLdOption(document.activeElement)) {
let prevLdOption
let current = document.activeElement
while (prevLdOption === undefined) {
if (
current.previousElementSibling?.tagName === 'LD-OPTION-INTERNAL'
) {
if (this.isLdOption(current.previousElementSibling)) {
if ((current.previousElementSibling as HTMLElement).hidden) {
current = current.previousElementSibling
} else {
Expand Down Expand Up @@ -760,7 +760,7 @@ export class LdSelect implements InnerFocusable {
const filterInputCanReceiveSpace = Boolean(
this.filter &&
this.el.shadowRoot.activeElement === this.getFilterInput() &&
this.getFilterInput().value.trim().length
this.getFilterInput().value.trim()
)
if (!filterInputCanReceiveSpace) {
ev.preventDefault()
Expand Down Expand Up @@ -852,7 +852,7 @@ export class LdSelect implements InnerFocusable {
// Emit event only, if focus is not within the select component.
if (
ev.relatedTarget === null ||
(ev.relatedTarget as HTMLElement)?.tagName === 'LD-OPTION-INTERNAL' ||
this.isLdOption(ev.relatedTarget) ||
closest('ld-select', ev.relatedTarget as HTMLElement) === this.el
) {
ev.stopImmediatePropagation()
Expand Down Expand Up @@ -1129,7 +1129,7 @@ export class LdSelect implements InnerFocusable {
<span
class="ld-select__selection-label-bg"
part="selection-label-bg"
></span>
/>
</label>
</li>
)
Expand Down