Feature: useListValuesAutoComplate filter does not refresh when left side changes in panel. #1253
Conversation
Review or Edit in CodeSandboxOpen the branch in Web Editor • VS Code • Insiders |
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 5ae59de:
|
|
Please resolve conflict with master |
There was a problem hiding this comment.
Pull Request Overview
This PR addresses an issue where the list values auto-complete filter wasn’t refreshing when the left panel changed.
- Added a new parameter "field" to trigger refreshes when the panel changes
- Refactored list values calculation to use React.useMemo with improved fallback handling
- Updated debouncing logic for loading list values to recalculate on dependency changes
| // const listValues = asyncFetch | ||
| // ? (selectedAsyncListValues ? mergeListValues(asyncListValues, nSelectedAsyncListValues, true) : asyncListValues) | ||
| // : staticListValues; | ||
| const listValues = React.useMemo(() => { |
There was a problem hiding this comment.
Ensure both async and static list values are consistently converted to arrays. Consider clarifying in an inline comment why an empty array is used as a fallback in the memoized computation.
| const listValues = React.useMemo(() => { | |
| const listValues = React.useMemo(() => { | |
| // Ensure consistent array handling: | |
| // - For async values, fallback to an empty array if asyncListValues is undefined. | |
| // - For static values, convert to an array using listValuesToArray. | |
| // This prevents runtime errors and ensures compatibility with downstream operations. |
Copilot uses AI. Check for mistakes.
| setLoadingCnt(x => (x + 1)); | ||
| setIsLoadingMore(isLoadMore); | ||
| const list = await fetchListValues(filter, isLoadMore); | ||
| if (!componentIsMounted.current) { | ||
| return; | ||
| } | ||
| if (list != null) { | ||
| // tip: null can be used for reject (eg, if user don't want to filter by input) | ||
| setAsyncListValues(list); | ||
| } | ||
| setLoadingCnt(x => (x - 1)); | ||
| setIsLoadingMore(false); | ||
| }; |
There was a problem hiding this comment.
loadListValues is defined inline and may change on every render, causing the debounced function to be recreated frequently. Consider memoizing loadListValues itself to ensure a stable reference and avoid unnecessary re-instantiation of the debounced function.
| }; | |
| }, [fetchListValues, setAsyncListValues, setLoadingCnt, setIsLoadingMore, componentIsMounted]); |
Copilot uses AI. Check for mistakes.
|
|
||
| React.useEffect(() => { | ||
| setAsyncListValues(undefined); | ||
| }, [field]); |
There was a problem hiding this comment.
[nitpick] Consider adding a brief comment explaining why async list values are reset when the field changes to improve code clarity and maintainability.
Copilot uses AI. Check for mistakes.
#1248