diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.js b/addons/web/static/src/views/kanban/kanban_column_quick_create.js index 785b0116b6e..d431bfb2ca4 100644 --- a/addons/web/static/src/views/kanban/kanban_column_quick_create.js +++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.js @@ -12,10 +12,11 @@ export class KanbanColumnQuickCreate extends Component { this.dialog = useService("dialog"); this.root = useRef("root"); this.state = useState({ - columnTitle: "", + hasInputFocused: false, }); useAutofocus(); + this.inputRef = useRef("autofocus"); // Close on outside click useExternalListener(window, "mousedown", (/** @type {MouseEvent} */ ev) => { @@ -38,11 +39,6 @@ export class KanbanColumnQuickCreate extends Component { ); // Key Navigation - const inputRef = useRef("autofocus"); - useHotkey("enter", () => this.validate(), { - area: () => inputRef.el, - bypassEditableProtection: true, - }); useHotkey("escape", () => this.fold()); } @@ -65,9 +61,10 @@ export class KanbanColumnQuickCreate extends Component { } validate() { - if (this.state.columnTitle.length) { - this.props.onValidate(this.state.columnTitle); - this.state.columnTitle = ""; + const title = this.inputRef.el.value.trim(); + if (title.length) { + this.props.onValidate(title); + this.inputRef.el.value = ""; } } @@ -88,6 +85,12 @@ export class KanbanColumnQuickCreate extends Component { }, }); } + + onInputKeydown(ev) { + if (ev.key === "Enter") { + this.validate(); + } + } } KanbanColumnQuickCreate.props = { exampleData: [Object, { value: null }], diff --git a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml index ddf5500326a..2e1e3e3ddff 100644 --- a/addons/web/static/src/views/kanban/kanban_column_quick_create.xml +++ b/addons/web/static/src/views/kanban/kanban_column_quick_create.xml @@ -15,9 +15,9 @@ class="form-control bg-view" t-attf-placeholder="{{ relatedFieldName }}..." t-ref="autofocus" - t-model.trim="state.columnTitle" t-on-focus="() => state.hasInputFocused = true" t-on-blur="() => state.hasInputFocused = false" + t-on-keydown="onInputKeydown" />