open actionView to appropriate location when clicking on product text fields

imports/plugins/core/ui/client/components/textfield/textfield.js

@@ -74,6 +74,18 @@ class TextField extends Component {
     }
   }
 
+  /**
+   * onFocus
+   * @summary set the state when the input is focused
+   * @param  {Event} event Event object
+   * @return {void}
+   */
+  onFocus = (event) => {
+    if (this.props.onFocus) {
+      this.props.onFocus(event, event.target.value, this.props.name);
+    }
+  }
+
   /**
    * onKeyDown
    * @summary set the state when the value of the input is changed
@@ -104,6 +116,7 @@ class TextField extends Component {
         className={`${this.props.name}-edit-input`}
         onBlur={this.onBlur}
         onChange={this.onChange}
+        onFocus={this.onFocus}
         placeholder={placeholder}
         ref="input"
         value={this.value}
@@ -133,6 +146,7 @@ class TextField extends Component {
         name={this.props.name}
         onBlur={this.onBlur}
         onChange={this.onChange}
+        onFocus={this.onFocus}
         onKeyDown={this.onKeyDown}
         placeholder={placeholder}
         ref="input"
@@ -254,6 +268,7 @@ TextField.propTypes = {
   name: PropTypes.string,
   onBlur: PropTypes.func,
   onChange: PropTypes.func,
+  onFocus: PropTypes.func,
   onKeyDown: PropTypes.func,
   onReturnKeyDown: PropTypes.func,
   placeholder: PropTypes.string,

imports/plugins/included/product-admin/client/components/productAdmin.js

@@ -233,6 +233,7 @@ class ProductAdmin extends Component {
             i18nKeyTitle="productDetailEdit.productSettings"
             title="Product Settings"
             onChange={this.handleFieldChange}
+            name={"productDetails"}
           />
           <Components.CardBody expandable={true}>
             <Components.Select

imports/plugins/included/product-detail-simple/client/components/productField.js

@@ -5,6 +5,8 @@ import Velocity from "velocity-animate";
 import "velocity-animate/velocity.ui";
 import { Components, registerComponent } from "@reactioncommerce/reaction-components";
 
+import { Reaction } from "client/api";
+
 class ProductField extends Component {
   state = {
     value: this.value
@@ -43,6 +45,12 @@ class ProductField extends Component {
     }
   }
 
+  handleFocus = (event) => {
+    // Open actionView, if it's not open already
+    // Set actionView to the productDetails pane
+    Reaction.state.set("edit/focus", "productDetails");
+  }
+
   get fieldName() {
     return this.props.fieldName;
   }
@@ -97,6 +105,7 @@ class ProductField extends Component {
           multiline={this.props.multiline}
           onBlur={this.handleBlur}
           onChange={this.handleChange}
+          onFocus={this.handleFocus}
           onReturnKeyDown={this.handleBlur}
           value={this.state.value}
           {...this.props.textFieldProps}

imports/plugins/included/product-variant/containers/productGridItemsContainer.js

@@ -185,6 +185,9 @@ const wrapComponent = (Comp) => (
         handle: handle
       });
 
+      // Open actionView to productDetails panel
+      Reaction.state.set("edit/focus", "productDetails");
+
       Reaction.setActionView({
         i18nKeyLabel: "productDetailEdit.productSettings",
         label: "Product Settings",