Fixes #16365: Added $filterOnFocusOut option for GridView

framework/CHANGELOG.md

@@ -4,6 +4,7 @@ Yii Framework 2 Change Log
 2.0.16 under development
 ------------------------
 
+- Enh #16365: Added $filterOnFocusOut option for GridView (s1lver)
 - Enh #14289: Added `yii\db\Command::executeResetSequence()` to work with Oracle (CedricYii)
 - Enh #9133: Added `yii\behaviors\OptimisticLockBehavior` (tunecino)
 - Bug #16104: Fixed `yii\db\pgsql\QueryBuilder::dropIndex()` to prepend index name with schema name (wapmorgan)

framework/assets/yii.gridView.js

@@ -14,7 +14,7 @@
         if (methods[method]) {
             return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
         } else if (typeof method === 'object' || !method) {
-            return methods.init.apply(this, arguments);
+                return methods.init.apply(this, arguments);
         } else {
             $.error('Method ' + method + ' does not exist in jQuery.yiiGridView');
             return false;
@@ -23,7 +23,8 @@
 
     var defaults = {
         filterUrl: undefined,
-        filterSelector: undefined
+        filterSelector: undefined,
+        filterOnFocusOut: true
     };
 
     var gridData = {};
@@ -82,6 +83,9 @@
                 var $e = $(this);
                 var settings = $.extend({}, defaults, options || {});
                 var id = $e.attr('id');
+                if (!settings.filterOnFocusOut) {
+                    return false;
+                }
                 if (gridData[id] === undefined) {
                     gridData[id] = {};
                 }

framework/grid/GridView.php

@@ -248,6 +248,11 @@ class GridView extends BaseListView
      * This is mainly used by [[Html::error()]] when rendering an error message next to every filter input field.
      */
     public $filterErrorOptions = ['class' => 'help-block'];
+    /**
+     * @var bool whatever to apply filters on losing focus. Leaves an ability to manage filters via yiiGridView JS
+     * @since 2.0.16
+     */
+    public $filterOnFocusOut = true;
     /**
      * @var string the layout that determines how different sections of the grid view should be organized.
      * The following tokens will be replaced with the corresponding section contents:
@@ -288,10 +293,10 @@ class GridView extends BaseListView
      */
     public function run()
     {
-        $id = $this->options['id'];
-        $options = Json::htmlEncode($this->getClientOptions());
         $view = $this->getView();
         GridViewAsset::register($view);
+        $id = $this->options['id'];
+        $options = Json::htmlEncode(array_merge($this->getClientOptions(), ['filterOnFocusOut' => $this->filterOnFocusOut]));
         $view->registerJs("jQuery('#$id').yiiGridView($options);");
         parent::run();
     }
@@ -360,7 +365,7 @@ class GridView extends BaseListView
                 $tableFooterAfterBody = $this->renderTableFooter();
             } else {
                 $tableFooter = $this->renderTableFooter();
-            }	        
+            }
         }
 
         $content = array_filter([

tests/js/tests/yii.gridView.test.js

@@ -14,11 +14,13 @@ describe('yii.gridView', function () {
     var $gridView;
     var settings = {
         filterUrl: '/posts/index',
-        filterSelector: '#w0-filters input, #w0-filters select'
+        filterSelector: '#w0-filters input, #w0-filters select',
+        filterOnFocusOut: true
     };
     var commonSettings = {
         filterUrl: '/posts/index',
-        filterSelector: '#w-common-filters input, #w-common-filters select'
+        filterSelector: '#w-common-filters input, #w-common-filters select',
+        filterOnFocusOut: true
     };
     var $textInput;
     var $select;
@@ -143,7 +145,8 @@ describe('yii.gridView', function () {
     describe('init', function () {
         var customSettings = {
             filterUrl: '/posts/filter',
-            filterSelector: '#w-common-filters input'
+            filterSelector: '#w-common-filters input',
+            filterOnFocusOut: true
         };
 
         withData({