I'm encountering an Owl lifecycle error in Odoo when using a Bootstrap collapsible section in a custom form view. Clicking on the button to toggle the collapse throws the following error:
UncaughtPromiseError > OwlError: An error occurred in the owl lifecycle (see this Error's "cause" property)
TypeError: Cannot read properties of undefined (reading '1') at get page (web.assets_web_dark.min.js:2900:74) at Notebook.template
This happens whenever I try to open the collapsible section by clicking the "Inspection Details" button.
The collapsible section contains fields from the model. Here's the XML code for the problematic section:
<div style="width:100%; padding: 10px; border:1px solid; box-shadow:5px 5px 2px grey; border-radius: 7px"> <a class="btn btn-link" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"> Inspection Details </a> <div class="row no-gutter" style="--gutter-x:0 !important;"> <div class="collapse" id="collapseExample"> <div class="card card-body"> <group> <field name="revenue" force_save="1"/> <field name="date_of_inspection" force_save="1"/> <field name="surveyor" force_save="1"/> <field name="next_date_of_inspection" force_save="1"/> </group> <group> <field name="expenses" force_save="1"/> <field name="manufacturer_certificate_id" force_save="1"/> <field name="type_of_inspection" force_save="1"/> <field name="branch_id" force_save="1"/> </group> </div> </div> </div> </div>
I have ensured all fields exist in the model and checked for XML syntax issues. Despite simplifying the view, clearing cache, and testing in debug mode, the error persists.
How can I resolve this Owl lifecycle error when rendering a collapsible section in an Odoo form view, and are there specific considerations when combining Bootstrap collapse with Owl components?