Is there a way to use password="1" along with widget="CopyClipboardChar" in Odoo 16?

Question

I'm trying to build a feature in an Odoo 16 where I need to mask a particular field using password="1". At the same time, I'd like to offer a clipboard copy functionality for that masked field by using widget="CopyClipboardChar". However, I'm having difficulty getting both to work together.

Has anyone encountered this issue before and found a solution? Any insights or workarounds would be greatly appreciated.

Answer 1

You can pass isPassword attribute from CopyClipboardChar to charField widget

Example

Alter the CopyClipboardChar component:

/** @odoo-module **/

import {patch} from "@web/core/utils/patch";
import { registry } from "@web/core/registry";
import { CopyClipboardCharField } from "@web/views/fields/copy_clipboard/copy_clipboard_field"
import { archParseBoolean } from "@web/views/utils";


CopyClipboardCharField.props = {
    ...CopyClipboardCharField.props,
    isPassword: { type: Boolean, optional: true },
};

CopyClipboardCharField.extractProps = ({ attrs, field }) => {
    return {
        isPassword: archParseBoolean(attrs.password),
    };
};

patch(CopyClipboardCharField.prototype, "CopyClipboardCharField.password", {
    get isPassword() {
        return this.props.isPassword;
    }
});

Alter the web.CopyClipboardField template to use isPassword function:

<?xml version="1.0" encoding="UTF-8"?>
<templates xml:space="preserve">

    <t t-inherit="web.CopyClipboardField" t-inherit-mode="extension" owl="1">
        <xpath expr="//Field" position="attributes">
            <attribute name="isPassword">isPassword</attribute>
        </xpath>
    </t>
    
</templates>

Add files to the manifest file:

'assets': {
    'web.assets_backend': [
        'MODULE_NAME/static/src/js/copy_clipboard_char.js',
        'MODULE_NAME/static/src/xml/copy_clipboard_char.xml',
    ],
},