Sp-dev-fx-webparts: Using React Accordion plugin with SPFx - App Pagination stays the same when using keywords

[Abiman194]

Sample (which sample are you having trouble with)
https://github.com/pnp/sp-dev-fx-webparts/tree/master/samples/react-accordion

Authors

@gautamdsheth

Observed Behavior

User inputs the keywords and one list entry is getting displayed with the keywords. But pagination shows two pages, when users click on page#2 it

Steps to Reproduce

Steps to reproduce the behavior:

1. Go to 'list, add a unique question and answer with keyword, in my case keyword is 'container'
2. Go to FAQ search for keyword "container"
3. Search Results pop out with one result.
4. you can still see the pagination for 3 pages..., attached image for reference.
   

Environment Details (Development & Target environment)

• OS: [e.g. Windows 10 ]
• Target Environment: [SharePoint Online]
• Framework: [e.g. .NET Framework v3.x | | Node.js >v10.0]
• Browser(s): [Chromium Edge v79]
• Tooling: [VS Code ]
• Additional details: The more context you can provide, the easier it is (and therefore quicker) to help.

Additional context

[msftbot[bot]]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[AbhishekGarg]

@gautamdsheth
As much as I could understand, the paging is implemented on all the items for the accordion (from the list). Searching does not change that, obviously, and listItems object also needs to be retained for searching to work without a trip back to get items.

An idea is to rename the items to pagedItems, and then use items to store the actual items shown in the control. Paging can then be implemented on items instead of listItems.
On first load, it can be so that items = listItems, and on search, items = updatedList.

If you think this makes sense, I can send in a PR.

[gautamdsheth]

Hey @AbhishekGarg , that makes sense. Feel free to send a PR.