Enhance to make form-control CSS class the default and yet optional

[bscheshirwork]

Guys, BC is broken 🦀
This is way to hell! 👿

Make this options

Make form-control class optional for input

optional, not default

Prerequisites

• [ + ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate.
• [ + ] The issue still exists against the latest master branch of yii2-widget-datepicker.
• [ + ] This is not an usage question. I confirm having read the widget documentation and demos.
• [ + ] This is not a general programming / coding question. (Those should be directed to the webtips Q & A forum).
• [ + ] This is not a source plugin (datepicker) issue. (Those should be directed to the plugin issues repo).
• [ + ] I have attempted to find the simplest possible steps to reproduce the issue.
• [ - ] I have included a failing test as a pull request (Optional).

Steps to reproduce the issue

1. composer update
2. break BC
3. PROFIT???

Expected behavior and actual behavior

When I follow those steps, I see...

I was expecting...

Environment

Browsers

• Google Chrome
• [ + ] Mozilla Firefox
• Internet Explorer
• Safari

Operating System

• Windows
• Mac OS X
• [ + ] Linux
• Mobile

Libraries

• jQuery version: from yii2

/*!
 * jQuery JavaScript Library v2.2.4
 * http://jquery.com/
 *
 * Includes Sizzle.js
 * http://sizzlejs.com/
 *
 * Copyright jQuery Foundation and other contributors
 * Released under the MIT license
 * http://jquery.org/license
 *
 * Date: 2016-05-20T17:23Z
 */

• yii2-widget-datepicker version:

Updating kartik-v/yii2-widget-datepicker dev-master (9110ecc => 4a0c0fc)

    Pulling in changes:
      4a0c0fc - Kartik Visweswaran: Merge pull request #149 from syedmuneer/master
      231cad0 - Muneer Ahmed Syed: Finnish translations
      b793655 - Kartik Visweswaran: Update to release v1.4.3
      2f63e7a - Kartik Visweswaran: Merge pull request #127 from dshk/master
      587b813 - korepashka: Merge pull request #1 from korepashka/korepashka-patch-1
      6ca7932 - korepashka: Make form-control class optional for input

Isolating the problem

• [ - ] This bug happens on the widget demos page
  class="form-control ..." still alive on demo (stable only?)
• The bug happens consistently across all tested browsers
• [ - ] This bug happens when using yii2-widget-datepicker without other plugins
  inside detailView
• I can reproduce this bug in a jsbin

[bscheshirwork]

as cherry on the cake
class form-control was removed only from first input

... class="no_submit_filter krajee-datepicker" ...
... class="no_submit_filter form-control" ...

my template (helper for gridView):

    /**
     * Create a JS for DataPicker cancel propose events
     * register this JS before use \components\helpers\ViewHelper::createdAtDatePicker()
     * like this
     * $this->registerJs(\components\helpers\ViewHelper::createdAtDatePickerJS(), \yii\web\View::POS_READY, 'disable-submit-filter-handler');
     * @return string
     */
    public static function createdAtDatePickerJS(){
        return
"
reload = function(){
    $(document).on('beforeFilter', null, false); //disable submit
    $('.no_submit_filter').off('change.yiiGridView keydown.yiiGridView click.yiiGridView', '**'); //disable listener
    window.setTimeout(function(){
        $('.no_submit_filter').on('change.yiiGridView keydown.yiiGridView click.yiiGridView', function(event) {
            event.stopImmediatePropagation(); //add listener to hide event for top-level listener
        });
        $(document).off('beforeFilter', null); //enable submit
    }, 1000);
    $(document).on('click', '.search-submit-circle', function(event){
        $(event.target).closest('.grid-view').yiiGridView('applyFilter'); //add
    });
}
reload();

$('.grid-view-date').each(function( index ) {
    $(document).on('afterFilter', $(this), reload);//add event relate by id, event still work without original element
});
";
    }

    /**
     * Create a config for dataGrid column with createdAt attribute.
     * MUST use with \components\helpers\ViewHelper::createdAtDatePickerJS()
     * Search model can realize two additional attributes - is a `createdAtAfter` and `createdAtBefore`
     * and class into gridView
     *    'options' => ['class' => 'grid-view grid-view-date'],
     * @param ActiveRecord $searchModel
     * @param string $widgetIdPrefix
     * @return array
     */
    public static function createdAtDatePicker(ActiveRecord $searchModel, string $widgetIdPrefix = '')
    {
        $datePickerLayout = <<< HTML
    {input1}
    {separator}
    {input2}
    <span class="input-group-addon kv-date-remove">
        <i class="glyphicon glyphicon-remove"></i>
    </span>
    <span class="input-group-addon search-submit-circle">
        <i class="glyphicon glyphicon-search"></i>
    </span>
HTML;

        return [
            'format' => 'raw',
            'label' => $searchModel->getAttributeLabel('createdAt'),
            'attribute' => 'createdAt',
            'filter' => \kartik\date\DatePicker::widget([
                'id' => $widgetIdPrefix . 'd',
                'type' => \kartik\date\DatePicker::TYPE_RANGE,
                'language' => 'ru',
                'name' => $searchModel->formName() . '[createdAtAfter]',
                'value' => $searchModel->createdAtAfter,
                'name2' => $searchModel->formName() . '[createdAtBefore]',
                'value2' => $searchModel->createdAtBefore,
                'layout' => $datePickerLayout,
                'separator' => '<i class="glyphicon glyphicon-resize-horizontal"></i>',
                'options' => ['placeholder' => Yii::t('main', 'Select date ...'), 'class' => 'no_submit_filter'],
                'options2' => ['placeholder' => Yii::t('main', 'Select date ...'), 'class' => 'no_submit_filter'],
                'pluginOptions' => [
                    'format' => 'yyyy-mm-dd',
                    'todayHighlight' => true,
                    'autoclose' => true,
                ]
            ]),
        ];
    }

[kartik-v]

Note (this is related to the change for #127):

• With the new change, form-control class will still be added by default to the inputs, if you are not adding your own custom CSS classes to the input. So BC will not be broken UNLESS you are adding your own custom CSS classes to the input.
• If you are adding your own custom css class to the input (which seems to be your use case here - 'class'=>'no_submit_filter', then:
  • if you need Bootstrap styled form inputs - you would need to add form-control class along with it e.g. 'class'=>'no_submit_filter form-control'
  • OR if you do not need bootstrap styled form inputs - you can skip adding form-control and style it using your own custom CSS class style needs.

Hope this clears your query on why the change is done (for developers to not be forced with form-control style if they do not need it).

[kartik-v]

I will take in an enhancement request for ensuring this behavior is similar for the second field input as well for DATE RANGE type.

[kartik-v]

Ok... I have thought through this and will come up with a better enhancement to not break BC and yet achieve the above. Will post updates shortly.

[kartik-v]

Resolved via updates to release v1.4.4.

New property addInputCss is available which defaults to form-control and can be changed for custom CSS styles.

[bscheshirwork]

Thank you!