CSS Panel - Handle focus after editing selector

2 files changed, 16 insertions, 0 deletions

diff --git a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
index e0ffb1a8..54181bf3 100644
--- a/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
+++ b/js/panels/css-panel/rule-components/css-style-rule.reel/css-style-rule.js
@@ -88,6 +88,14 @@ exports.CssStyleRule = Montage.create(Component, {
             }
         }
     },
+    handleStop : {
+        value: function(e) {
+            if(this.focusDelegate) {
+                e._event.detail.preventDefault();
+                this.focusDelegate.handleSelectorStop(this.rule, this.selectorField.value, this);
+            }
+        }
+    },
     handleMouseover: {
         value: function(e) {
             if(this.focusDelegate) {
@@ -125,6 +133,7 @@ exports.CssStyleRule = Montage.create(Component, {
                 this.declarationComponent.type = 'inline';
             } else {
                 this.selectorField.addEventListener('change', this, false);
+                this.selectorField.addEventListener('stop', this, false);
                 this.selectorField.element.addEventListener('mouseover', this, false);
                 this.selectorField.element.addEventListener('mouseout', this, false);
             }
diff --git a/js/panels/css-panel/styles-view-delegate.js b/js/panels/css-panel/styles-view-delegate.js
index d607a0ba..68497747 100644
--- a/js/panels/css-panel/styles-view-delegate.js
+++ b/js/panels/css-panel/styles-view-delegate.js
@@ -75,6 +75,13 @@ exports.StylesViewDelegate = Montage.create(Component, {
             this._dispatchChange();
         }
     },
+
+    handleSelectorStop : {
+        value: function(rule, newSelector, ruleComponent) {
+            ruleComponent.declarationComponent.repetition.childComponents[0].propertyField.start()
+        }
+    },
+
     _getClassNameFromSelector : {
         value: function(selectorText) {
             var results = /.*\.([A-Za-z0-9_-]+)\:?[A-Za-z0-9_"=-]*$/.exec(selectorText);