2 files changed, 99 insertions, 0 deletions
diff --git a/addons/mail/static/src/components/editable_text/editable_text.js b/addons/mail/static/src/components/editable_text/editable_text.js
new file mode 100644
index 00000000..be7e7ddc
--- /dev/null
+++ b/addons/mail/static/src/components/editable_text/editable_text.js
@@ -0,0 +1,91 @@
+odoo.define('mail/static/src/components/editable_text/editable_text.js', function (require) {
+'use strict';
+
+const { markEventHandled } = require('mail/static/src/utils/utils.js');
+const useShouldUpdateBasedOnProps = require('mail/static/src/component_hooks/use_should_update_based_on_props/use_should_update_based_on_props.js');
+
+const { Component } = owl;
+
+class EditableText extends Component {
+
+    constructor(...args) {
+        super(...args);
+        useShouldUpdateBasedOnProps();
+    }
+
+    mounted() {
+        this.el.focus();
+        this.el.setSelectionRange(0, (this.el.value && this.el.value.length) || 0);
+    }
+
+    willUnmount() {
+        this.trigger('o-cancel');
+    }
+
+    //--------------------------------------------------------------------------
+    // Handlers
+    //--------------------------------------------------------------------------
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onBlur(ev) {
+        this.trigger('o-cancel');
+    }
+
+    /**
+     * @private
+     * @param {MouseEvent} ev
+     */
+    _onClick(ev) {
+        markEventHandled(ev, 'EditableText.click');
+        this.trigger('o-clicked');
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydown(ev) {
+        switch (ev.key) {
+            case 'Enter':
+                this._onKeydownEnter(ev);
+                break;
+            case 'Escape':
+                this.trigger('o-cancel');
+                break;
+        }
+    }
+
+    /**
+     * @private
+     * @param {KeyboardEvent} ev
+     */
+    _onKeydownEnter(ev) {
+        const value = this.el.value;
+        const newName = value || this.props.placeholder;
+        if (this.props.value !== newName) {
+            this.trigger('o-validate', { newName });
+        } else {
+            this.trigger('o-cancel');
+        }
+    }
+
+}
+
+Object.assign(EditableText, {
+    defaultProps: {
+        placeholder: "",
+        value: "",
+    },
+    props: {
+        placeholder: String,
+        value: String,
+    },
+    template: 'mail.EditableText',
+});
+
+return EditableText;
+
+});
diff --git a/addons/mail/static/src/components/editable_text/editable_text.xml b/addons/mail/static/src/components/editable_text/editable_text.xml
new file mode 100644
index 00000000..5e3aa52a
--- /dev/null
+++ b/addons/mail/static/src/components/editable_text/editable_text.xml
@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<templates xml:space="preserve">
+
+    <t t-name="mail.EditableText" owl="1">
+        <input class="o_EditableText" t-att-value="props.value" t-on-blur="_onBlur" t-on-click="_onClick" t-on-keydown="_onKeydown" t-att-placeholder="props.placeholder"/>
+    </t>
+
+</templates>