Hi,

You are registering your DialButton with:

       registry.add("DialButton", fieldButton);

but you didn't specify which registry.

By default, registry is a collection of registries like category("fields"), category("components"), category("views"), etc.

For OWL components, you must register inside a specific category, normally "components".

Here is updated JS Code:

/** @odoo-module **/

import { registry } from "@web/core/registry";

import { Component } from "@odoo/owl";

export class DialButton extends Component {

    static template = "efcx.DialButton";

    setup() {

        super.setup(...arguments);

    }

    _dial() {

        console.log("Dialing...");

    }

}

// CORRECT way: register inside the "components" category

registry.category("components").add("DialButton", DialButton);

Hope this helps

Solved by adding a js file to patch the component I was trying to extend:
See the Reference->Web Framework->Patching Code section in the documentation (can't paste link due to low karma).

Added code looks something like this:

/** @odoo-module **/
// taken from @sms/static/src/components/phone_field/phone_field.js

import { patch } from "@web/core/utils/patch";
import { PhoneField, phoneField, formPhoneField } from "@web/views/fields/phone/phone_field";
import { DialButton } from './dial_button.js';

patch(PhoneField, {
    components: {
        ...PhoneField.components,
        DialButton
    },
    defaultProps: {
        ...PhoneField.defaultProps,
    },
    props: {
        ...PhoneField.props,
    },
});

const patchDescr = () => ({
    extractProps() {
        const props = super.extractProps(...arguments);
        return props;
    },
    supportedOptions: [],
});

patch(phoneField, patchDescr());
patch(formPhoneField, patchDescr());

Main Issues

• • Component Registration: You're registering the component in the wrong way. For Owl components used in views, you need to register them differently.
  • Component Import: Your inheritance view is trying to use <DialButton/> directly, but it needs to be properly imported and registered to be available.
  • XML Namespace: The XML files need to ensure proper namespacing so Odoo can find your component.

Here's how to fix these issues:

First, let's modify your dial_button.js file:

javascript
/** @odoo-module **/

import { registry } from "@web/core/registry";
import { Component } from "@odoo/owl";

export class DialButton extends Component {
    static template = "efcx.DialButton";
    
    setup() {
        // Note: You don't need super.setup() for Component
    }
    
    dial() {
        console.log("Dialing...");
    }
}

// Register the component in the component registry (not as a field)
registry.category("components").add("DialButton", DialButton);

Next, you need to make sure your XML inheritance properly imports the component:

xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">
    <t t-extend="web.PhoneField" t-inherit-mode="extension">
        <xpath expr="//div[hasclass('o_phone_content')]//a" position="after">
            <t t-component="components.DialButton"/>
        </xpath>
    </t>
    <t t-extend="web.FormPhoneField" t-inherit-mode="extension">
        <xpath expr="//div[hasclass('o_phone_content')]" position="inside">
            <t t-component="components.DialButton"/>
        </xpath>
    </t>
</templates>

Additionally, you might need to create a separate JS file to import and register the component for your views:

javascript
/** @odoo-module **/

import { registry } from "@web/core/registry";
import { DialButton } from "./dial_button";

// Make the component available to templates
const components = registry.category("components");
if (!components.contains("DialButton")) {
    components.add("DialButton", DialButton);
}

Make sure your manifest includes all these files in the correct order:

python
'assets': {
    'web.assets_backend': [
        'efcx/static/src/js/dial_button.js',
        'efcx/static/src/js/register_components.js',  # Add this new file
        'efcx/static/src/xml/dial_button.xml',
        'efcx/static/src/views/fields/phone_field.xml',
    ],
}

If you're still encountering issues, try these additional debugging steps:

Hi,

i'm not sure to correctly respond to the whole problem but i thought that in all view it was compulsary to define the starting and ending xml "balise".
You define your empty "balise" in a way that i'm not sure Odoo loves it :

<DialButton/>

I can suggest to try first with a starting and ending, like here :

<DialButton></DialButton>

Hope it'll help.