Skip to content

Commit

Permalink
fix(select): fixes filtering
Browse files Browse the repository at this point in the history
  • Loading branch information
Nikki Massaro Kauffman committed Oct 23, 2023
1 parent adeb1f2 commit ff84a2b
Show file tree
Hide file tree
Showing 4 changed files with 18 additions and 32 deletions.
8 changes: 4 additions & 4 deletions core/pfe-core/controllers/listbox-controller.ts
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,7 @@ export class ListboxController<
* adds event listeners to host
*/
hostConnected() {
this.#internals.role = 'listbox';
this.#listeners;
}

/**
Expand All @@ -238,7 +238,7 @@ export class ListboxController<
const search = this.matchAnywhere ? '' : '^';
const text = option.textContent || '';
const regex = new RegExp(`${search}${this.filter}`, this.caseSensitive ? '' : 'i');
if (this.filter === '' || text.match(regex)) {
if (text.match(regex)) {
return true;
} else {
return false;
Expand All @@ -253,12 +253,12 @@ export class ListboxController<
}
this.options.forEach(option => {
if (matchedOptions.includes(option)) {
option.removeAttribute('filtered');
option.removeAttribute('hidden');
} else {
if (document.activeElement === option) {
this.#updateFocus = true;
}
option.setAttribute('filtered', 'filtered');
option.setAttribute('hidden', 'hidden');
}
});
return matchedOptions;
Expand Down
29 changes: 13 additions & 16 deletions elements/pf-select/pf-select-list.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,19 @@ export class PfSelectList extends LitElement {
/**
* whether filtering (if enabled) will be case-sensitive
*/
@property({ reflect: true, attribute: 'case-sensitive', type: Boolean }) caseSensitive = false;
@property({ attribute: 'case-sensitive', type: Boolean }) caseSensitive = false;

/**
* whether filtering (if enabled) will look for filter match anywhere in option text
* (by default it will only match if option starts with filter)
*/
@property({ reflect: true, attribute: 'match-anywhere', type: Boolean }) matchAnywhere = false;
@property({ attribute: 'match-anywhere', type: Boolean }) matchAnywhere = false;

/**
* filter text
*/
@property({ attribute: 'filter', type: String }) filter = '';


/**
* whether multiple items can be selected
Expand All @@ -57,19 +63,6 @@ export class PfSelectList extends LitElement {

#listboxController?: ListboxController;

/**
* filter string for visible options
*/
set filter(filterText: string) {
if (this.#listboxController) {
this.#listboxController.filter = filterText;
}
}

get filter() {
return this.#listboxController?.filter || '';
}

/**
* array of slotted options
*/
Expand Down Expand Up @@ -128,10 +121,11 @@ export class PfSelectList extends LitElement {
caseSensitive: this.caseSensitive,
matchAnywhere: this.matchAnywhere,
multi: this.multi,
orientation: 'vertical'
orientation: 'vertical',
});
const options: unknown[] = this.options || [];
this.#listboxController.options = options as ListboxOptionElement[];
this.#listboxController.filter = this.filter;
super.firstUpdated(changed);
}

Expand All @@ -149,6 +143,9 @@ export class PfSelectList extends LitElement {
if (changed.has('multi')) {
this.#listboxController.multi = this.multi;
}
if (changed.has('filter')) {
this.#listboxController.filter = this.filter;
}
}
}

Expand Down
11 changes: 0 additions & 11 deletions elements/pf-select/pf-select-option.ts
Original file line number Diff line number Diff line change
Expand Up @@ -79,17 +79,6 @@ export class PfSelectOption extends LitElement {
role: 'option'
});

/**
* whether option is hidden by listbox filtering
*/
set filtered(filtered: boolean) {
this.toggleAttribute('filtered', filtered);
}

get filtered() {
return !!this.getAttribute('filtered');
}

/**
* option's position amoun the other options
*/
Expand Down
2 changes: 1 addition & 1 deletion elements/pf-select/pf-select.ts
Original file line number Diff line number Diff line change
Expand Up @@ -473,7 +473,7 @@ export class PfSelect extends LitElement {
* opens the dropdown
*/
async show() {
await this.#toggle?.show(true);
await this.#toggle?.show();
}

/**
Expand Down

0 comments on commit ff84a2b

Please sign in to comment.