Skip to content

Commit

Permalink
fix: list view filtering when opening the view
Browse files Browse the repository at this point in the history
When the widget is opened the first time with any search options,
the widget might miss the refresh event as it does not happen at
instantiation time. This PR ensures that all list widget refresh
events wait until the React component is rendered and is visible
in the UI.

This change also ensures that the debounced search will run with
the most recent search options by setting the `trailing` property
of the debounced function to `true`.

Closes arduino#1740

Signed-off-by: Akos Kitta <a.kitta@arduino.cc>
  • Loading branch information
Akos Kitta authored and kittaakos committed Dec 8, 2022
1 parent af468a7 commit f8c01e3
Show file tree
Hide file tree
Showing 2 changed files with 7 additions and 2 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export class FilterableListContainer<
}

override componentDidMount(): void {
this.search = debounce(this.search, 500);
this.search = debounce(this.search, 500, { trailing: true });
this.search(this.state.searchOptions);
this.props.searchOptionsDidChange((newSearchOptions) => {
const { searchOptions } = this.state;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import {
import { Widget } from '@theia/core/shared/@phosphor/widgets';
import { Message } from '@theia/core/shared/@phosphor/messaging';
import { Emitter } from '@theia/core/lib/common/event';
import { Deferred } from '@theia/core/lib/common/promise-util';
import { ReactWidget } from '@theia/core/lib/browser/widgets/react-widget';
import { CommandService } from '@theia/core/lib/common/command';
import { MessageService } from '@theia/core/lib/common/message-service';
Expand Down Expand Up @@ -42,6 +43,7 @@ export abstract class ListWidget<
* Do not touch or use it. It is for setting the focus on the `input` after the widget activation.
*/
protected focusNode: HTMLElement | undefined;
private readonly didReceiveFirstFocus = new Deferred();
protected readonly searchOptionsChangeEmitter = new Emitter<
Partial<S> | undefined
>();
Expand Down Expand Up @@ -117,6 +119,7 @@ export abstract class ListWidget<

protected onFocusResolved = (element: HTMLElement | undefined): void => {
this.focusNode = element;
this.didReceiveFirstFocus.resolve();
};

protected async install({
Expand Down Expand Up @@ -192,7 +195,9 @@ export abstract class ListWidget<
* If it is `undefined`, updates the view state by re-running the search with the current `filterText` term.
*/
refresh(searchOptions: Partial<S> | undefined): void {
this.searchOptionsChangeEmitter.fire(searchOptions);
this.didReceiveFirstFocus.promise.then(() =>
this.searchOptionsChangeEmitter.fire(searchOptions)
);
}

updateScrollBar(): void {
Expand Down

0 comments on commit f8c01e3

Please sign in to comment.