How to useautofocus and useSpellCheck in Odoo 18

When it comes to building interactive and user-friendly UIs in Odoo, the OWL framework keeps evolving, and Odoo 18 introduces some really handy hooks that make life easier for developers.

Among them, useAutofocus and useSpellCheck stand out as elegant, declarative solutions for managing focus control and spellchecking on UI elements without resorting to manual DOM manipulation.

In this blog, we’ll explore:

• What useAutofocus and useSpellCheck do
• How to implement them in your OWL components
• An example with clean UI & code

By the end, you’ll see how simple it is to improve user experience with just a few lines of code.

Understanding the Hooks

1. useSpellCheck([options])

This hook enables spell checking on your input or textarea elements via OWL’s declarative style.

Arguments:

Example use cases:

• Enable browser-based spellchecking for a single input.
• Customize specific elements to opt-in or opt-out of spellchecking.

2. useAutofocus()

This hook automatically focuses on an input element when the component is mounted. No need to manually call .focus() OWL does it for you.

Project Setup (Manifest)

Before writing code, make sure your custom module is structured properly. A typical

__manifest__.py file may look like this:

{
    'Name': 'Your Module Name',
    'version': '1.0',
    'summary': 'Demonstration of useAutofocus and useSpellCheck hooks in OWL 18',
    'depends': ['web'],
    'data': [
        'views/your_module_actions.xml',
    ],
    'assets': {
        'web.assets_backend': [
            'Your_module_name/static/src/js/component.xml',
            'Your_module_name/static/src/js/component.js',
        ],
    },
    'application': False,
}

XML Template (UI Layout)

Here’s our clean and modern UI template:

<t t-name="YourComponent.template_name">
    <div class="main" style="
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        background-color: #f8f9fa;">
        <div style="
            text-align: center;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);">
            <h1 style="margin-bottom: 20px; font-family: sans-serif; color: #333;">Welcome</h1>
            <div class="main" t-ref="root">
                <input t-ref="spellcheck"
                       type="text"
                       style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                <textarea t-ref="custom"
                          spellcheck="false"
                          style="width: 250px; height: 80px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                 <input t-ref="autofocus" type="text"
                        style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"
                        />
                <div t-ref="container">
                    <input type="text"
                           style="width: 250px; padding: 8px; margin-bottom: 10px; border: 1px solid #ccc; border-radius: 4px;"/><br/>
                </div>
            </div>
        </div>
    </div>
</t>

JavaScript Component

Here’s how we bring everything to life with OWL hooks:

/** @odoo-module **/
import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";
import { useSpellCheck } from "@web/core/utils/hooks";
import { useAutofocus } from "@web/core/utils/hooks";
export class YourComponent extends Component {
   static template = "YourComponent.template_nam";
   setup() {
       this.simpleRef = useSpellCheck();
       this.customRef = useSpellCheck({ refName: "custom" });
       this.nodeRef = useSpellCheck({ refName: "container" });
       this.inputRef = useAutofocus();
     }
}
registry.category("actions").add("YourComponent", YourComponent);

How It Works (Step by Step)

1. SpellCheck:

• useSpellCheck() automatically enables spellcheck on the default input.
• With refName, you can target specific refs like custom or even container nodes.

2. Autofocus:

• useAutofocus() ensures the input grabs focus when the component is mounted — perfect for search bars, quick forms, or modals.

3. UI Integration:

• When you trigger this action (via a server action or custom menu item), the component renders, and all these behaviors are applied seamlessly.

XML: Action & Menu Item

Add this to your module’s views/your_module_actions.xml (make sure it’s included in your manifest under data

<odoo>
    <!-- Client Action -->
    <record id="action_test_hook" model="ir.actions.client">
        <field name="name">Test Hook Demo</field>
        <field name="tag">YourComponent</field>
    </record>
    <!-- Menu Item -->
    <menuitem id="menu_test_hook_root"
              name="Test Hook"
              parent="base.menu_custom"
              sequence="10"
              action="action_test_hook"/>
</odoo>

Conclusion

With OWL 18, Odoo makes frontend development cleaner and more enjoyable. The new hooks useAutofocus and useSpellCheck remove the need for manual DOM querying or JavaScript tricks—instead, you declare behavior at the component level, keeping your code elegant, maintainable, and in line with OWL’s reactive design.

Whether you're building forms, chat interfaces, or custom dashboards, these hooks are simple tools that can greatly enhance user experience with minimal effort.

To read more about Overview of Owl Hooks in Odoo 18, refer to our blog Overview of Owl Hooks in Odoo 18.