[BUG]: In the blog, not all pages are displayed after searching for keyword and removing it

[natashabag]

Describe the bug

Not all pages are displayed after searching for keyword and removing it. Same happens after searching by tags and then removing them.

URL of the page where the issue is observed.

https://www.oppia.org/blog/search/find?q=

Steps To Reproduce

1. Open https://www.oppia.org/blog
2. Search for "Education" in keywords and press Enter
3. Remove "Education" and press Enter

Expected Behavior

All the pages should be displayed (<1,2...7>)

Screenshots/Videos

blog_pages.mov

What device are you using?

Mobile

Operating System

MacOS, IOS

What browsers are you seeing the problem on?

Chrome, Firefox

Browser version

Chrome 126.0.6478.57, Firefox 127.0

Additional context

No response

Tips for developers

Before addressing the bug, please identify which PR caused the issue (you can follow the steps here). If you identify the PR, comment on the issue with a link to it. If not, mention the commit hash of the oldest commit you saw the bug on (and the month and year it was made in).

Then, please leave a comment with details of the approach that you plan to take to fix the issue (see example).

Note: If this is your first Oppia issue, please make sure to follow our guidelines for choosing an issue and setting things up. You will also need to show a demo of the fix working correctly on your local machine. Thanks!

[micga818]

Hello @seanlip , I would like to work on this issue.

I will make the following change in blog-home-page.component.ts in order to solve this issue:

This will make sure that all the blog posts are loaded when the search bar is emptied.

Below are two videos in order to show how the issue looked in my environment and how it looks after I solved the issue.

Before fix:
https://github.com/user-attachments/assets/471f84e7-7266-4a1c-9f63-d1eb7521a715

After fix:
https://github.com/user-attachments/assets/a6b68d09-2843-4039-a30d-fac185bb40cd

I request you to please assign me this issue. Thanks!

[micga818]

Hi again @seanlip!
After som more investigation I found that adding the following lines instead to the same file ( " blog-home-page.component.ts")

is a cleaner solution to the problem.
The solution looks the same way as in the original videos I posted above.

[seanlip]

@micga818 Thanks for looking into this. I have a question for you: can you describe in more detail the current flow for searching, and what is actually causing the original issue to happen? Then identify which step in that flow is behaving incorrectly.

This will help ensure that the solution described is actually the right one, and not a hack on top of another hack that will result in further fixes being needed in future.

Thanks!

[micga818]

@seanlip Of course. Let me know if I need to clarify anything.

Once a keyword is searched, the onSearchQueryChangeExec() function in the file blog-home-page.component.ts is called. This function then invokes this.blogPostSearchService.executeSearchQuery, passing the search query as a parameter.

The executeSearchQuery() function, located in blog-search.service.ts, is executed regardless of whether the search query is valid or an empty string. The variable MAX_NUM_CARDS_TO_DISPLAY_ON_BLOG_HOMEPAGE_SEARCH sets the limitation of only showing the search result by 10 blog posts at a time.

When the search query is an empty string, the user has to use the arrows to load the search results for 10 posts at a time.
Eventually, all blog posts will be displayed.

The issue arises because an empty search query doesn’t require the search functionality—it simply needs to display all blog posts at once. To resolve this, when the search query is empty, I skip the search and load the initial blog homepage data directly, avoiding unnecessary pagination.

While investigating the issue further, I noticed that my solution left the search query as education in the URL. To address this, I updated the URL to /blog, which mirrors the URL when you first visit the blog homepage. I believe this is more appropriate, as an empty search query doesn’t actually represent a search for any specific term.

[seanlip]

Thanks @micga818! I think that all sounds reasonable. On reviewing the original issue and your videos, though, I have a couple more questions:

1. In the original issue, @natashabag said "Same happens after searching by tags and then removing them". I don't see this reflected in your solution proof video or the discussion above, could you please include it?
2. I am wondering whether it would be a good idea to have a "Search" button below the keywords/tags fields. The search only happens when that button is clicked. Would that be better (in order to avoid intermediate search queries being triggered when characters are removed one by one, or to avoid the case where the user clears the text, but before they can type something else, the page reloads)? Not sure about this part, would be great to get your thoughts on it.

Thanks!