From 33d207d81a6c1faa7042cc60d173d0c40857f539 Mon Sep 17 00:00:00 2001
From: Arya Khochare <91268931+Aryakoste@users.noreply.github.com>
Date: Mon, 17 Mar 2025 18:38:55 +0530
Subject: [PATCH] Blank page in Browse Channel Modal fixed (Pagination reset on
 filter change) (#29921)

* Blank page in browse channel fixed (Pagination reset on filter change)

* method usage for archived channel menu item fixed

---------

Co-authored-by: Mattermost Build <build@mattermost.com>
---
 .../src/components/searchable_channel_list.tsx     | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/webapp/channels/src/components/searchable_channel_list.tsx b/webapp/channels/src/components/searchable_channel_list.tsx
index 33820d251c..0600136ca9 100644
--- a/webapp/channels/src/components/searchable_channel_list.tsx
+++ b/webapp/channels/src/components/searchable_channel_list.tsx
@@ -248,6 +248,12 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             this.setState({page: 0});
         }
     };
+    filterChange = (filterType: FilterType) => {
+        this.props.changeFilter(filterType);
+        if (this.props.filter !== filterType) {
+            this.setState({page: 0});
+        }
+    };
     handleChange = (e?: React.FormEvent<HTMLInputElement>) => {
         if (e?.currentTarget) {
             this.setState({channelSearchValue: e?.currentTarget.value}, () => this.doSearch());
@@ -435,7 +441,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             <Menu.Item
                 key='channelsMoreDropdownAll'
                 id='channelsMoreDropdownAll'
-                onClick={() => this.props.changeFilter(Filter.All)}
+                onClick={() => this.filterChange(Filter.All)}
                 leadingElement={<GlobeCheckedIcon size={16}/>}
                 labels={
                     <FormattedMessage
@@ -449,7 +455,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             <Menu.Item
                 key='channelsMoreDropdownPublic'
                 id='channelsMoreDropdownPublic'
-                onClick={() => this.props.changeFilter(Filter.Public)}
+                onClick={() => this.filterChange(Filter.Public)}
                 leadingElement={<GlobeIcon size={16}/>}
                 labels={
                     <FormattedMessage
@@ -463,7 +469,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
             <Menu.Item
                 key='channelsMoreDropdownPrivate'
                 id='channelsMoreDropdownPrivate'
-                onClick={() => this.props.changeFilter(Filter.Private)}
+                onClick={() => this.filterChange(Filter.Private)}
                 leadingElement={<LockOutlineIcon size={16}/>}
                 labels={
                     <FormattedMessage
@@ -482,7 +488,7 @@ export class SearchableChannelList extends React.PureComponent<Props, State> {
                 <Menu.Item
                     key='channelsMoreDropdownArchived'
                     id='channelsMoreDropdownArchived'
-                    onClick={() => this.props.changeFilter(Filter.Archived)}
+                    onClick={() => this.filterChange(Filter.Archived)}
                     leadingElement={<ArchiveOutlineIcon size={16}/>}
                     labels={
                         <FormattedMessage