[Vue] reset segment state before update:modelValue… (#19276)

* reset segment state before update:modelValue so the parent component can decide to let the change go through

* fix test (make sure to wait after each individual change for vue logic to execute completely)

* fix another multiple input val change in UI test

4 files changed, 21 insertions, 14 deletions

diff --git a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
index e5a05fcf4a..d11aaea225 100644
--- a/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
+++ b/plugins/SegmentEditor/tests/UI/SegmentSelectorEditor_spec.js
@@ -113,11 +113,12 @@ describe("SegmentSelectorEditorTest", function () {
     });
 
     it("should save a new segment and add it to the segment list when the form is filled out and the save button is clicked", async function() {
-        await page.evaluate(function () {
-            $('.metricValueBlock input').each(function (index, elem) {
-                $(elem).val('value ' + index).change();
-            });
-        });
+        for (let i = 0; i < 3; i += 1) {
+          await page.evaluate(function (i) {
+            $(`.metricValueBlock input:eq(${i})`).val('value ' + i).change();
+          }, i);
+          await page.waitFor(200);
+        }
 
         await page.type('input.edit_segment_name', 'new segment');
         await page.click('.segmentRow0 .segment-or'); // click somewhere else to save new name
@@ -160,11 +161,12 @@ describe("SegmentSelectorEditorTest", function () {
         await selectFieldValue('.segmentRow0 .segment-row:last .metricMatchBlock', 'Is not');
         await selectFieldValue('.segmentRow1 .segment-row .metricMatchBlock', 'Is not');
 
-        await page.evaluate(function () {
-            $('.metricValueBlock input').each(function (index) {
-                $(this).val('new value ' + index).change();
-            });
-        });
+        for (let i = 0; i < 3; i += 1) {
+          await page.evaluate(function (i) {
+            $(`.metricValueBlock input:eq(${i})`).val('new value ' + i).change();
+          }, i);
+          await page.waitFor(200);
+        }
 
         await page.waitFor(200);
 
diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js
index 56efa204a4..ada0f65e1b 100644
--- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js
+++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.js
@@ -150,7 +150,7 @@ var external_commonjs_vue_commonjs2_vue_root_Vue_ = __webpack_require__("8bbf");
 // EXTERNAL MODULE: external "CoreHome"
 var external_CoreHome_ = __webpack_require__("19dc");
 
-// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=4d275cce
+// CONCATENATED MODULE: ./node_modules/@vue/cli-plugin-babel/node_modules/cache-loader/dist/cjs.js??ref--12-0!./node_modules/@vue/cli-plugin-babel/node_modules/thread-loader/dist/cjs.js!./node_modules/babel-loader/lib!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist/templateLoader.js??ref--6!./node_modules/@vue/cli-service/node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/@vue/cli-service/node_modules/vue-loader-v16/dist??ref--0-1!./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=7516376d
 
 var _hoisted_1 = {
   class: "segment-generator",
@@ -294,7 +294,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     innerHTML: _ctx.$sanitize(_ctx.addNewAndConditionLinkText)
   }, null, 8, _hoisted_20)])])], 512);
 }
-// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=4d275cce
+// CONCATENATED MODULE: ./plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue?vue&type=template&id=7516376d
 
 // EXTERNAL MODULE: external "CorePluginsAdmin"
 var external_CorePluginsAdmin_ = __webpack_require__("a5a2");
@@ -605,6 +605,8 @@ var _window = window,
     },
     segmentDefinition: function segmentDefinition(newVal) {
       if (newVal !== this.modelValue) {
+        // reset state so update:modelValue can cancel the change
+        this.setSegmentString(this.modelValue);
         this.$emit('update:modelValue', newVal);
       }
     },
