diff --git a/addons/hr_org_chart/static/src/fields/hooks.js b/addons/hr_org_chart/static/src/fields/hooks.js
new file mode 100644
index 00000000000..ee771bcf98e
--- /dev/null
+++ b/addons/hr_org_chart/static/src/fields/hooks.js
@@ -0,0 +1,46 @@
+/** @odoo-module */
+
+import session from 'web.session'
+import { useService } from "@web/core/utils/hooks";
+import { useEnv } from "@odoo/owl";
+
+/**
+ * Redirect to the sub employee kanban view.
+ *
+ * @private
+ * @param {MouseEvent} event
+ * @returns {Promise} action loaded
+ *
+ */
+export function onEmployeeSubRedirect() {
+    const actionService = useService('action');
+    const orm = useService('orm');
+    const rpc = useService('rpc');
+    const env = useEnv();
+
+    return async (event) => {
+        const employeeId = parseInt(event.currentTarget.dataset.employeeId);
+        if (!employeeId) {
+            return {};
+        }
+        const type = event.currentTarget.dataset.type || 'direct';
+        // Get subordonates of an employee through a rpc call.
+        const subordinateIds = await rpc('/hr/get_subordinates', {
+            employee_id: employeeId,
+            subordinates_type: type,
+            context: session.user_context
+        });
+        let action = await orm.call('hr.employee', 'get_formview_action', [employeeId]);
+        action = {...action,
+            name: env._t('Team'),
+            view_mode: 'kanban,list,form',
+            views: [[false, 'kanban'], [false, 'list'], [false, 'form']],
+            domain: [['id', 'in', subordinateIds]],
+            res_id: false,
+            context: {
+                default_parent_id: employeeId,
+            }
+        };
+        actionService.doAction(action);
+    };
+}
diff --git a/addons/hr_org_chart/static/src/fields/hr_org_chart.js b/addons/hr_org_chart/static/src/fields/hr_org_chart.js
index 891f3971f13..1d38e76412a 100644
--- a/addons/hr_org_chart/static/src/fields/hr_org_chart.js
+++ b/addons/hr_org_chart/static/src/fields/hr_org_chart.js
@@ -4,6 +4,7 @@ import {Field} from '@web/views/fields/field';
 import { registry } from "@web/core/registry";
 import { useService } from "@web/core/utils/hooks";
 import { usePopover } from "@web/core/popover/popover_hook";
+import { onEmployeeSubRedirect } from './hooks';
 
 const { Component, onWillStart, onWillRender, useState } = owl;
 
@@ -31,25 +32,7 @@ class HrOrgChartPopover extends Component {
         this.rpc = useService('rpc');
         this.orm = useService('orm');
         this.actionService = useService("action");
-    }
-
-    /**
-     * Get subordonates of an employee through a rpc call.
-     *
-     * @private
-     * @param {integer} employee_id
-     * @returns {Promise}
-     */
-    async _getSubordinatesData(employee_id, type) {
-        const subData = await this.rpc(
-            '/hr/get_subordinates',
-            {
-                employee_id: employee_id,
-                subordinates_type: type,
-                context: Component.env.session.user_context,
-            }
-        );
-        return subData;
+        this._onEmployeeSubRedirect = onEmployeeSubRedirect();
     }
 
     /**
@@ -63,35 +46,6 @@ class HrOrgChartPopover extends Component {
         const action = await this.orm.call('hr.employee', 'get_formview_action', [employeeId]);
         this.actionService.doAction(action); 
     }
-
-    /**
-     * Redirect to the sub employee form view.
-     *
-     * @private
-     * @param {MouseEvent} event
-     * @returns {Promise} action loaded
-     */
-    async _onEmployeeSubRedirect(event) {
-        const employee_id = parseInt(event.currentTarget.dataset.employeeId);
-        const type = event.currentTarget.dataset.type || 'direct';
-        if (!employee_id) {
-            return {};
-        }
-        const subData = await this._getSubordinatesData(employee_id, type);
-        const domain = [['id', 'in', subData]];
-        var action = await this.orm.call('hr.employee', 'get_formview_action', [employee_id]);
-        action = Object.assign(action, {
-            'name': this.env._t('Team'),
-            'view_mode': 'kanban,list,form',
-            'views':  [[false, 'kanban'], [false, 'list'], [false, 'form']],
-            'domain': domain,
-            'context': {
-                'default_parent_id': employee_id,
-            }
-        });
-        delete action['res_id'];
-        this.actionService.doAction(action);
-    }
 }
 HrOrgChartPopover.template = 'hr_org_chart.hr_orgchart_emp_popover';
 
@@ -107,6 +61,7 @@ export class HrOrgChart extends Field {
         this.jsonStringify = JSON.stringify;
 
         this.state = useState({'employee_id': null});
+        this._onEmployeeSubRedirect = onEmployeeSubRedirect();
 
         onWillStart(this.handleComponentUpdate.bind(this));
         onWillRender(this.handleComponentUpdate.bind(this));