Skip to content

fix(filtered-search): trim whitespaces #1705

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

Open
robertwilde wants to merge 1 commit into
base: main
Choose a base branch
from
Open

fix(filtered-search): trim whitespaces #1705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
1 change: 1 addition & 0 deletions projects/element-ng/filtered-search/si-filtered-search-value.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,6 +112,7 @@
(backspaceOverflow)="backspaceOverflow()"
(editValue)="edit('value')"
(submitValue)="submitCriterion.emit($event)"
(typeaheadBlur)="blurCriterion.emit()"
/>
}
}
Expand Down
1 change: 1 addition & 0 deletions projects/element-ng/filtered-search/si-filtered-search-value.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ export class SiFilteredSearchValueComponent implements OnInit {

readonly deleteCriterion = output<{ triggerSearch: boolean } | void>();
readonly submitCriterion = output<{ freeText: string } | void>();
readonly blurCriterion = output<void>();

protected readonly active = signal<boolean>(false);
protected readonly icons = addIcons({ elementCancel });
Expand Down
3 changes: 2 additions & 1 deletion projects/element-ng/filtered-search/si-filtered-search.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
#scrollContainer
class="search-container d-flex align-items-center overflow-auto py-2 w-100 ps-2 pe-2"
>
@for (criterion of values(); track criterion) {
@for (criterion of values(); track criterion.value.name) {
<si-filtered-search-value
[editOnCreation]="autoEditCriteria"
[definition]="criterion.config"
Expand All @@ -19,6 +19,7 @@
[searchLabel]="searchLabel()"
[onlySelectValue]="onlySelectValue()"
[searchDebounceTime]="searchDebounceTime()"
(blurCriterion)="criterionBlur()"
(submitCriterion)="focusNext($index, $event)"
(deleteCriterion)="deleteCriterion($index, $event)"
(valueChange)="valueChange($event, criterion)"
Expand Down
2 changes: 1 addition & 1 deletion projects/element-ng/filtered-search/si-filtered-search.component.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2192,7 +2192,7 @@ describe('SiFilteredSearchComponent', () => {
await tick();
await freeTextSearch.focus();
await tick();
expect(spy).toHaveBeenCalledTimes(2);
expect(spy).toHaveBeenCalledTimes(3);
expect(await freeTextSearch.getItems()).toEqual(['Bar']);
});

Expand Down
38 changes: 38 additions & 0 deletions projects/element-ng/filtered-search/si-filtered-search.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -742,7 +742,13 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges {
}
}

protected criterionBlur(): void {
this.trimWhitespaces();
}

protected freeTextBlur(): void {
this.trimWhitespaces();

queueMicrotask(() => {
if (this.freeTextCriterion() && this.searchValue().length > 0) {
this.createFreeTextPill(this.searchValue());
Expand Down Expand Up @@ -799,4 +805,36 @@ export class SiFilteredSearchComponent implements OnInit, OnChanges {
this.searchValue.set('');
this.emitChangeEvent();
}

protected trimWhitespaces(): void {
const original = this.searchValue();
const trimmed = original.trim();
const searchChanged = trimmed !== original;
if (searchChanged) {
this.searchValue.set(trimmed);
}

let valuesChanged = false;
this.values.update(entries =>
entries.map(entry => {
const val = entry.value.value;
if (typeof val !== 'string') {
return entry;
}
const trimmedVal = val.trim();
if (trimmedVal === val) {
return entry;
}
valuesChanged = true;
return {
...entry,
value: { ...entry.value, value: trimmedVal }
};
})
);

if (searchChanged || valuesChanged) {
this.emitChangeEvent();
}
}
}
1 change: 1 addition & 0 deletions ...s/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,5 +36,6 @@
(ngModelChange)="valueChange($event)"
(typeaheadOnFullMatch)="valueTypeaheadFullMatch($event)"
(typeaheadOnSelect)="valueTypeaheadSelect($event)"
(blur)="typeaheadBlur.emit()"
Copy link
Copy Markdown
Member

@spliffone spliffone Mar 27, 2026

Choose a reason for hiding this comment

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

Can you explain why did you choose to use the blur event to trim the white spaces? What trim the white spaces in freeTextInput and convertToExternalModel we should be good. Or do I miss something?

Copy link
Copy Markdown
Collaborator Author

@robertwilde robertwilde Mar 31, 2026 •
edited
Loading

Choose a reason for hiding this comment

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

@spliffone I noticed that when you enter the text in a criteria, and you click anywhere on the page outside the search bar, no event is fired and whitespaces are not trimmed. Without that additional blur, you have to click into the search bar and leave it again to trigger the freetext blur event.

Copy link
Copy Markdown
Member

@spliffone spliffone Mar 31, 2026

Choose a reason for hiding this comment

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

@robertwilde Can you provide a dedicated test case for the issue we are trying to solve, maybe we have to go one step back and define which problem are we trying to solve. Since I wasn't able to reproduce the issue described in the issue.

/>
}
6 changes: 6 additions & 0 deletions ...cts/element-ng/filtered-search/values/typeahead/si-filtered-search-typeahead.component.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import {
ElementRef,
OnChanges,
OnInit,
output,
signal,
SimpleChanges,
untracked,
Expand Down Expand Up @@ -40,6 +41,7 @@ export class SiFilteredSearchTypeaheadComponent
protected override readonly valueInput = viewChild<ElementRef<HTMLInputElement>>('valueInput');
protected readonly optionValue = signal<OptionCriterion | undefined>(undefined);

readonly typeaheadBlur = output<void>();
// This must be a separate signal as it should only emit when the actual empty state changes.
private readonly inputEmpty = computed(() => !this.criterionValue().value);

Expand Down Expand Up @@ -68,6 +70,10 @@ export class SiFilteredSearchTypeaheadComponent
if (changes.criterionValue && this.criterionValue().value !== this.optionValue()?.value) {
this.optionValue.set(undefined);
}

if (changes.definition) {
this.buildOptionValue();
}
}

ngOnInit(): void {
Expand Down
Loading