react-advanced-iframe does not refresh after typing in a new search term

[hawaiianmetal]

Disclaimer

Yes

Sample

react-advanced-iframe

Contributor(s)

365knoten

What happened?

This issue is somewhere between a bug and a question. I created a new page and configured it as the default search page url for a communication site (Set-PnPSearchSettings -SearchPageUrl). I added the IFrame web part to the page and configured it to point to the OOB search results page for the site ({{site.serverRelativeUrl}}/_layouts/15/search.aspx/siteall?q={{query.q}}). The web part works correctly for initial load; however, when you change the search term in the search box and hit ENTER or click the search icon, the IFrame on the page does not reload. It seems it's not able to re-render after the partial postback. Doing a full refresh of the page (F5) will cause it to refresh correctly. The same thing happens if you point the webpart to bing search.

Steps to reproduce

1. Create a new page in a communication site
2. Set the site's search page Url to point to this new page
3. Add the Advanced IFrame webpart to the new page and configure the Url to {{site.serverRelativeUrl}}/_layouts/15/search.aspx/siteall?q={{query.q}}
4. Save the page
5. Go to the home page of the site and enter in a search term at the top of the page. Hit ENTER or click the search icon
6. The search results are shown correctly.
7. Revise the search term at the top of the page and hit ENTER or click search icon.
8. The IFrame keeps the same results as the previous search. Note that the address bar shows the modified Url, yet the IFRame has not refreshed.

Expected behavior

The IFrame should reload when a new search term is entered. The only way to have the revised search term to be shown in the search results is to manually refresh the page which is not intuitive or desirable.

Note 1: This also happens when you point the web part to Bing as shown in the screenshot in the docs. Of course with that one, you have a different search box but you don't with search.aspx.

Note 2: I tested this with the PnP Search Results web part, and I do not have the same problem. That web part lets you connect to the page's environment to select the querystring, and I suspect that is how it's able to reprocess the new search term when it changes. Just passing this along in case this helps.

Target SharePoint environment

SharePoint Online

Developer environment

Windows

Browsers

• Internet Explorer
• Microsoft Edge
• Google Chrome
• FireFox
• Safari
• mobile (iOS/iPadOS)
• mobile (Android)
• not applicable
• other (enter in the "Additional environment details" area below)

What version of Node.js is currently installed on your workstation?

v14.21.2

What version of Node.js is required by the sample?

v14.21.2

Paste the results of SPFx doctor

CLI for Microsoft 365 SharePoint Framework doctor
Verifying configuration of your system for working with the SharePoint Framework

× SharePoint Framework v1.18.0

Error: spfx doctor doesn't support SPFx v1.18.0 at this moment

Additional environment details

No response

[ghost]

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

[rendi12345678]

Make sure you added search data to useEffect array dependency that allowed to refresh the component when search data is changed

[github-actions]

This issue has been marked as stale due to no progress in over 90 days. If you are still experiencing this issue, please provide additional information so we can help you resolve it.

[github-actions]

Closing this issue due to lack of activity. If you are still encountering this issue, please do not hesitate to open a new issue. Make sure to follow the guidance on how to create good issues to increase your chances of getting the help you deserve.