76 lines
2.5 KiB
JavaScript
76 lines
2.5 KiB
JavaScript
import { useEffect } from "@odoo/owl";
|
|
import { patch } from "@web/core/utils/patch";
|
|
import { exprToBoolean } from "@web/core/utils/strings";
|
|
import { useDebounced } from "@web/core/utils/timing";
|
|
import { charField, CharField } from "@web/views/fields/char/char_field";
|
|
import { textField, TextField } from "@web/views/fields/text/text_field";
|
|
|
|
/**
|
|
* Support a key-based onchange in text fields.
|
|
* The triggerOnChange method is debounced to run after given debounce delay
|
|
* (or 2 seconds by default) when typing ends.
|
|
*
|
|
*/
|
|
const onchangeOnKeydownMixin = () => ({
|
|
setup() {
|
|
super.setup(...arguments);
|
|
|
|
if (this.props.onchangeOnKeydown) {
|
|
const input = this.input || this.textareaRef;
|
|
|
|
const triggerOnChange = useDebounced(
|
|
this.triggerOnChange,
|
|
this.props.keydownDebounceDelay
|
|
);
|
|
useEffect(() => {
|
|
if (input.el) {
|
|
input.el.addEventListener("keydown", triggerOnChange);
|
|
return () => {
|
|
input.el.removeEventListener("keydown", triggerOnChange);
|
|
};
|
|
}
|
|
});
|
|
}
|
|
},
|
|
|
|
triggerOnChange() {
|
|
const input = this.input || this.textareaRef;
|
|
input.el.dispatchEvent(new Event("change"));
|
|
},
|
|
});
|
|
|
|
patch(CharField.prototype, onchangeOnKeydownMixin());
|
|
patch(TextField.prototype, onchangeOnKeydownMixin());
|
|
|
|
CharField.props = {
|
|
...CharField.props,
|
|
onchangeOnKeydown: { type: Boolean, optional: true },
|
|
keydownDebounceDelay: { type: Number, optional: true },
|
|
};
|
|
|
|
TextField.props = {
|
|
...TextField.props,
|
|
onchangeOnKeydown: { type: Boolean, optional: true },
|
|
keydownDebounceDelay: { type: Number, optional: true },
|
|
};
|
|
|
|
const charExtractProps = charField.extractProps;
|
|
charField.extractProps = (fieldInfo) => {
|
|
return Object.assign(charExtractProps(fieldInfo), {
|
|
onchangeOnKeydown: exprToBoolean(fieldInfo.attrs.onchange_on_keydown),
|
|
keydownDebounceDelay: fieldInfo.attrs.keydown_debounce_delay
|
|
? Number(fieldInfo.attrs.keydown_debounce_delay)
|
|
: 2000,
|
|
});
|
|
};
|
|
|
|
const textExtractProps = textField.extractProps;
|
|
textField.extractProps = (fieldInfo) => {
|
|
return Object.assign(textExtractProps(fieldInfo), {
|
|
onchangeOnKeydown: exprToBoolean(fieldInfo.attrs.onchange_on_keydown),
|
|
keydownDebounceDelay: fieldInfo.attrs.keydown_debounce_delay
|
|
? Number(fieldInfo.attrs.keydown_debounce_delay)
|
|
: 2000,
|
|
});
|
|
};
|