PipedreamHQ / PipedreamHQ/pipedream
[BUG] Options prop with query does not refresh pagination properly
- Dominant language
- JavaScript
- Stars
- 11.7k
- Forks
- 5.8k
- Avg merge
- 3d 10h
- Merged PRs (30d)
- 102
Description
**Describe the bug**
Given a prop that uses `options`, when all options are loaded, the "load more" button is disabled and its text becomes "no more to load".
If this prop has `useQuery: true`, the query changes which results are provided. However, if the button is already disabled due to having loaded the last page, it is not re-enabled when the query is changed. Hence, the user is stuck on the first page of options until they reload the page.
**To Reproduce**
Create a Nodejs code step with the following code:
```
const getNewArr = (s) => new Array(s).fill(0).map((v, index) => ({ label: "test " + index.toString(), value: index }));
const arrOptions = getNewArr(5);
const arrOptionsQuery = getNewArr(3);
export default defineComponent({
props: {
selection: {
type: "string",
label: "Selection",
useQuery: true,
options({ query, page }) {
let arr = query ? arrOptionsQuery : arrOptions;
const value = arr[page];
return value ? [value] : [];
}
}
},
async run({ steps, $ }) {
return this.selection;
},
});
```
You can use the 'load more' button to load through the pages without entering a query, and then after all 5 pages are loaded, you can type "test" in the query, which will now draw from a list with 3 pages. The button, however, will not be re-enabled, so you will only see the first value.
The opposite works the same way: you can type in a query and load all 3 pages, then clear it to draw from the list of 5 pages, but will be unable to load beyond the first.
**Expected behavior**
In a prop with `useQuery: true`, whenever the query is changed, the 'load more' button should have its state reset along with the pagination.
**Screenshots**
Loading all pages without query:

Then, after typing in a query:

Then, after refreshing the page:

Contributor guide
Assessment
This issue has not been assessed yet.