Update select property view

src/style_manager/view/PropertySelectView.js

@@ -1,8 +1,5 @@
-import Backbone from 'backbone';
 import PropertyView from './PropertyView';
 
-const $ = Backbone.$;
-
 export default PropertyView.extend({
   templateInput() {
     const pfx = this.pfx;
@@ -48,4 +45,12 @@ export default PropertyView.extend({
       this.input = inputH.firstChild;
     }
   },
+
+  __setValueInput(value) {
+    const { model } = this;
+    const input = this.getInputEl();
+    const firstOpt = model.getOptions()[0];
+    const firstId = firstOpt ? model.getOptionId(firstOpt) : '';
+    input && (input.value = value || firstId);
+  },
 });

src/style_manager/view/PropertyView.js

@@ -87,9 +87,12 @@ export default Backbone.View.extend({
     // this.listenTo(model, 'change:status', this.updateStatus);
     this.listenTo(model, 'change:name change:className change:full', this.render);
 
+    // Put a sligh delay on debounce in order to execute the update
+    // post styleManager.__upProps trigger.
+    this.onValueChange = debounce(this.onValueChange.bind(this), 10);
     // this.listenTo(this.propTarget, 'update', this.onValueChange);
-    this.onValueChange = debounce(this.onValueChange.bind(this));
     this.listenTo(model, 'change:value', this.onValueChange);
+    this.listenTo(em, 'change:device', this.onValueChange);
 
     const init = this.init && this.init.bind(this);
     init && init();
@@ -403,10 +406,18 @@ export default Backbone.View.extend({
   },
 
   onValueChange(m, val, opt = {}) {
-    const value = this.model.getFullValue();
-    this.setValue(value);
+    this.setValue(this.model.getFullValue());
     this.updateStatus();
-    console.log('onValueChange', this.model.getName(), { value }, opt);
+    console.log(
+      'onValueChange',
+      this.model.getName(),
+      {
+        fullValue: this.model.getFullValue(),
+        hasValue: this.model.hasValue(),
+        hasValueLocal: this.model.hasValue({ noParent: true }),
+      },
+      opt
+    );
   },
 
   /**
@@ -598,8 +609,12 @@ export default Backbone.View.extend({
     const { model } = this;
     const result = isUndefined(value) ? model.getDefaultValue() : value;
     if (this.update) return this.__update(result);
+    this.__setValueInput(result);
+  },
+
+  __setValueInput(value) {
     const input = this.getInputEl();
-    input && (input.value = result);
+    input && (input.value = value);
   },
 
   getInputEl() {

src/style_manager/view/SectorsView.js

@@ -29,9 +29,9 @@ export default Backbone.View.extend({
     const coll = this.collection;
     this.listenTo(coll, 'add', this.addTo);
     this.listenTo(coll, 'reset', this.render);
-    this.listenTo(em, module.events.target, this.targetUpdated);
-    // Check local/parent value on input change
-    this.listenTo(em, 'styleable:change', this.emitUpdate);
+    // this.listenTo(em, module.events.target, this.targetUpdated);
+    // // Check local/parent value on input change
+    // this.listenTo(em, 'styleable:change', this.emitUpdate);
   },
 
   emitUpdate: debounce(function () {