diff --git a/addons/mail/static/src/js/views/activity/activity_renderer.js b/addons/mail/static/src/js/views/activity/activity_renderer.js
index 7b29ae707e1..0f9164d6c43 100644
--- a/addons/mail/static/src/js/views/activity/activity_renderer.js
+++ b/addons/mail/static/src/js/views/activity/activity_renderer.js
@@ -187,7 +187,7 @@ class ActivityRenderer extends AbstractRendererOwl {
             this.activeFilter.activityTypeId = ev.detail.columnID;
             this.activeFilter.resIds = Object.entries(this.props.grouped_activities)
                 .filter(([, resIds]) => ev.detail.columnID in resIds &&
-                    resIds[ev.detail.columnID].state === ev.detail.values.activeFilter)
+                    resIds[ev.detail.columnID].state === ev.detail.values.activeFilter.value)
                 .map(([key]) => parseInt(key));
         } else {
             this.activeFilter.state = null;
diff --git a/addons/mail/static/src/xml/activity_view.xml b/addons/mail/static/src/xml/activity_view.xml
index c40d6d73b7d..dc978898163 100644
--- a/addons/mail/static/src/xml/activity_view.xml
+++ b/addons/mail/static/src/xml/activity_view.xml
@@ -6,7 +6,7 @@
         <tr>
             <th></th>
             <th t-foreach="props.activity_types" t-as="type" t-key="type[0]"
-                class="o_activity_type_cell" t-attf-class="{{ activeFilter.activityTypeId === type[0] ? 'o_activity_filter_' + activeFilter.state : '' }}"
+                class="o_activity_type_cell" t-attf-class="{{ activeFilter.activityTypeId === type[0] ? 'o_activity_filter_' + activeFilter.state.value : '' }}"
                 t-att-data-activity-type-id="type[0]" t-attf-width="{{100/props.activity_types.length}}%">
                 <div>
                     <span t-esc="type[1]"/>
@@ -46,7 +46,7 @@
 <t t-name="mail.ActivityViewRow" owl="1">
     <tr class="o_data_row" t-att-data-res-id="resId">
         <t t-set="record" t-value="props.data.find(data => data.res_id === resId)"/>
-        <td t-attf-class="{{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state : '' }}">
+        <td t-attf-class="{{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state.value : '' }}">
             <ActivityRecordAdapter Component="widgetComponents.ActivityRecord"
                 widgetArgs="[record, { qweb: qweb }]"/>
         </td>
@@ -58,14 +58,15 @@
 
 <t t-name="mail.ActivityViewCell" owl="1">
     <t t-set="activityGroup" t-value="props.grouped_activities[resId] and props.grouped_activities[resId][type[0]] or {count: 0, ids: [], state: false}"/>
-    <td t-if="activityGroup.state" t-att-data-res-id="resId" t-att-data-activity-type-id="type[0]"
-        t-attf-class="o_activity_summary_cell {{activityGroup.state}} {{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state : '' }}">
+    <t t-set="isCellHidden" t-value="activeFilter.resIds.length and !activeFilter.resIds.includes(resId) and activeFilter.activityTypeId === type[0]"/>
+    <td t-if="activityGroup.state and !isCellHidden" t-att-data-res-id="resId" t-att-data-activity-type-id="type[0]"
+        t-attf-class="o_activity_summary_cell {{activityGroup.state}} {{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state.value : '' }}">
         <ActivityCellAdapter Component="widgetComponents.ActivityCell"
             widgetArgs="['activity_ids', props.getKanbanActivityData(activityGroup, resId)]"/>
     </td>
     <td t-else="" t-att-data-res-id="resId" t-att-data-activity-type-id="type[0]"
         class="o_activity_summary_cell o_activity_empty_cell"
-        t-attf-class="{{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state : '' }}"
+        t-attf-class="{{ activeFilter.resIds.includes(resId) ? 'o_activity_filter_' + activeFilter.state.value : '' }}"
         t-on-click.prevent.stop="_onEmptyCellClicked">
         <i title="Create" class="text-center fa fa-plus"/>
     </td>
diff --git a/addons/mail/static/tests/activity_tests.js b/addons/mail/static/tests/activity_tests.js
index 8ad4b152b08..7d41db1da5b 100644
--- a/addons/mail/static/tests/activity_tests.js
+++ b/addons/mail/static/tests/activity_tests.js
@@ -686,4 +686,57 @@ QUnit.test("Schedule activity dialog uses the same search view as activity view"
     ])
 });
 
+QUnit.test('Activity view: apply progressbar filter', async function (assert) {
+    assert.expect(9);
+
+    serverData.actions = {
+        1: {
+            id: 1,
+            name: 'Task Action',
+            res_model: 'task',
+            type: 'ir.actions.act_window',
+            views: [[false, 'activity']],
+        }
+    };
+    serverData.views = {
+        'task,false,activity':
+            `<activity string="Task" >
+                <templates>
+                    <div t-name="activity-box">
+                        <field name="foo"/>
+                    </div>
+                </templates>
+            </activity>`,
+        'task,false,search': '<search></search>',
+    };
+
+    const webClient = await createWebClient({ serverData, legacyParams: { withLegacyMockServer: true } });
+
+    await doAction(webClient, 1);
+
+    assert.containsNone(webClient.el.querySelector('.o_activity_view thead'),
+        '.o_activity_filter_planned,.o_activity_filter_today,.o_activity_filter_overdue,.o_activity_filter___false',
+        "should not have active filter");
+    assert.containsNone(webClient.el.querySelector('.o_activity_view tbody'),
+        '.o_activity_filter_planned,.o_activity_filter_today,.o_activity_filter_overdue,.o_activity_filter___false',
+        "should not have active filter");
+    assert.strictEqual(webClient.el.querySelector('.o_activity_view tbody .o_activity_record').textContent,
+        'Office planning', "'Office planning' should be first record");
+    assert.containsOnce(webClient.el.querySelector('.o_activity_view tbody'), '.planned',
+        "other records should be available");
+
+    await testUtils.dom.click(webClient.el.querySelector('.o_kanban_counter_progress .progress-bar[data-filter="planned"]'));
+    assert.containsOnce(webClient.el.querySelector('.o_activity_view thead'), '.o_activity_filter_planned',
+        "planned should be active filter");
+    assert.containsN(webClient.el.querySelector('.o_activity_view tbody'), '.o_activity_filter_planned', 5,
+        "planned should be active filter");
+    assert.strictEqual(webClient.el.querySelector('.o_activity_view tbody .o_activity_record').textContent,
+        'Meeting Room Furnitures', "'Office planning' should be first record");
+    const tr = webClient.el.querySelectorAll('.o_activity_view tbody tr')[1];
+    assert.hasClass(tr.querySelectorAll('td')[1], 'o_activity_empty_cell',
+        "other records should be hidden");
+    assert.containsNone(webClient.el.querySelector('.o_activity_view tbody'), 'planned',
+        "other records should be hidden");
+});
+
 });