How to Use useAutofocus and useSpellCheck in Odoo 17

The OWL framework continues to evolve for building interactive and user-friendly UIs in Odoo, and Odoo 17 brings in some really handy hooks that ease the life of developers. useAutofocus and useSpellCheck provide a simple way to manage focus and spell checking without directly interacting with the DOM.

In this blog, we’ll discuss:

• What useAutofocus and useSpellcheck do
• How to implement them in your OWL components
• An example

After following this guide, you'll be able to make your forms smoother and provide a more efficient user experience.

Understanding the Hooks

1. useSpellCheck([options])

Use this hook to enable spell checking for input and textarea fields in OWL

Arguments:

Example use cases:

• Enable browser-based spellchecking for a single input.
• Enable or disable spell checking for specific elements as needed.

2. useAutofocus()

The input element receives focus automatically when the component is mounted.

Project Setup (Manifest)

Create the __manifest__.py with the structure below.

{
    'Name': 'Your Module Name',
    'version': '1.0',
    'summary': 'Working of useAutofocus and useSpellCheck hooks in OWL 17',
    '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_name';
   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

1. SpellCheck:
• useSpellCheck() enables spell checking on the input element.
• Using refName, you can apply the hook to a specific ref, such as a custom input or a container element.
2. Autofocus:
• useAutofocus() sets focus on the input when the component is mounted, which is helpful for search fields, forms, and dialogues.
3. UI Integration:
• When the action runs, the component is displayed and the configured functionality is applied without additional code.

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 Hooks</field>
        <field name="tag">YourComponent</field>
    </record>
    <!-- Menu Item -->
    <menuitem id="menu_test_hook_root"
              name="Test Hooks"
              parent="base.menu_custom"
              sequence="10"
              action="action_test_hook"/>
</odoo>

Odoo 17 is neater and more fun for front-end development. The new hooks, useAutofocus and useSpellCheck, eliminate the need for manual DOM querying or JavaScript tricks. You just declare behavior at the component level, making your code elegant, maintainable, and in tune with OWL’s reactive design. These hooks are simple tools that can dramatically improve user experience with minimal effort, whether you are building forms, chat interfaces, or custom dashboards.

To read more about How to useautofocus and useSpellCheck in Odoo 18, refer to our blog How to useautofocus and useSpellCheck in Odoo 18.