@jinntec/fore 2.5.0 → 2.7.0

package/src/actions/abstract-action.js

@@ -4,6 +4,7 @@ import getInScopeContext from '../getInScopeContext.js';
 import { Fore } from '../fore.js';
 import { FxFore } from '../fx-fore.js';
 import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * @param {number} howLong How long to wait, in ms
@@ -122,6 +123,7 @@ export class AbstractAction extends ForeElementMixin {
   disconnectedCallback() {}
 
   connectedCallback() {
+    super.connectedCallback();
     this.setAttribute('inert', 'true');
     this.style.display = 'none';
     this.propagate = this.hasAttribute('propagate') ? this.getAttribute('propagate') : 'continue';
@@ -176,6 +178,7 @@ export class AbstractAction extends ForeElementMixin {
       }
     } else {
       this.targetElement = this.parentNode;
+      if (!this.targetElement || this.targetElement.nodeType !== Node.ELEMENT_NODE) return;
       this.targetElement.addEventListener(this.event, e => this.execute(e), {
         capture: this.phase === 'capture',
       });
@@ -192,7 +195,7 @@ export class AbstractAction extends ForeElementMixin {
       await Fore.dispatch(this, 'error', {
         origin: this,
         message: 'Action execution failed',
-        expr: XPathUtil.getDocPath(this),
+        expr: error,
         level: 'Error',
       });
       // Return false to indicate failure. Any loops must be canceled
@@ -212,30 +215,22 @@ export class AbstractAction extends ForeElementMixin {
    * @param e
    */
   async execute(e) {
-    if(!this.getModel().modelConstructed) return;
+    if (!this.getModel().modelConstructed) return;
     // console.log(this, this.event);
-    if(this.event){
-      if(this.event === 'submit-done'){
-        console.info(
-            `%csubmit-done ${this.event} #${this?.parentNode?.id}`,
-            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-        );
-      }else{
-        console.info(
-            `%cexecuting ${this.constructor.name} ${this.event}`,
-            'background:lime; color:black; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-        );
+    if (this.event) {
+      if (this.event === 'submit-done') {
+        console.info(`📌 ${this.event} #${this?.parentNode?.id}`);
+      } else {
+        console.info(`📌 ${this.constructor.name} ${this.event}`);
       }
-
-    }else{
+    } else {
       console.info(
-          `%cexecuting ${this.constructor.name}`,
-          'background:limegreen; color:black; margin-left:1rem; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
-          this
+        `%cexecuting ${this.constructor.name}`,
+        'background:limegreen; color:black; margin-left:1rem; padding:.5rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;width:100%;',
+        this,
       );
     }
 
-
     if (e && e.target.nodeType !== Node.DOCUMENT_NODE && e.target !== window) {
       /*
              ### ignore event if there's a parent fore and the current element is NOT part of it. This avoids
@@ -260,7 +255,7 @@ export class AbstractAction extends ForeElementMixin {
     let resolveThisEvent = () => {};
     if (e && e.listenerPromises) {
       e.listenerPromises.push(
-        new Promise((resolve) => {
+        new Promise(resolve => {
           resolveThisEvent = resolve;
         }),
       );
@@ -269,9 +264,9 @@ export class AbstractAction extends ForeElementMixin {
     // Outermost handling
     if (FxFore.outermostHandler === null) {
       console.log(
-          `%coutermost Action on ${this.getOwnerForm().id}`,
-          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-          this,
+        `%coutermost Action on ${this.getOwnerForm().id}`,
+        'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
 
       FxFore.outermostHandler = this;
@@ -406,9 +401,9 @@ export class AbstractAction extends ForeElementMixin {
     this.actionPerformed();
     if (FxFore.outermostHandler === this) {
       console.log(
-          `%cfinalizing outermost Action on ${this.getOwnerForm().id}`,
-          'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
-          this,
+        `%cfinalizing outermost Action on ${this.getOwnerForm()?.id}`,
+        'background:darkblue; color:white; padding:0.3rem; display:inline-block; white-space: nowrap; border-radius:0.3rem;',
+        this,
       );
 
       FxFore.outermostHandler = null;
@@ -467,8 +462,8 @@ export class AbstractAction extends ForeElementMixin {
       return;
     }
     if (
-      FxFore.outermostHandler
-      && !XPathUtil.contains(FxFore.outermostHandler.ownerDocument, FxFore.outermostHandler)
+      FxFore.outermostHandler &&
+      !XPathUtil.contains(FxFore.outermostHandler.ownerDocument, FxFore.outermostHandler)
     ) {
       // The old outermostHandler fell out of the document. An error has happened.
       // Just remove the old one and act like we are starting anew.
@@ -480,7 +475,7 @@ export class AbstractAction extends ForeElementMixin {
       // console.log('running update cycle for outermostHandler', this);
       model.recalculate();
       model.revalidate();
-      model.parentNode.refresh(true);
+      this.getOwnerForm().refresh(false);
       this.dispatchActionPerformed();
     } else if (this.needsUpdate) {
       // console.log('Update delayed!');

package/src/actions/fx-append.js

@@ -1,12 +1,11 @@
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
 import { resolveId } from '../xpath-evaluation.js';
+import { XPathUtil } from '../xpath-util.js';
 
 /**
  * `fx-append` appends an entry to a repeat.
  *
- *
- *
  * @deprecated - will be replaced with `fx-insert`
  * @fires index-changed - fired after new item is appended
  * @customElement
@@ -76,6 +75,8 @@ class FxAppend extends AbstractAction {
 
   actionPerformed() {
     super.actionPerformed();
+    const mi = this.getModelItem();
+    mi.notify();
     // const repeat = document.getElementById(this.repeat);
     // repeat.setIndex(repeat.nodeset.length);
     this._dispatch();
@@ -103,12 +104,34 @@ class FxAppend extends AbstractAction {
 
     // const rootNode = document.createElement(repeat.ref);
     // const rootNode = inscope.ownerDocument.createElement(repeat.ref);
+    /**
+     * @type {Element}
+     */
     const rootNode = inscope.ownerDocument.createElement(repeat.ref);
 
     // const data = this._dataFromRefs(rootNode, templ.content)
     const data = this._generateInstance(templ.content, rootNode);
     // console.log('_dataFromTemplate DATA', data);
     inscope.appendChild(data);
+    parentForm.signalChangeToElement(inscope.localName);
+    parentForm.signalChangeToElement(data.localName);
+
+    const instanceId = XPathUtil.resolveInstance(this, this.ref);
+    const inst = this.getModel().getInstance(instanceId);
+
+    const fore = this.getOwnerForm();
+
+    Fore.dispatch(inst, 'insert', {
+      insertedNodes: data,
+      insertedParent: inscope,
+      ref: this.ref,
+      location: data.previousSibling,
+      position: 'after',
+      instanceId: inst.id,
+      foreId: fore.id,
+      index: Array.from(inscope.children).indexOf(data),
+    });
+
     // console.log('appended new item ', data);
     // return data;
   }

package/src/actions/fx-call.js

@@ -3,7 +3,7 @@ import { AbstractAction } from './abstract-action.js';
 import { evaluateXPath } from '../xpath-evaluation.js';
 import { Fore } from '../fore.js';
 import getInScopeContext from '../getInScopeContext.js';
-import { XPathUtil } from '../xpath-util.js';
+import { getDocPath } from '../xpath-path.js';
 
 /**
  * `fx-call`
@@ -67,7 +67,7 @@ export default class FxCall extends AbstractAction {
       Fore.dispatch(this, 'error', {
         origin: this,
         message: `Action '${this.action}' not found`,
-        expr: XPathUtil.getDocPath(this),
+        expr: getDocPath(this),
         level: 'Error',
       });
     }

package/src/actions/fx-delete.js

@@ -1,7 +1,6 @@
-import * as fx from 'fontoxpath';
 import { AbstractAction } from './abstract-action.js';
 import { Fore } from '../fore.js';
-import { evaluateXPathToNodes, evaluateXPathToString } from '../xpath-evaluation.js';
+import { evaluateXPathToNodes } from '../xpath-evaluation.js';
 import { XPathUtil } from '../xpath-util.js';
 import getInScopeContext from '../getInScopeContext.js';
 
@@ -52,40 +51,78 @@ class FxDelete extends AbstractAction {
       }),
     );
 
+    const fore = this.getOwnerForm();
+
     let parent;
+
+    const removedNodes = [];
     if (Array.isArray(nodesToDelete)) {
-      if (nodesToDelete.length === 0) return;
+      if (nodesToDelete.length === 0) {
+        return;
+      }
       parent = nodesToDelete[0].parentNode;
+
       nodesToDelete.forEach(item => {
-        this._deleteNode(parent, item);
+        if (this._deleteNode(parent, item)) {
+          fore.signalChangeToElement(item.localName);
+          removedNodes.push(item);
+        }
       });
+      if (removedNodes.length) {
+        fore.signalChangeToElement(parent.localName);
+      }
     } else {
       parent = nodesToDelete.parentNode;
-      this._deleteNode(parent, nodesToDelete);
+      if (this._deleteNode(parent, nodesToDelete)) {
+        fore.signalChangeToElement(parent.localName);
+
+        fore.signalChangeToElement(nodesToDelete.localName);
+        removedNodes.push(nodesToDelete);
+      }
+    }
+
+    if (removedNodes.length) {
+      await Fore.dispatch(instance, 'deleted', {
+        ref: path,
+        deletedNodes: removedNodes,
+        instanceId,
+        parent,
+        foreId: fore.id,
+      });
+      this.needsUpdate = true;
     }
-    const foreId = this.getOwnerForm().id;
-    await Fore.dispatch(instance, 'deleted', { ref: path, deletedNodes: nodesToDelete , instanceId:instanceId, foreId:foreId});
-    this.needsUpdate = true;
   }
 
+  /**
+   * Delete a node (if allowed). Does not hold for JSON
+   *
+   * @param {ParentNode}  parent - The parent of the node to remove
+   * @param {ChildNode}   node   - The child to remove
+   *
+   * @returns {boolean} Whether the delete is allowed and succeeded
+   */
   _deleteNode(parent, node) {
-    if (parent.nodeType === Node.DOCUMENT_NODE) return;
-    if (node.nodeType === Node.DOCUMENT_NODE) return;
-    if (node.nodeType === Node.DOCUMENT_FRAGMENT_NODE) return;
-    if (node.parentNode === null) return;
+    if (
+      parent.nodeType === Node.DOCUMENT_NODE ||
+      node.nodeType === Node.DOCUMENT_NODE ||
+      node.nodeType === Node.DOCUMENT_FRAGMENT_NODE ||
+      node.parentNode === null
+    ) {
+      return false;
+    }
 
-    const mi = this.getModelItem();
-    if (mi.readonly) return;
+    const mi = this.getModel().getModelItem(node);
+    // Note that the model item can be absent, For elements that had no controls on them.
+    // In that case, allow removals
+    if (mi?.readonly) {
+      return false;
+    }
 
     parent.removeChild(node);
-  }
 
-  /**
-   * overwriting as we need to perform additional rebuild()
-   */
-  actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
+    this.getModel().removeModelItem(node);
+
+    return true;
   }
 }
 

package/src/actions/fx-hide.js

@@ -38,7 +38,7 @@ export class FxHide extends AbstractAction {
     );
 
     const dialog = resolveId(this.dialog, this);
-    dialog.hide();
+    dialog.close();
     Fore.dispatch(dialog, 'dialog-hidden', {});
   }
 }

package/src/actions/fx-insert.js

@@ -7,6 +7,7 @@ import {
 } from '../xpath-evaluation.js';
 import { XPathUtil } from '../xpath-util';
 import { Fore } from '../fore.js';
+import { getPath } from '../xpath-path.js';
 
 /**
  * `fx-insert`
@@ -60,31 +61,6 @@ export class FxInsert extends AbstractAction {
     this.keepValues = !!this.hasAttribute('keep-values');
   }
 
-  _getOriginSequence(inscope, targetSequence) {
-    let originSequence;
-    if (this.origin) {
-      // ### if there's an origin attribute use it
-      let originTarget;
-      try {
-        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        if (Array.isArray(originTarget) && originTarget.length === 0) {
-          console.warn('invalid origin for this insert action - ignoring...', this);
-          originSequence = null;
-        }
-        originSequence = originTarget;
-      } catch (error) {
-        console.warn('invalid origin for this insert action - ignoring...', this);
-      }
-    } else if (targetSequence) {
-      // ### use last item of targetSequence
-      originSequence = targetSequence;
-      if (originSequence && !this.keepValues) {
-        this._clear(originSequence);
-      }
-    }
-    return originSequence;
-  }
-
   _cloneOriginSequence(inscope, targetSequence) {
     let originSequenceClone;
     if (this.origin) {
@@ -96,13 +72,25 @@ export class FxInsert extends AbstractAction {
          */
         // this.setInScopeVariables(this.detail);
 
-        // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
-        if (Array.isArray(originTarget) && originTarget.length === 0) {
-          console.warn('invalid origin for this insert action - ignoring...', this);
-          originSequenceClone = null;
+        /*
+        if in 'create-nodes' mode and origin targets a repeat, the repeat
+        we use the already during initData() created nodeset as a template for insertion
+         */
+        if (this.origin.startsWith('#') && this.getOwnerForm().createNodes) {
+          const repeat = this.getOwnerForm().querySelector(this.origin);
+          originSequenceClone = repeat.createdNodeset.cloneNode(true);
+          if (!originSequenceClone) {
+            console.error(`createdNodeset for repeat ${this.origin} does not exist`);
+          }
+        } else {
+          // originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
+          originTarget = evaluateXPathToFirstNode(this.origin, inscope, this);
+          if (Array.isArray(originTarget) && originTarget.length === 0) {
+            console.warn('invalid origin for this insert action - ignoring...', this);
+            originSequenceClone = null;
+          }
+          originSequenceClone = originTarget.cloneNode(true);
         }
-        originSequenceClone = originTarget.cloneNode(true);
       } catch (error) {
         console.warn('invalid origin for this insert action - ignoring...', this);
       }
@@ -136,13 +124,11 @@ export class FxInsert extends AbstractAction {
     let targetSequence = [];
     const inscopeContext = getInScopeContext(this);
 
+    const fore = this.getOwnerForm();
+
     // ### 'context' attribute takes precedence over 'ref'
     if (this.hasAttribute('context')) {
-      [context] = evaluateXPathToNodes(
-        this.getAttribute('context'),
-        inscopeContext,
-        this.getOwnerForm(),
-      );
+      [context] = evaluateXPathToNodes(this.getAttribute('context'), inscopeContext, this);
       inscope = inscopeContext;
     }
 
@@ -154,10 +140,18 @@ export class FxInsert extends AbstractAction {
         targetSequence = evaluateXPathToNodes(this.ref, inscope, this);
       }
     }
+    // const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
+
     const originSequenceClone = this._cloneOriginSequence(inscope, targetSequence);
     if (!originSequenceClone) return; // if no origin back out without effect
 
+    /**
+     * @type {Node}
+     */
     let insertLocationNode;
+    /**
+     * @type {number}
+     */
     let index;
 
     // if the targetSequence is empty but we got an originSequence use inscope as context and ignore 'at' and 'position'
@@ -165,12 +159,22 @@ export class FxInsert extends AbstractAction {
       if (context) {
         insertLocationNode = context;
         context.appendChild(originSequenceClone);
+        fore.signalChangeToElement(insertLocationNode.localName);
+        fore.signalChangeToElement(originSequenceClone.localName);
         index = 1;
       } else {
-        // No context. We can insert into the `inscope`.
-        insertLocationNode = inscope;
-        inscope.appendChild(originSequenceClone);
-        index = 1;
+        // No context but creating nodes from UI
+        if (!inscope && this.getOwnerForm().createNodes) {
+          const repeat = this.getOwnerForm().querySelector(this.origin);
+          inscope = getInScopeContext(repeat, repeat.ref);
+          insertLocationNode = inscope;
+          inscope.appendChild(originSequenceClone);
+          index = inscope.length - 1;
+        } else {
+          insertLocationNode = inscope;
+          inscope.appendChild(originSequenceClone);
+          index = 1;
+        }
       }
     } else {
       /* ### insert at position given by 'at' or use the last item in the targetSequence ### */
@@ -205,6 +209,8 @@ export class FxInsert extends AbstractAction {
       if (this.position && this.position === 'before') {
         // this.at -= 1;
         insertLocationNode.parentNode.insertBefore(originSequenceClone, insertLocationNode);
+        fore.signalChangeToElement(insertLocationNode.parentNode);
+        fore.signalChangeToElement(originSequenceClone.localName);
       }
 
       if (this.position && this.position === 'after') {
@@ -214,11 +220,17 @@ export class FxInsert extends AbstractAction {
         if (this.hasAttribute('context') && this.hasAttribute('ref')) {
           // index=1;
           inscope.append(originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         } else if (this.hasAttribute('context')) {
           index = 1;
           insertLocationNode.prepend(originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         } else {
           insertLocationNode.insertAdjacentElement('afterend', originSequenceClone);
+          fore.signalChangeToElement(insertLocationNode);
+          fore.signalChangeToElement(originSequenceClone.localName);
         }
       }
     }
@@ -235,7 +247,7 @@ export class FxInsert extends AbstractAction {
     // console.log('<<<<<<< resolved instance', inst);
     // Note: the parent to insert under is always the parent of the inserted node. The 'context' is not always the parent if the sequence is empty, or the position is different
     // const xpath = XPathUtil.getPath(originSequenceClone.parentNode, instanceId);
-    const xpath = XPathUtil.getPath(insertLocationNode.parentNode, instanceId);
+    const xpath = getPath(insertLocationNode, instanceId);
 
     const path = Fore.getDomNodeIndexString(originSequenceClone);
     this.dispatchEvent(
@@ -246,13 +258,16 @@ export class FxInsert extends AbstractAction {
         detail: { action: this, event: this.event, path },
       }),
     );
-
     Fore.dispatch(inst, 'insert', {
-      'inserted-nodes': originSequenceClone,
-      'insert-location-node': insertLocationNode,
+      insertedNodes: originSequenceClone,
+      insertedParent: insertLocationNode.parentNode,
+      ref: this.ref,
+      location: insertLocationNode,
       position: this.position,
-      instanceId:instanceId,
-      foreId:this.getOwnerForm().id
+      instanceId,
+      foreId: fore.id,
+      index,
+      xpath,
     });
 
     // todo: this actually should dispatch to respective instance
@@ -269,7 +284,6 @@ export class FxInsert extends AbstractAction {
     );
 
     this.needsUpdate = true;
-    console.log('Changed!', xpath);
     return [xpath];
   }
 
@@ -286,7 +300,7 @@ export class FxInsert extends AbstractAction {
 
   actionPerformed(changedPaths) {
     // ### make sure the necessary modelItems will get created
-    this.getModel().rebuild();
+    // this.getModel().rebuild();
     super.actionPerformed();
   }
 

package/src/actions/fx-load.js

@@ -27,12 +27,13 @@ class FxLoad extends AbstractAction {
     super();
     this.attachShadow({ mode: 'open' });
     this.url = '';
+    this.replace=false;
   }
 
   connectedCallback() {
     super.connectedCallback();
     this.attachTo = this.hasAttribute('attach-to') ? this.getAttribute('attach-to') : '_self';
-
+    this.replace = this.hasAttribute('replace') ? true : false;
     // Add a 'doneEvent' to block the action chain untill the event fired on the element we're
     // loading something into.
     this.awaitEvent = this.hasAttribute('await') ? this.getAttribute('await') : '';
@@ -88,7 +89,11 @@ class FxLoad extends AbstractAction {
             resolved.removeEventListener(this.awaitEvent, eventListener);
           };
 
-          resolved.appendChild(content);
+          if(this.replace){
+            this.parentNode.replaceChild(content,resolved);
+          }else{
+            resolved.appendChild(content);
+          }
           resolved.addEventListener(this.awaitEvent, eventListener);
 
           await waitForEvent;

package/src/actions/fx-refresh.js

@@ -22,23 +22,33 @@ class FxRefresh extends AbstractAction {
 
     if (this.hasAttribute('self')) {
       console.log(`### <<<<< refresh() self ${this} >>>>>`);
-      const control = XPathUtil.getClosest('fx-control', this);
+      const control = XPathUtil.getClosest('fx-control, fx-output, fx-upload', this);
       if (control) {
-        control.refresh();
+        control.refresh(true);
         return;
       }
     }
     if (this.hasAttribute('force')) {
       console.log(`### <<<<< refresh() force ${this} >>>>>`);
-      this.getOwnerForm().forceRefresh();
+      this.getOwnerForm().refresh(true);
+      return;
+    }
+    if(this.hasAttribute('selector')){
+      const target = document.querySelector(this.getAttribute('selector'));
+      if (target && Fore.isUiElement(target.nodeName) && typeof target.refresh === 'function') {
+        target.refresh(true);
+      }
       return;
     }
     if (this.hasAttribute('control')) {
       const targetId = this.getAttribute('control');
       console.log(`### <<<<< refresh() control '${targetId}' >>>>>`);
-      const ctrl = resolveId(targetId, this);
+      let ctrl = resolveId(targetId, this);
+      if(!ctrl){
+        ctrl = document.querySelector(`#${targetId}`);
+      }
       if (ctrl && Fore.isUiElement(ctrl.nodeName) && typeof ctrl.refresh === 'function') {
-        ctrl.refresh();
+        ctrl.refresh(true);
       }
       return;
     }

package/src/actions/fx-replace.js

@@ -2,6 +2,7 @@
 import '../fx-model.js';
 import { AbstractAction } from './abstract-action.js';
 import { evaluateXPathToFirstNode } from '../xpath-evaluation.js';
+import { FxBind } from '../fx-bind.js';
 
 /**
  * `fx-replace` - replaces the node referred to with 'ref' with node referred to with 'with' attribute.
@@ -44,8 +45,9 @@ export default class FxReplace extends AbstractAction {
   }
 
   actionPerformed() {
-    this.getModel().rebuild();
-    super.actionPerformed();
+    this.getModel().updateModel();
+    this.getOwnerForm().refresh(true); //todo: optimize and update only the affected subtree
+    this.dispatchActionPerformed();
   }
 
   replace(toReplace, replaceWith) {
@@ -63,7 +65,20 @@ export default class FxReplace extends AbstractAction {
       const cloned = replaceWith.cloneNode(true);
       toReplace.replaceWith(cloned);
     }
-    // const modelitem = this.getModelItem();
+    // todo: add selective update and create and notify modelItem for toReplace and replaceWith
+    /*
+    let replaceWithModelItem = this.getModel().getModelItem(replaceWith);
+    if (!replaceWithModelItem) {
+      const replaceWithModelItem = FxBind.createModelItem(
+        this.getAttribute('with'),
+        replaceWith,
+        this,
+        null,
+      );
+      this.getModel().registerModelItem(replaceWithModelItem);
+      this.getOwnerForm().addToBatchedNotifications(replaceWithModelItem);
+    }
+*/
     // this.getModel().changed.push(modelitem);
     this.needsUpdate = true;
   }

package/src/actions/fx-reset.js

@@ -41,6 +41,12 @@ export class FxReset extends AbstractAction {
     data.reset();
     this.needsUpdate = true;
   }
+
+  actionPerformed() {
+    this.getModel().updateModel();
+    this.getOwnerForm().refresh(true);
+    this.dispatchActionPerformed();
+  }
 }
 
 if (!customElements.get('fx-reset')) {