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

Jump to bottom

fix: filters: clear search values when clear or clear all occurs #5006

Merged
merged 3 commits into from
Sep 25, 2024
Merged

fix: filters: clear search values when clear or clear all occurs #5006

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cea2ed3
fix: filters: clear search values when clear or clear all is triggered
margaree Sep 24, 2024
10e6dc1
add clear search vdiff
margaree Sep 25, 2024
149f943
Updating vdiff goldens (#5007)
github-actions[bot] Sep 25, 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
25 changes: 22 additions & 3 deletions components/filter/filter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -735,6 +735,12 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
_handleClear() {
const dimension = this._getActiveDimension();

if (dimension.searchType !== 'none') {
this._handleClearSearch(dimension);
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Clicking the "Clear" button within a single button was not clearing the search. I confirmed with Jeff that we would want it to. "Clear All" already clears all the searches within the filter so this makes that consistent.

const searchInput = this.shadowRoot.querySelector('d2l-input-search');
if (searchInput) searchInput.value = '';
Comment on lines +740 to +741
Copy link
Contributor Author

@margaree margaree Sep 24, 2024 •
edited
Loading

Choose a reason for hiding this comment

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

This isn't great. I haven't been able so far to force this search to re-render since its value technically isn't changing for the case where the user hasn't actually executed the search (the value within d2l-input-search is changing but not the one that filter is rendering). Let me know any suggestions here.

Copy link
Member

Choose a reason for hiding this comment

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

Is that because dimension.searchValue doesn't change until they execute the search? Could its value be set to empty?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yup I believe that's correct. It's getting set to empty string in _handleClearSearch but it already was empty so to filter nothing has changed.

}

this._performDimensionClear(dimension);
this._dispatchChangeEventNow(false);
this.requestUpdate();
Expand All @@ -743,20 +749,33 @@ class Filter extends FocusMixin(LocalizeCoreElement(RtlMixin(LitElement))) {
}

_handleClearAll() {
let hasSearch = false;
this._dimensions.forEach(dimension => {
if (dimension.searchType !== 'none' && dimension.searchValue !== '') {
dimension.searchValue = '';
this._search(dimension);
if (dimension.searchType !== 'none') {
this._handleClearSearch(dimension);
hasSearch = true;
}
this._performDimensionClear(dimension);
});

if (hasSearch) {
const searchInputs = this.shadowRoot.querySelectorAll('d2l-input-search');
searchInputs?.forEach((searchInput) => searchInput.value = '');
}

this._dispatchChangeEventNow(true);
this.requestUpdate();

this.text ? announce(this.localize('components.filter.clearAllAnnounceOverride', { filterText: this.text })) : announce(this.localize('components.filter.clearAllAnnounce'));
}

_handleClearSearch(dimension) {
if (dimension.searchValue === '') return;

dimension.searchValue = '';
this._search(dimension);
}

_handleDimensionDataChange(e) {
const changes = e.detail.changes;
const dimension = this._getDimensionByKey(e.detail.dimensionKey);
Expand Down
Loading