diff --git a/src/renderer/src/stories/JSONSchemaInput.js b/src/renderer/src/stories/JSONSchemaInput.js index 687d528e2..76a292498 100644 --- a/src/renderer/src/stories/JSONSchemaInput.js +++ b/src/renderer/src/stories/JSONSchemaInput.js @@ -120,13 +120,33 @@ export class JSONSchemaInput extends LitElement { getElement = () => this.shadowRoot.querySelector(".schema-input"); - #updateData = (path, value) => { - this.onUpdate ? this.onUpdate(value) : this.form ? this.form.updateData(path, value) : ""; + #activateTimeoutValidation = (name, el, path) => { + this.#clearTimeoutValidation(); + this.#validationTimeout = setTimeout(() => { + this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, el, path) : ""; + }, 1000); + }; + + #clearTimeoutValidation = () => { + if (this.#validationTimeout) clearTimeout(this.#validationTimeout); + }; + + #validationTimeout = null; + #updateData = (fullPath, value) => { + this.onUpdate ? this.onUpdate(value) : this.form ? this.form.updateData(fullPath, value) : ""; + + const path = [...fullPath]; + const name = path.splice(-1)[0]; + this.value = value; // Update the latest value + + this.#activateTimeoutValidation(name, this.getElement(), path); }; - #triggerValidation = (name, el, path) => - this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, el, path) : ""; + #triggerValidation = (name, el, path) => { + this.#clearTimeoutValidation(); + return this.onValidate ? this.onValidate() : this.form ? this.form.triggerValidation(name, el, path) : ""; + }; updated() { const el = this.getElement(); @@ -297,7 +317,10 @@ export class JSONSchemaInput extends LitElement { return html`