title: How does Magento 2 auto fill text fields using knockout JS
body: <p>Please let me know which JS file handle the auto fill functionality in product creation module? They auto fill the "SKU" field while typing in the "Product name" field. I have searched by "afterkeydown" property but couldn't find any.</p>
  
  <p>I need this functionality for the configurable variation creation section as explained below</p>
  
  <p><a href="https://i.stack.imgur.com/GwnMF.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/GwnMF.png" alt="enter image description here"></a></p>
  
  <p>In the configurable variation creation section, I have edited the summary.js (extend it as summary-custom.js) to show the additional simple attributes.
  Here we can see that for the "size 1" all the 8 simple attributes values should be same. For example if "Base color: Anthracite, size: 1" has "Height" => 1, then the "Base color: Blue Tones, size: 1"'s "Height" should be automatically filled by "1" as Magento had done for the "sku" field update when we type in the "Product name" field.</p>
  
  <p>How can I do this? Can I use the "summary.js" to achieve this?</p>
  
  <p>Here is my summary-custom.js</p>
  
  <pre><code>
  define([
      'uiComponent',
      'jquery',
      'ko',
      'underscore',
      'Magento_Ui/js/grid/paging/paging',
      'mage/translate',
      'Magento_ConfigurableProduct/js/variations/steps/summary'
  ], function (Component, $, ko, _, paging, summary) {
      'use strict';
  
      return Component.extend({
          defaults: {
              modules: {
                  variationsComponent: '${ $.variationsComponent }',
                  modalComponent: '${ $.modalComponent }'
              },
              notificationMessage: {
                  text: null,
                  error: null
              },
              gridExisting: [],
              gridNew: [],
              gridDeleted: [],
              variationsExisting: [],
              variationsNew: [],
              variationsDeleted: [],
              pagingExisting: paging({
                  name: 'configurableWizard.pagingExisting',
                  sizesConfig: {
                      component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
                      name: 'configurableWizard.pagingExisting_sizes'
                  }
              }),
              pagingNew: paging({
                  name: 'configurableWizard.pagingNew',
                  sizesConfig: {
                      component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
                      name: 'configurableWizard.pagingNew_sizes'
                  }
              }),
              pagingDeleted: paging({
                  name: 'configurableWizard.pagingDeleted',
                  sizesConfig: {
                      component: 'Magento_ConfigurableProduct/js/variations/paging/sizes',
                      name: 'configurableWizard.pagingDeleted_sizes'
                  }
              }),
              attributes: [],
              attributesName: [$.mage.__('Images'), $.mage.__('SKU'), $.mage.__('Quantity'), $.mage.__('Height'), $.mage.__('Lower length'), $.mage.__('Lower width'), $.mage.__('Planting depth'), $.mage.__('Planting length'), $.mage.__('Planting width'), $.mage.__('Upper length'), $.mage.__('Upper width'), $.mage.__('Price')],
              sections: [],
              gridTemplate: 'Magento_ConfigurableProduct/variations/steps/summary-grid'
          },
          initObservable: function () {
              var pagingObservables = {
                  currentNew: ko.getObservable(this.pagingNew, 'current'),
                  currentExisting: ko.getObservable(this.pagingExisting, 'current'),
                  currentDeleted: ko.getObservable(this.pagingDeleted, 'current'),
                  pageSizeNew: ko.getObservable(this.pagingNew, 'pageSize'),
                  pageSizeExisting: ko.getObservable(this.pagingExisting, 'pageSize'),
                  pageSizeDeleted: ko.getObservable(this.pagingDeleted, 'pageSize')
              };
  
              this._super().observe('gridExisting gridNew gridDeleted attributes sections');
              this.gridExisting.columns = ko.observableArray();
              this.gridNew.columns = ko.observableArray();
              this.gridDeleted.columns = ko.observableArray();
  
              _.each(pagingObservables, function (observable) {
                  observable.subscribe(function () {
                      this.generateGrid();
                  }, this);
              }, this);
  
              return this;
          },
          nextLabelText: $.mage.__('Generate Products'),
          variations: [],
          calculate: function (variations, getSectionValue) {
              var productSku = this.variationsComponent().getProductValue('sku'),
                  productPrice = this.variationsComponent().getProductPrice(),
                  productWeight = this.variationsComponent().getProductValue('weight'),
                  variationsKeys = [],
                  gridExisting = [],
                  gridNew = [],
                  gridDeleted = [];
  
              this.variations = [];
              _.each(variations, function (options) {
                  var product, images, sku, quantity, price, size_height, size_lower_length, size_lower_width, size_planting_depth, size_planting_length, size_planting_width, size_upper_length, size_upper_width, variation,
                      productId = this.variationsComponent().getProductIdByOptions(options);
  
                  size_height = '';
                  size_lower_length = '';
                  size_lower_width = '';
                  size_planting_depth = '';
                  size_planting_length = '';
                  size_planting_width = '';
                  size_upper_length = '';
                  size_upper_width = '';
  
                  if (productId) {
                      product = _.findWhere(this.variationsComponent().variations, {
                          productId: productId
                      });
                      console.log("here");
                      size_height = product.size_height;
                      size_lower_length = product.size_lower_length;
                      size_lower_width = product.size_lower_width;
                      size_planting_depth = product.size_planting_depth;
                      size_planting_length = product.size_planting_length;
                      size_planting_width = product.size_planting_width;
                      size_upper_length = product.size_upper_length;
                      size_upper_width = product.size_upper_width;
                  }
                  images = getSectionValue('images', options);
                  sku = productSku + _.reduce(options, function (memo, option) {
                      return memo + '-' + option.label;
                  }, '');
                  quantity = getSectionValue('quantity', options);
  
                  if (!quantity && productId) {
                      quantity = product.quantity;
                  }
                  price = getSectionValue('price', options);
  
                  if (!price) {
                      price = productId ? product.price : productPrice;
                  }
  
                  if (productId && !images.file) {
                      images = product.images;
                  }
                  variation = {
                      options: options,
                      images: images,
                      sku: sku,
                      name: sku,
                      quantity: quantity,
                      price: price,
                      size_height: size_height,
                      size_lower_length: size_lower_length,
                      size_lower_width: size_lower_width,
                      size_planting_depth: size_planting_depth,
                      size_planting_length: size_planting_length,
                      size_planting_width: size_planting_width,
                      size_upper_length: size_upper_length,
                      size_upper_width: size_upper_width,
                      productId: productId,
                      weight: productWeight,
                      editable: true
                  };
  
                  if (productId) {
                      variation.sku = product.sku;
                      variation.weight = product.weight;
                      variation.name = product.name;
                      gridExisting.push(this.prepareRowForGrid(variation));
                  } else {
                      gridNew.push(this.prepareRowForGrid(variation));
                  }
                  this.variations.push(variation);
                  variationsKeys.push(this.variationsComponent().getVariationKey(options));
              }, this);
  
              _.each(_.omit(this.variationsComponent().productAttributesMap, variationsKeys), function (productId) {
                  gridDeleted.push(this.prepareRowForGrid(
                      _.findWhere(this.variationsComponent().variations, {
                          productId: productId
                      })
                  ));
              }.bind(this));
  
              this.variationsExisting = gridExisting;
              this.variationsNew = gridNew;
              this.variationsDeleted = gridDeleted;
  
          },
          generateGrid: function () {
              var pageExisting = this.pagingExisting.pageSize * this.pagingExisting.current,
                  pageNew = this.pagingNew.pageSize * this.pagingNew.current,
                  pageDeleted = this.pagingDeleted.pageSize * this.pagingDeleted.current;
  
              this.pagingExisting.totalRecords = this.variationsExisting.length;
              this.gridExisting(this.variationsExisting.slice(pageExisting - this.pagingExisting.pageSize, pageExisting));
  
              this.pagingNew.totalRecords = this.variationsNew.length;
              this.gridNew(this.variationsNew.slice(pageNew - this.pagingNew.pageSize, pageNew));
  
              this.pagingDeleted.totalRecords = this.variationsDeleted.length;
              this.gridDeleted(this.variationsDeleted.slice(pageDeleted - this.pagingDeleted.pageSize, pageDeleted));
          },
          prepareRowForGrid: function (variation) {
              var row = [];
  
              row.push(_.extend({
                  images: []
              }, variation.images));
              row.push(variation.sku);
              row.push(variation.quantity);
              row.push(variation.size_height);
              row.push(variation.size_lower_length);
              row.push(variation.size_lower_width);
              row.push(variation.size_planting_depth);
              row.push(variation.size_planting_length);
              row.push(variation.size_planting_width);
              row.push(variation.size_upper_length);
              row.push(variation.size_upper_width);
              _.each(variation.options, function (option) {
                  row.push(option.label);
              });
              row.push(this.variationsComponent().getCurrencySymbol() +  ' ' + variation.price);
  
              return row;
          },
          getGridTemplate: function () {
              return this.gridTemplate;
          },
          getGridId: function () {
              return _.uniqueId('grid_');
          },
          getColumnsName: function (attributes) {
              var columns = this.attributesName.slice(0);
  
              attributes.each(function (attribute, index) {
                  columns.splice(11 + index, 0, attribute.label);
              }, this);
  
              return columns;
          },
          render: function (wizard) {
              this.wizard = wizard;
              this.sections(wizard.data.sections());
              this.attributes(wizard.data.attributes());
              this.gridNew([]);
              this.gridExisting([]);
              this.gridDeleted([]);
              this.gridExisting.columns(this.getColumnsName(this.wizard.data.attributes));
              this.gridNew.columns(this.getColumnsName(this.wizard.data.attributes));
              this.gridDeleted.columns(this.getColumnsName(this.variationsComponent().productAttributes));
              this.calculate(wizard.data.variations, wizard.data.sectionHelper);
              this.generateGrid();
          },
          force: function () {
              this.variationsComponent().render(this.variations, this.attributes());
              this.modalComponent().closeModal();
          },
          back: function () {
          }
      });
  });
  </code></pre>