diff --git a/addons/web/static/src/js/views/form/form_renderer.js b/addons/web/static/src/js/views/form/form_renderer.js
index 2b91c5820ee..97e3cbd8cb0 100644
--- a/addons/web/static/src/js/views/form/form_renderer.js
+++ b/addons/web/static/src/js/views/form/form_renderer.js
@@ -303,6 +303,28 @@ var FormRenderer = BasicRenderer.extend({
     //--------------------------------------------------------------------------
     // Private
     //--------------------------------------------------------------------------
+
+    /**
+     * Activates the first visible tab from a given list of tab objects. The
+     * first tab having an "autofocus" attribute set will be focused in
+     * priority.
+     *
+     * @private
+     * @param {Object[]} tabs
+     */
+    _activateFirstVisibleTab(tabs) {
+        const visibleTabs = tabs.filter(
+            (tab) => !tab.$header.hasClass("o_invisible_modifier")
+        );
+        const autofocusTab = visibleTabs.findIndex(
+            (tab) => tab.node.attrs.autofocus === "autofocus"
+        );
+        const tabToFocus = visibleTabs[Math.max(0, autofocusTab)];
+        if (tabToFocus) {
+            tabToFocus.$header.find('.nav-link').addClass('active');
+            tabToFocus.$page.addClass('active');
+        }
+    },
     /**
      * @override
      */
@@ -932,7 +954,6 @@ var FormRenderer = BasicRenderer.extend({
         var self = this;
         var $headers = $('<ul class="nav nav-tabs">');
         var $pages = $('<div class="tab-content">');
-        var autofocusTab = -1;
         // renderedTabs is used to aggregate the generated $headers and $pages
         // alongside their node, so that their modifiers can be registered once
         // all tabs have been rendered, to ensure that the first visible tab
@@ -941,9 +962,6 @@ var FormRenderer = BasicRenderer.extend({
             var pageID = _.uniqueId('notebook_page_');
             var $header = self._renderTabHeader(child, pageID);
             var $page = self._renderTabPage(child, pageID);
-            if (autofocusTab === -1 && child.attrs.autofocus === 'autofocus') {
-                autofocusTab = index;
-            }
             self._handleAttributes($header, child);
             $headers.append($header);
             $pages.append($page);
@@ -953,11 +971,6 @@ var FormRenderer = BasicRenderer.extend({
                 node: child,
             };
         });
-        if (renderedTabs.length) {
-            var tabToFocus = renderedTabs[Math.max(0, autofocusTab)];
-            tabToFocus.$header.find('.nav-link').addClass('active');
-            tabToFocus.$page.addClass('active');
-        }
         // register the modifiers for each tab
         _.each(renderedTabs, function (tab) {
             self._registerModifiers(tab.node, self.state, tab.$header, {
@@ -967,13 +980,12 @@ var FormRenderer = BasicRenderer.extend({
                     if (modifiers.invisible && $link.hasClass('active')) {
                         $link.removeClass('active');
                         tab.$page.removeClass('active');
-                        var $firstVisibleTab = $headers.find('li:not(.o_invisible_modifier):first() > a');
-                        $firstVisibleTab.addClass('active');
-                        $pages.find($firstVisibleTab.attr('href')).addClass('active');
+                        self.inactiveNotebooks.push(renderedTabs);
                     }
                 },
             });
         });
+        this._activateFirstVisibleTab(renderedTabs);
         var $notebookHeaders = $('<div class="o_notebook_headers">').append($headers);
         var $notebook = $('<div class="o_notebook">').append($notebookHeaders, $pages);
         $notebook[0].dataset.name = node.attrs.name || '_default_';
@@ -1028,6 +1040,7 @@ var FormRenderer = BasicRenderer.extend({
         // render the form and evaluate the modifiers
         var defs = [];
         this.defs = defs;
+        this.inactiveNotebooks = [];
         var $form = this._renderNode(this.arch).addClass(this.className);
         delete this.defs;
 
@@ -1050,6 +1063,20 @@ var FormRenderer = BasicRenderer.extend({
             $form.remove();
         });
     },
+    /**
+     * This method is overridden to activate the first notebook page if the
+     * current active page is invisible due to modifiers. This is done after
+     * all modifiers are applied on all page elements.
+     *
+     * @override
+     */
+    async _updateAllModifiers() {
+        await this._super(...arguments);
+        for (const tabs of this.inactiveNotebooks) {
+            this._activateFirstVisibleTab(tabs);
+        }
+        this.inactiveNotebooks = [];
+    },
     /**
      * Updates the form's $el with new content.
      *
diff --git a/addons/web/static/tests/views/form_tests.js b/addons/web/static/tests/views/form_tests.js
index 0dd958b6e17..8bbdae1e91f 100644
--- a/addons/web/static/tests/views/form_tests.js
+++ b/addons/web/static/tests/views/form_tests.js
@@ -785,6 +785,57 @@ QUnit.module('Views', {
         form.destroy();
     });
 
+    QUnit.test('notebook: pages with invisible modifiers', async function (assert) {
+        assert.expect(10);
+
+        const form = await createView({
+            View: FormView,
+            model: 'partner',
+            data: this.data,
+            arch: `<form string="Partners">
+                    <sheet>
+                        <field name="bar"/>
+                        <notebook>
+                            <page string="First" attrs='{"invisible": [["bar", "=", false]]}'>
+                                <field name="foo"/>
+                            </page>
+                            <page string="Second" attrs='{"invisible": [["bar", "=", true]]}'>
+                                <field name="int_field"/>
+                            </page>
+                            <page string="Third">
+                                <field name="qux"/>
+                            </page>
+                        </notebook>
+                    </sheet>
+                </form>`,
+            res_id: 1,
+        });
+
+        await testUtils.form.clickEdit(form);
+
+        assert.containsOnce(form, ".o_notebook .nav .nav-link.active",
+            "There should be only one active tab"
+        );
+        assert.isVisible(form.$(".o_notebook .nav .nav-item:first"));
+        assert.hasClass(form.$(".o_notebook .nav .nav-link:first"), "active");
+
+        assert.isNotVisible(form.$(".o_notebook .nav .nav-item:eq(1)"));
+        assert.doesNotHaveClass(form.$(".o_notebook .nav .nav-link:eq(1)"), "active");
+
+        await testUtils.dom.click(form.$(".o_field_widget[name=bar] input"));
+
+        assert.containsOnce(form, ".o_notebook .nav .nav-link.active",
+            "There should be only one active tab"
+        );
+        assert.isNotVisible(form.$(".o_notebook .nav .nav-item:first"));
+        assert.doesNotHaveClass(form.$(".o_notebook .nav .nav-link:first"), "active");
+
+        assert.isVisible(form.$(".o_notebook .nav .nav-item:eq(1)"));
+        assert.hasClass(form.$(".o_notebook .nav .nav-link:eq(1)"), "active");
+
+        form.destroy();
+    });
+
     QUnit.test('invisible attrs on first notebook page', async function (assert) {
         assert.expect(6);