diff --git a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js
index 27ffccdd73..2137f10cf8 100644
--- a/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js
+++ b/plugins/SegmentEditor/vue/dist/SegmentEditor.umd.min.js
@@ -1,10 +1,10 @@
-(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["SegmentEditor"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["SegmentEditor"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/SegmentEditor/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"SegmentGeneratorStore",(function(){return B})),n.d(t,"SegmentGenerator",(function(){return F})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("8bbf"),r=n("19dc"),c={class:"segment-generator",ref:"root"},l={class:"segment-rows"},s={class:"segment-row"},d=["onClick"],u={href:"#",class:"segment-loading"},m={class:"segment-row-inputs valign-wrapper"},f={class:"segment-input metricListBlock valign-wrapper"},p={style:{width:"100%"}},g={class:"segment-input metricMatchBlock valign-wrapper"},v={style:{display:"inline-block"}},h={class:"segment-input metricValueBlock valign-wrapper"},O={class:"form-group row",style:{width:"100%"}},b={class:"input-field col s12"},j=Object(a["createElementVNode"])("span",{role:"status","aria-live":"polite",class:"ui-helper-hidden-accessible"},null,-1),S=Object(a["createElementVNode"])("div",{class:"clear"},null,-1),V={class:"segment-or"},y=["onClick"],C=["innerHTML"],w={class:"segment-and"},k=["innerHTML"];function A(e,t,n,o,i,r){var A=this,N=Object(a["resolveComponent"])("ActivityIndicator"),E=Object(a["resolveComponent"])("Field"),L=Object(a["resolveComponent"])("ValueInput");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",c,[Object(a["createVNode"])(N,{loading:e.isLoading},null,8,["loading"]),(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(e.conditions,(function(t,n){return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("segmentRow".concat(n)),key:n},[Object(a["createElementVNode"])("div",l,[(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(t.orConditions,(function(n,o){var i,r;return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("orCondId".concat(n.id)),key:o},[Object(a["createElementVNode"])("div",s,[Object(a["createElementVNode"])("a",{class:"segment-close",onClick:function(o){return e.removeOrCondition(t,n)}},null,8,d),Object(a["withDirectives"])(Object(a["createElementVNode"])("a",u,null,512),[[a["vShow"],e.conditionValuesLoading[n.id]]]),Object(a["createElementVNode"])("div",m,[Object(a["createElementVNode"])("div",f,[Object(a["createElementVNode"])("div",p,[Object(a["createVNode"])(E,{uicontrol:"expandable-select",name:"segments","model-value":n.segment,"onUpdate:modelValue":function(t){n.segment=t,e.updateAutocomplete(n),e.computeSegmentDefinition()},title:null===(i=e.segments[n.segment])||void 0===i?void 0:i.name,"full-width":!0,options:e.segmentList},null,8,["model-value","onUpdate:modelValue","title","options"])])]),Object(a["createElementVNode"])("div",g,[Object(a["createElementVNode"])("div",v,[Object(a["createVNode"])(E,{uicontrol:"select",name:"matchType","model-value":n.matches,"onUpdate:modelValue":function(t){n.matches=t,e.computeSegmentDefinition()},"full-width":!0,options:e.matches[null===(r=e.segments[n.segment])||void 0===r?void 0:r.type]},null,8,["model-value","onUpdate:modelValue","options"])])]),Object(a["createElementVNode"])("div",h,[Object(a["createElementVNode"])("div",O,[Object(a["createElementVNode"])("div",b,[j,Object(a["createVNode"])(L,{or:n,onUpdate:function(e){n.value=e,A.computeSegmentDefinition()}},null,8,["or","onUpdate"])])])]),S])]),Object(a["createElementVNode"])("div",V,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorOR")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-or",onClick:function(n){return e.addNewOrCondition(t)}},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewOrConditionLinkText)},null,8,C)])],8,y)]),Object(a["createElementVNode"])("div",w,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorAND")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-row initial",onClick:t[0]||(t[0]=function(t){return e.addNewAndCondition()})},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewAndConditionLinkText)},null,8,k)])])],512)}var N=n("a5a2");function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function L(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _(e,t,n){return t&&L(e.prototype,t),n&&L(e,n),e}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
+(function(e,t){"object"===typeof exports&&"object"===typeof module?module.exports=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):"function"===typeof define&&define.amd?define(["CoreHome",,"CorePluginsAdmin"],t):"object"===typeof exports?exports["SegmentEditor"]=t(require("CoreHome"),require("vue"),require("CorePluginsAdmin")):e["SegmentEditor"]=t(e["CoreHome"],e["Vue"],e["CorePluginsAdmin"])})("undefined"!==typeof self?self:this,(function(e,t,n){return function(e){var t={};function n(o){if(t[o])return t[o].exports;var i=t[o]={i:o,l:!1,exports:{}};return e[o].call(i.exports,i,i.exports,n),i.l=!0,i.exports}return n.m=e,n.c=t,n.d=function(e,t,o){n.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:o})},n.r=function(e){"undefined"!==typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},n.t=function(e,t){if(1&t&&(e=n(e)),8&t)return e;if(4&t&&"object"===typeof e&&e&&e.__esModule)return e;var o=Object.create(null);if(n.r(o),Object.defineProperty(o,"default",{enumerable:!0,value:e}),2&t&&"string"!=typeof e)for(var i in e)n.d(o,i,function(t){return e[t]}.bind(null,i));return o},n.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return n.d(t,"a",t),t},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},n.p="plugins/SegmentEditor/vue/dist/",n(n.s="fae3")}({"19dc":function(t,n){t.exports=e},"8bbf":function(e,n){e.exports=t},a5a2:function(e,t){e.exports=n},fae3:function(e,t,n){"use strict";if(n.r(t),n.d(t,"SegmentGeneratorStore",(function(){return B})),n.d(t,"SegmentGenerator",(function(){return F})),"undefined"!==typeof window){var o=window.document.currentScript,i=o&&o.src.match(/(.+\/)[^/]+\.js(\?.*)?$/);i&&(n.p=i[1])}var a=n("8bbf"),r=n("19dc"),c={class:"segment-generator",ref:"root"},l={class:"segment-rows"},s={class:"segment-row"},d=["onClick"],u={href:"#",class:"segment-loading"},m={class:"segment-row-inputs valign-wrapper"},f={class:"segment-input metricListBlock valign-wrapper"},g={style:{width:"100%"}},p={class:"segment-input metricMatchBlock valign-wrapper"},v={style:{display:"inline-block"}},h={class:"segment-input metricValueBlock valign-wrapper"},O={class:"form-group row",style:{width:"100%"}},b={class:"input-field col s12"},j=Object(a["createElementVNode"])("span",{role:"status","aria-live":"polite",class:"ui-helper-hidden-accessible"},null,-1),S=Object(a["createElementVNode"])("div",{class:"clear"},null,-1),V={class:"segment-or"},y=["onClick"],C=["innerHTML"],w={class:"segment-and"},k=["innerHTML"];function A(e,t,n,o,i,r){var A=this,N=Object(a["resolveComponent"])("ActivityIndicator"),E=Object(a["resolveComponent"])("Field"),L=Object(a["resolveComponent"])("ValueInput");return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",c,[Object(a["createVNode"])(N,{loading:e.isLoading},null,8,["loading"]),(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(e.conditions,(function(t,n){return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("segmentRow".concat(n)),key:n},[Object(a["createElementVNode"])("div",l,[(Object(a["openBlock"])(!0),Object(a["createElementBlock"])(a["Fragment"],null,Object(a["renderList"])(t.orConditions,(function(n,o){var i,r;return Object(a["openBlock"])(),Object(a["createElementBlock"])("div",{class:Object(a["normalizeClass"])("orCondId".concat(n.id)),key:o},[Object(a["createElementVNode"])("div",s,[Object(a["createElementVNode"])("a",{class:"segment-close",onClick:function(o){return e.removeOrCondition(t,n)}},null,8,d),Object(a["withDirectives"])(Object(a["createElementVNode"])("a",u,null,512),[[a["vShow"],e.conditionValuesLoading[n.id]]]),Object(a["createElementVNode"])("div",m,[Object(a["createElementVNode"])("div",f,[Object(a["createElementVNode"])("div",g,[Object(a["createVNode"])(E,{uicontrol:"expandable-select",name:"segments","model-value":n.segment,"onUpdate:modelValue":function(t){n.segment=t,e.updateAutocomplete(n),e.computeSegmentDefinition()},title:null===(i=e.segments[n.segment])||void 0===i?void 0:i.name,"full-width":!0,options:e.segmentList},null,8,["model-value","onUpdate:modelValue","title","options"])])]),Object(a["createElementVNode"])("div",p,[Object(a["createElementVNode"])("div",v,[Object(a["createVNode"])(E,{uicontrol:"select",name:"matchType","model-value":n.matches,"onUpdate:modelValue":function(t){n.matches=t,e.computeSegmentDefinition()},"full-width":!0,options:e.matches[null===(r=e.segments[n.segment])||void 0===r?void 0:r.type]},null,8,["model-value","onUpdate:modelValue","options"])])]),Object(a["createElementVNode"])("div",h,[Object(a["createElementVNode"])("div",O,[Object(a["createElementVNode"])("div",b,[j,Object(a["createVNode"])(L,{or:n,onUpdate:function(e){n.value=e,A.computeSegmentDefinition()}},null,8,["or","onUpdate"])])])]),S])]),Object(a["createElementVNode"])("div",V,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorOR")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-or",onClick:function(n){return e.addNewOrCondition(t)}},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewOrConditionLinkText)},null,8,C)])],8,y)]),Object(a["createElementVNode"])("div",w,Object(a["toDisplayString"])(e.translate("SegmentEditor_OperatorAND")),1)],2)})),128)),Object(a["createElementVNode"])("div",{class:"segment-add-row initial",onClick:t[0]||(t[0]=function(t){return e.addNewAndCondition()})},[Object(a["createElementVNode"])("div",null,[Object(a["createElementVNode"])("a",{innerHTML:e.$sanitize(e.addNewAndConditionLinkText)},null,8,k)])])],512)}var N=n("a5a2");function E(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function L(e,t){for(var n=0;n<t.length;n++){var o=t[n];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(e,o.key,o)}}function _(e,t,n){return t&&L(e.prototype,t),n&&L(e,n),e}function D(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}
 /*!
  * Matomo - free/libre analytics platform
  *
  * @link https://matomo.org
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
- */var x=function(){function e(){var t=this;E(this,e),D(this,"privateState",Object(a["reactive"])({isLoading:!1,segments:[]})),D(this,"state",Object(a["computed"])((function(){return Object(a["readonly"])(t.privateState)}))),D(this,"loadSegmentsAbort",void 0),D(this,"loadSegmentsPromise",void 0),D(this,"fetchedSiteId",void 0)}return _(e,[{key:"loadSegments",value:function(e,t){var n=this;if(this.loadSegmentsAbort&&(this.loadSegmentsAbort.abort(),this.loadSegmentsAbort=void 0),this.privateState.isLoading=!0,this.fetchedSiteId!==e&&(this.loadSegmentsAbort=void 0,this.fetchedSiteId=e),!this.loadSegmentsPromise){var o=void 0,i=void 0;"all"!==e&&e?e&&(o=e,i=e):(o="all",i="all"),this.loadSegmentsAbort=new AbortController,this.loadSegmentsPromise=r["AjaxHelper"].fetch({method:"API.getSegmentsMetadata",filter_limit:"-1",_hideImplementationData:0,idSites:o,idSite:i})}return this.loadSegmentsPromise.then((function(e){return n.privateState.isLoading=!1,e&&(n.privateState.segments=t?e.filter((function(e){return e.sqlSegment&&e.sqlSegment.match(/log_visit\./)})):e),n.state.value.segments})).finally((function(){n.privateState.isLoading=!1}))}}]),e}(),B=new x,I=["placeholder","title","value"];function G(e,t,n,o,i,r){return Object(a["openBlock"])(),Object(a["createElementBlock"])("input",{placeholder:e.translate("General_Value"),type:"text",class:"autocomplete",title:e.translate("General_Value"),autocomplete:"off",value:e.or.value,onKeydown:t[0]||(t[0]=function(t){return e.onKeydownOrConditionValue(t)}),onChange:t[1]||(t[1]=function(t){return e.onKeydownOrConditionValue(t)})},null,40,I)}var P=Object(a["defineComponent"])({props:{or:Object},created:function(){this.onKeydownOrConditionValue=Object(r["debounce"])(this.onKeydownOrConditionValue,50)},emits:["update"],methods:{onKeydownOrConditionValue:function(e){this.$emit("update",e.target.value)}}});P.render=G;var $=P;function T(){return{metric:[{key:"==",value:Object(r["translate"])("General_OperationEquals")},{key:"!=",value:Object(r["translate"])("General_OperationNotEquals")},{key:"<=",value:Object(r["translate"])("General_OperationAtMost")},{key:">=",value:Object(r["translate"])("General_OperationAtLeast")},{key:"<",value:Object(r["translate"])("General_OperationLessThan")},{key:">",value:Object(r["translate"])("General_OperationGreaterThan")}],dimension:[{key:"==",value:Object(r["translate"])("General_OperationIs")},{key:"!=",value:Object(r["translate"])("General_OperationIsNot")},{key:"=@",value:Object(r["translate"])("General_OperationContains")},{key:"!@",value:Object(r["translate"])("General_OperationDoesNotContain")},{key:"=^",value:Object(r["translate"])("General_OperationStartsWith")},{key:"=$",value:Object(r["translate"])("General_OperationEndsWith")}]}}function q(){for(var e="",t="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",n=1;n<=10;n+=1)e+=t.charAt(Math.floor(Math.random()*t.length));return e}function M(e){for(var t,n,o=["==","!=","<=",">=","=@","!@","<",">","=^","=$"],i={},a=e.length,r=!1,c=0;c<o.length;c+=1)t=o[c],n=e.indexOf(t),-1!==n&&n<a&&(a=n,1===t.length&&(r=!0));a<e.length&&(!0===r?(i.segment=e.slice(0,a),i.matches=e.slice(a,a+1),i.value=decodeURIComponent(e.slice(a+1))):(i.segment=e.slice(0,a),i.matches=e.slice(a,a+2),i.value=decodeURIComponent(e.slice(a+2))),'""'===i.value&&(i.value=""));try{i.value=decodeURIComponent(i.value)}catch(l){}return i}function U(e){return e?"".concat(e).replace(/(<([^>]+)>)/gi,""):e}var H=window,R=H.$,J=Object(a["defineComponent"])({props:{addInitialCondition:Boolean,visitSegmentsOnly:Boolean,idsite:[String,Number],modelValue:{type:String,default:""}},components:{ActivityIndicator:r["ActivityIndicator"],Field:N["Field"],ValueInput:$},data:function(){return{conditions:[],queriedSegments:[],matches:T(),conditionValuesLoading:{},segmentDefinition:""}},emits:["update:modelValue"],watch:{modelValue:function(e){e!==this.segmentDefinition&&this.setSegmentString(e)},conditions:{deep:!0,handler:function(){this.computeSegmentDefinition()}},segmentDefinition:function(e){e!==this.modelValue&&this.$emit("update:modelValue",e)},idsite:function(e){this.reloadSegments(e,this.visitSegmentsOnly)}},created:function(){this.matches[""]=this.matches.dimension,this.setSegmentString(this.modelValue),this.segmentDefinition=this.modelValue,this.reloadSegments(this.idsite,this.visitSegmentsOnly)},methods:{reloadSegments:function(e,t){var n=this;B.loadSegments(e,t).then((function(e){n.queriedSegments=e.map((function(e){return Object.assign(Object.assign({},e),{},{category:e.category||"Others"})})),n.addInitialCondition&&0===n.conditions.length&&n.addNewAndCondition()}))},addAndCondition:function(e){this.conditions.push(e)},addNewOrCondition:function(e){var t={segment:this.firstSegment,matches:this.firstMatch,value:""};this.addOrCondition(e,t)},addOrCondition:function(e,t){var n=this;this.conditionValuesLoading[t.id]=!1,t.id=q(),e.orConditions.push(t),Object(a["nextTick"])((function(){n.updateAutocomplete(t)}))},updateAutocomplete:function(e){var t=this;this.conditionValuesLoading[e.id]=!0,R(".orCondId".concat(e.id," .metricValueBlock input"),this.$refs.root).autocomplete({source:[],minLength:0});var n=new AbortController,o=!1;r["AjaxHelper"].fetch({module:"API",format:"json",method:"API.getSuggestedValuesForSegment",segmentName:e.segment}).then((function(n){t.conditionValuesLoading[e.id]=!1,o=!0;var i=R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:n,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){R(i).autocomplete("search",e.value)}))})).catch((function(){o=!0,t.conditionValuesLoading[e.id]=!1,R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:[],minLength:0}).autocomplete("search",e.value)})),setTimeout((function(){o||n.abort()}),2e4)},removeOrCondition:function(e,t){var n=e.orConditions.indexOf(t);if(n>-1&&e.orConditions.splice(n,1),0===e.orConditions.length){var o=this.conditions.indexOf(e);n>-1&&this.conditions.splice(o,1)}},setSegmentString:function(e){var t=this;if(this.conditions=[],e){var n=e.split(";").map((function(e){return e.split(",")}));this.conditions=n.map((function(e){var n={orConditions:[]};return e.forEach((function(e){var o=M(e);t.addOrCondition(n,o)})),n}))}},addNewAndCondition:function(){var e={orConditions:[]};return this.addAndCondition(e),this.addNewOrCondition(e),e},computeSegmentDefinition:function(){var e="";this.conditions.forEach((function(t){if(t.orConditions.length){var n="";t.orConditions.forEach((function(e){if(e.value||e.segment||e.matches){""!==n&&(n+=",");var t=encodeURIComponent(encodeURIComponent(e.value));n+="".concat(e.segment).concat(e.matches).concat(t)}})),""!==e&&(e+=";"),e+=n}})),this.segmentDefinition=e}},computed:{firstSegment:function(){return this.queriedSegments[0].segment},firstMatch:function(){var e=this.queriedSegments[0];return e?e.type&&this.matches[e.type]?this.matches[e.type][0].key:this.matches[""][0].key:null},segments:function(){var e={};return this.queriedSegments.forEach((function(t){e[t.segment]=t})),e},segmentList:function(){return this.queriedSegments.map((function(e){return{group:e.category,key:e.segment,value:e.name,tooltip:e.acceptedValues?U(e.acceptedValues):void 0}}))},addNewOrConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"</span>")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(this.andConditionLabel,"</span>")))},isLoading:function(){return B.state.value.isLoading}}});J.render=A;var F=J;
+ */var x=function(){function e(){var t=this;E(this,e),D(this,"privateState",Object(a["reactive"])({isLoading:!1,segments:[]})),D(this,"state",Object(a["computed"])((function(){return Object(a["readonly"])(t.privateState)}))),D(this,"loadSegmentsAbort",void 0),D(this,"loadSegmentsPromise",void 0),D(this,"fetchedSiteId",void 0)}return _(e,[{key:"loadSegments",value:function(e,t){var n=this;if(this.loadSegmentsAbort&&(this.loadSegmentsAbort.abort(),this.loadSegmentsAbort=void 0),this.privateState.isLoading=!0,this.fetchedSiteId!==e&&(this.loadSegmentsAbort=void 0,this.fetchedSiteId=e),!this.loadSegmentsPromise){var o=void 0,i=void 0;"all"!==e&&e?e&&(o=e,i=e):(o="all",i="all"),this.loadSegmentsAbort=new AbortController,this.loadSegmentsPromise=r["AjaxHelper"].fetch({method:"API.getSegmentsMetadata",filter_limit:"-1",_hideImplementationData:0,idSites:o,idSite:i})}return this.loadSegmentsPromise.then((function(e){return n.privateState.isLoading=!1,e&&(n.privateState.segments=t?e.filter((function(e){return e.sqlSegment&&e.sqlSegment.match(/log_visit\./)})):e),n.state.value.segments})).finally((function(){n.privateState.isLoading=!1}))}}]),e}(),B=new x,I=["placeholder","title","value"];function G(e,t,n,o,i,r){return Object(a["openBlock"])(),Object(a["createElementBlock"])("input",{placeholder:e.translate("General_Value"),type:"text",class:"autocomplete",title:e.translate("General_Value"),autocomplete:"off",value:e.or.value,onKeydown:t[0]||(t[0]=function(t){return e.onKeydownOrConditionValue(t)}),onChange:t[1]||(t[1]=function(t){return e.onKeydownOrConditionValue(t)})},null,40,I)}var P=Object(a["defineComponent"])({props:{or:Object},created:function(){this.onKeydownOrConditionValue=Object(r["debounce"])(this.onKeydownOrConditionValue,50)},emits:["update"],methods:{onKeydownOrConditionValue:function(e){this.$emit("update",e.target.value)}}});P.render=G;var $=P;function T(){return{metric:[{key:"==",value:Object(r["translate"])("General_OperationEquals")},{key:"!=",value:Object(r["translate"])("General_OperationNotEquals")},{key:"<=",value:Object(r["translate"])("General_OperationAtMost")},{key:">=",value:Object(r["translate"])("General_OperationAtLeast")},{key:"<",value:Object(r["translate"])("General_OperationLessThan")},{key:">",value:Object(r["translate"])("General_OperationGreaterThan")}],dimension:[{key:"==",value:Object(r["translate"])("General_OperationIs")},{key:"!=",value:Object(r["translate"])("General_OperationIsNot")},{key:"=@",value:Object(r["translate"])("General_OperationContains")},{key:"!@",value:Object(r["translate"])("General_OperationDoesNotContain")},{key:"=^",value:Object(r["translate"])("General_OperationStartsWith")},{key:"=$",value:Object(r["translate"])("General_OperationEndsWith")}]}}function q(){for(var e="",t="abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789",n=1;n<=10;n+=1)e+=t.charAt(Math.floor(Math.random()*t.length));return e}function M(e){for(var t,n,o=["==","!=","<=",">=","=@","!@","<",">","=^","=$"],i={},a=e.length,r=!1,c=0;c<o.length;c+=1)t=o[c],n=e.indexOf(t),-1!==n&&n<a&&(a=n,1===t.length&&(r=!0));a<e.length&&(!0===r?(i.segment=e.slice(0,a),i.matches=e.slice(a,a+1),i.value=decodeURIComponent(e.slice(a+1))):(i.segment=e.slice(0,a),i.matches=e.slice(a,a+2),i.value=decodeURIComponent(e.slice(a+2))),'""'===i.value&&(i.value=""));try{i.value=decodeURIComponent(i.value)}catch(l){}return i}function U(e){return e?"".concat(e).replace(/(<([^>]+)>)/gi,""):e}var H=window,R=H.$,J=Object(a["defineComponent"])({props:{addInitialCondition:Boolean,visitSegmentsOnly:Boolean,idsite:[String,Number],modelValue:{type:String,default:""}},components:{ActivityIndicator:r["ActivityIndicator"],Field:N["Field"],ValueInput:$},data:function(){return{conditions:[],queriedSegments:[],matches:T(),conditionValuesLoading:{},segmentDefinition:""}},emits:["update:modelValue"],watch:{modelValue:function(e){e!==this.segmentDefinition&&this.setSegmentString(e)},conditions:{deep:!0,handler:function(){this.computeSegmentDefinition()}},segmentDefinition:function(e){e!==this.modelValue&&(this.setSegmentString(this.modelValue),this.$emit("update:modelValue",e))},idsite:function(e){this.reloadSegments(e,this.visitSegmentsOnly)}},created:function(){this.matches[""]=this.matches.dimension,this.setSegmentString(this.modelValue),this.segmentDefinition=this.modelValue,this.reloadSegments(this.idsite,this.visitSegmentsOnly)},methods:{reloadSegments:function(e,t){var n=this;B.loadSegments(e,t).then((function(e){n.queriedSegments=e.map((function(e){return Object.assign(Object.assign({},e),{},{category:e.category||"Others"})})),n.addInitialCondition&&0===n.conditions.length&&n.addNewAndCondition()}))},addAndCondition:function(e){this.conditions.push(e)},addNewOrCondition:function(e){var t={segment:this.firstSegment,matches:this.firstMatch,value:""};this.addOrCondition(e,t)},addOrCondition:function(e,t){var n=this;this.conditionValuesLoading[t.id]=!1,t.id=q(),e.orConditions.push(t),Object(a["nextTick"])((function(){n.updateAutocomplete(t)}))},updateAutocomplete:function(e){var t=this;this.conditionValuesLoading[e.id]=!0,R(".orCondId".concat(e.id," .metricValueBlock input"),this.$refs.root).autocomplete({source:[],minLength:0});var n=new AbortController,o=!1;r["AjaxHelper"].fetch({module:"API",format:"json",method:"API.getSuggestedValuesForSegment",segmentName:e.segment}).then((function(n){t.conditionValuesLoading[e.id]=!1,o=!0;var i=R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:n,minLength:0,select:function(n,o){n.preventDefault(),e.value=o.item.value,t.computeSegmentDefinition(),t.$forceUpdate()}}).off("click").click((function(){R(i).autocomplete("search",e.value)}))})).catch((function(){o=!0,t.conditionValuesLoading[e.id]=!1,R(".orCondId".concat(e.id," .metricValueBlock input")).autocomplete({source:[],minLength:0}).autocomplete("search",e.value)})),setTimeout((function(){o||n.abort()}),2e4)},removeOrCondition:function(e,t){var n=e.orConditions.indexOf(t);if(n>-1&&e.orConditions.splice(n,1),0===e.orConditions.length){var o=this.conditions.indexOf(e);n>-1&&this.conditions.splice(o,1)}},setSegmentString:function(e){var t=this;if(this.conditions=[],e){var n=e.split(";").map((function(e){return e.split(",")}));this.conditions=n.map((function(e){var n={orConditions:[]};return e.forEach((function(e){var o=M(e);t.addOrCondition(n,o)})),n}))}},addNewAndCondition:function(){var e={orConditions:[]};return this.addAndCondition(e),this.addNewOrCondition(e),e},computeSegmentDefinition:function(){var e="";this.conditions.forEach((function(t){if(t.orConditions.length){var n="";t.orConditions.forEach((function(e){if(e.value||e.segment||e.matches){""!==n&&(n+=",");var t=encodeURIComponent(encodeURIComponent(e.value));n+="".concat(e.segment).concat(e.matches).concat(t)}})),""!==e&&(e+=";"),e+=n}})),this.segmentDefinition=e}},computed:{firstSegment:function(){return this.queriedSegments[0].segment},firstMatch:function(){var e=this.queriedSegments[0];return e?e.type&&this.matches[e.type]?this.matches[e.type][0].key:this.matches[""][0].key:null},segments:function(){var e={};return this.queriedSegments.forEach((function(t){e[t.segment]=t})),e},segmentList:function(){return this.queriedSegments.map((function(e){return{group:e.category,key:e.segment,value:e.name,tooltip:e.acceptedValues?U(e.acceptedValues):void 0}}))},addNewOrConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(Object(r["translate"])("SegmentEditor_OperatorOR"),"</span>")))},andConditionLabel:function(){return this.conditions.length?Object(r["translate"])("SegmentEditor_OperatorAND"):""},addNewAndConditionLinkText:function(){return"+".concat(Object(r["translate"])("SegmentEditor_AddANDorORCondition","<span>".concat(this.andConditionLabel,"</span>")))},isLoading:function(){return B.state.value.isLoading}}});J.render=A;var F=J;
 /*!
  * Matomo - free/libre analytics platform
  *
diff --git a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue
index 830a9bc524..b278d9a36c 100644
--- a/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue
+++ b/plugins/SegmentEditor/vue/src/SegmentGenerator/SegmentGenerator.vue
@@ -286,6 +286,9 @@ export default defineComponent({
     },
     segmentDefinition(newVal) {
       if (newVal !== this.modelValue) {
+        // reset state so update:modelValue can cancel the change
+        this.setSegmentString(this.modelValue);
+
         this.$emit('update:modelValue', newVal);
       }
     },