define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {

  'use strict';

  var ClearInput,
      uiEvents = {
      'keydown [data-dough-clear-input]' : 'updateResetButton',
      'click [data-dough-clear-input-button]' : 'resetForm'
      };

  ClearInput = function($el, config) {
    this.uiEvents = uiEvents;
    ClearInput.baseConstructor.call(this, $el, config);

    this.$resetInput = this.$el.find('[data-dough-clear-input]');
    this.$resetButton = this.$el.find('[data-dough-clear-input-button]');
  };

  /**
  * Inherit from base module, for shared methods and interface
  */
  DoughBaseComponent.extend(ClearInput);

  /**
  * Set up and populate the model from the form inputs
  * @param {Promise} initialised
  */
  ClearInput.prototype.init = function(initialised) {
    this._initialisedSuccess(initialised);
  };

  ClearInput.prototype.updateResetButton = function() {
    var fn = this.$resetInput.val() === '' ? 'removeClass' : 'addClass';
    this.$resetButton[fn]('is-active');
  };

// We are progressively enhancing the form with JS. The CSS button, type 'reset'
// resets the form faster than the JS can run, so we need to invoke reset() to ensure the correct behaviour.

  ClearInput.prototype.resetForm = function() {
    this.$el[0].reset();
    this.updateResetButton();
  };

  return ClearInput;

});

define(['jquery', 'DoughBaseComponent'], function($, DoughBaseComponent) {

  'use strict';

  var ClearInput,
      uiEvents = {
      'keydown [data-dough-clear-input]' : 'updateResetButton',
      'click [data-dough-clear-input-button]' : 'resetForm'
      };

  ClearInput = function($el, config) {
    this.uiEvents = uiEvents;
    ClearInput.baseConstructor.call(this, $el, config);

    this.$resetInput = this.$el.find('[data-dough-clear-input]');
    this.$resetButton = this.$el.find('[data-dough-clear-input-button]');

    this.updateResetButton();
  };

  /**
  * Inherit from base module, for shared methods and interface
  */
  DoughBaseComponent.extend(ClearInput);

  /**
  * Set up and populate the model from the form inputs
  * @param {Promise} initialised
  */
  ClearInput.prototype.init = function(initialised) {
    this._initialisedSuccess(initialised);
  };

  ClearInput.prototype.updateResetButton = function() {
    var fn = this.$resetInput.val() === '' ? 'removeClass' : 'addClass';
    this.$resetButton[fn]('is-active');
  };

// We are progressively enhancing the form with JS. The CSS button, type 'reset'
// resets the form faster than the JS can run, so we need to invoke reset() to ensure the correct behaviour.

  ClearInput.prototype.resetForm = function(e) {
    this.$resetInput.val('');
    this.updateResetButton();
    this.$resetInput.focus();
    e.preventDefault();
  };

  return ClearInput;

});

Fix search box with initial value after search