Use Select2 plugin for all drop-down list fields (#6208)

* Fix Select2 widget for profile field "Country"

* Placeholder for profile field "Country"

* Placeholder for user field "Language"

* Add select2-searchInputPlaceholder.js

* Implement new form field Select2

* Use Select2 plugin for all drop-down list fields

---------

Co-authored-by: Lucas Bartholemy <luke-@users.noreply.github.com>

CHANGELOG-DEV.md

@@ -61,3 +61,5 @@ HumHub Changelog
 - Enh #5713: Disabling modules will be done in a background job
 - Enh #6400: Enable nonce in config web header
 - Enh #6407: FileHandlerButtonDropdown - Possibility to have a custom CSS class
+- Enh #5718: Use Select2 plugin for all drop-down list fields
+

protected/humhub/assets/CoreBundleAsset.php

@@ -5,10 +5,8 @@ namespace humhub\assets;
 use humhub\components\assets\WebStaticAssetBundle;
 use humhub\modules\activity\assets\ActivityAsset;
 use humhub\modules\comment\assets\CommentAsset;
-use humhub\modules\content\assets\ContentAsset;
 use humhub\modules\content\assets\ContentContainerAsset;
 use humhub\modules\content\assets\ProseMirrorRichTextAsset;
-use humhub\modules\file\assets\FileAsset;
 use humhub\modules\like\assets\LikeAsset;
 use humhub\modules\live\assets\LiveAsset;
 use humhub\modules\notification\assets\NotificationAsset;
@@ -40,6 +38,7 @@ class CoreBundleAsset extends WebStaticAssetBundle
         JqueryHighlightAsset::class,
         JqueryAutosizeAsset::class,
         Select2Asset::class,
+        Select2SearchInputPlaceholderAsset::class,
         JqueryWidgetAsset::class,
         NProgressAsset::class,
         JqueryNiceScrollAsset::class,

protected/humhub/assets/Select2BootstrapAsset.php

@@ -40,7 +40,8 @@ class Select2BootstrapAsset extends AssetBundle
     * @inheritdoc
     */
     public $depends = [
-        Select2Asset::class
+        Select2Asset::class,
+        Select2SearchInputPlaceholderAsset::class
     ];
 
 }

protected/humhub/assets/Select2SearchInputPlaceholderAsset.php

@@ -0,0 +1,21 @@
+<?php
+/**
+ * @link https://www.humhub.org/
+ * @copyright Copyright (c) 2023 HumHub GmbH & Co. KG
+ * @license https://www.humhub.com/licences
+ */
+
+namespace humhub\assets;
+
+use humhub\components\assets\WebStaticAssetBundle;
+
+/**
+ * Search Input Placeholder plugin for Select2
+ */
+class Select2SearchInputPlaceholderAsset extends WebStaticAssetBundle
+{
+    /**
+     * @inheritdoc
+     */
+    public $js = ['js/select2-searchInputPlaceholder.min.js'];
+}

protected/humhub/compat/HForm.php

@@ -11,13 +11,13 @@ namespace humhub\compat;
 use humhub\modules\content\widgets\richtext\RichText;
 use humhub\modules\content\widgets\richtext\RichTextField;
 use humhub\modules\file\components\FileManager;
+use humhub\modules\ui\form\widgets\ActiveForm;
 use humhub\modules\ui\form\widgets\DatePicker;
 use humhub\modules\ui\form\widgets\MultiSelect;
 use humhub\modules\ui\form\widgets\SortOrderField;
 use Yii;
 use yii\helpers\Html;
 use yii\widgets\ActiveField;
-use yii\widgets\ActiveForm;
 
 /**
  * HForm - Yii1 compatible form generator

protected/humhub/libs/Html.php

@@ -8,13 +8,14 @@
 
 namespace humhub\libs;
 
+use humhub\modules\content\components\ContentContainerActiveRecord;
+use humhub\modules\space\models\Space;
 use humhub\modules\ui\icon\widgets\Icon;
+use humhub\modules\user\models\User;
 use humhub\modules\web\security\helpers\Security;
 use Yii;
 use yii\base\InvalidArgumentException;
-use humhub\modules\content\components\ContentContainerActiveRecord;
-use humhub\modules\user\models\User;
-use humhub\modules\space\models\Space;
+use yii\helpers\ArrayHelper;
 
 /**
  * HTML Helpers
@@ -226,4 +227,49 @@ class Html extends \yii\bootstrap\Html
         return static::endTag('div');
     }
 
+    public static function getDropDownListOptions(array $options = []): array
+    {
+        if (isset($options['minimumResultsForSearch'])) {
+            $minimumResultsForSearch = (int) $options['minimumResultsForSearch'];
+            unset($options['minimumResultsForSearch']);
+        } else {
+            $minimumResultsForSearch = 5;
+        }
+
+        if ($minimumResultsForSearch >= 0 && isset($options['prompt'])) {
+            // Don't consider an empty option like "Please select:" as real option for searching
+            $minimumResultsForSearch++;
+        }
+
+        return ArrayHelper::merge([
+            'data-ui-select2' => true,
+            'data-search-input-placeholder' => Yii::t('base', 'Search...'),
+            'data-minimum-results-for-search' => $minimumResultsForSearch,
+        ], $options);
+    }
+
+    /**
+     * Override Active drop-down list to enable plugin Select2 with
+     *     searchable feature if items >= $options['minimumResultsForSearch'],
+     *     -1 - to never display the search box,
+     *      0 - always display the search box.
+     * @inheritdoc
+     */
+    public static function activeDropDownList($model, $attribute, $items, $options = [])
+    {
+        return parent::activeDropDownList($model, $attribute, $items, self::getDropDownListOptions($options));
+    }
+
+    /**
+     * Override drop-down list to enable plugin Select2 with
+     *     searchable feature if items >= $options['minimumResultsForSearch'],
+     *     -1 - to never display the search box,
+     *      0 - always display the search box.
+     * @inheritdoc
+     */
+    public static function dropDownList($name, $selection = null, $items = [], $options = [])
+    {
+        return parent::dropDownList($name, $selection, $items, self::getDropDownListOptions($options));
+    }
+
 }

protected/humhub/modules/admin/views/setting/basic.php

@@ -38,10 +38,10 @@ AdminAsset::register($this);
 
     <?php $allowedLanguages = Yii::$app->i18n->getAllowedLanguages(); ?>
     <?php if (count($allowedLanguages) > 1) : ?>
-        <?= $languageDropDown = $form->field($model, 'defaultLanguage')->dropDownList($allowedLanguages, ['data-ui-select2' => '']); ?>
+        <?= $languageDropDown = $form->field($model, 'defaultLanguage')->dropDownList($allowedLanguages); ?>
     <?php endif; ?>
-    <?= $form->field($model, 'defaultTimeZone')->dropDownList(TimezoneHelper::generateList(true), ['data-ui-select2' => '', 'disabled' => Yii::$app->settings->isFixed('defaultTimeZone')]); ?>
-    <?= $form->field($model, 'timeZone')->dropDownList(TimezoneHelper::generateList(true), ['data-ui-select2' => '', 'disabled' => Yii::$app->settings->isFixed('timeZone')]); ?>
+    <?= $form->field($model, 'defaultTimeZone')->dropDownList(TimezoneHelper::generateList(true), ['disabled' => Yii::$app->settings->isFixed('defaultTimeZone')]); ?>
+    <?= $form->field($model, 'timeZone')->dropDownList(TimezoneHelper::generateList(true), ['disabled' => Yii::$app->settings->isFixed('timeZone')]); ?>
 
     <?= $form->beginCollapsibleFields(Yii::t('AdminModule.settings', 'Dashboard')); ?>
     <?= $form->field($model, 'tour')->checkbox(); ?>

protected/humhub/modules/ui/form/widgets/ActiveField.php

@@ -8,6 +8,8 @@
 
 namespace humhub\modules\ui\form\widgets;
 
+use humhub\libs\Html;
+
 /**
  * A HumHub enhanced version of [[\yii\bootstrap\ActiveField]].
  *
@@ -80,4 +82,16 @@ class ActiveField extends \yii\bootstrap\ActiveField
 
         return parent::end();
     }
+
+    /**
+     * Override drop-down list to enable plugin Select2 with
+     *     searchable feature if items >= $options['minimumResultsForSearch'],
+     *     -1 - to never display the search box,
+     *      0 - always display the search box.
+     * @inheritdoc
+     */
+    public function dropDownList($items, $options = [])
+    {
+        return parent::dropDownList($items, Html::getDropDownListOptions($options));
+    }
 }

protected/humhub/modules/ui/form/widgets/ActiveForm.php

@@ -88,4 +88,13 @@ class ActiveForm extends \yii\bootstrap\ActiveForm
             Html::endTag('div');
     }
 
+    /**
+     * @inheritdoc
+     * @return ActiveField the created ActiveField object
+     */
+    public function field($model, $attribute, $options = [])
+    {
+        return parent::field($model, $attribute, $options);
+    }
+
 }

protected/humhub/modules/user/assets/UserPickerAsset.php

@@ -9,6 +9,7 @@
 namespace humhub\modules\user\assets;
 
 use humhub\assets\Select2Asset;
+use humhub\assets\Select2SearchInputPlaceholderAsset;
 use humhub\components\assets\AssetBundle;
 
 class UserPickerAsset extends AssetBundle
@@ -29,6 +30,7 @@ class UserPickerAsset extends AssetBundle
      * @inheritdoc
      */
     public $depends = [
-        Select2Asset::class
+        Select2Asset::class,
+        Select2SearchInputPlaceholderAsset::class
     ];
 }

protected/humhub/modules/user/models/fieldtype/CountrySelect.php

@@ -8,9 +8,9 @@
 
 namespace humhub\modules\user\models\fieldtype;
 
+use humhub\libs\Iso3166Codes;
 use humhub\modules\user\models\User;
 use Yii;
-use humhub\libs\Iso3166Codes;
 
 /**
  * ProfileFieldTypeSelect handles numeric profile fields.

protected/humhub/modules/user/models/fieldtype/MarkdownEditor.php

@@ -61,4 +61,14 @@ class MarkdownEditor extends BaseType
         return parent::getFieldRules($rules);
     }
 
+    /**
+     * @inheritdoc
+     */
+    public function getFieldFormDefinition(User $user = null, array $options = []): array
+    {
+        return parent::getFieldFormDefinition($user, array_merge([
+            'rows' => '3'
+        ], $options));
+    }
+
 }

protected/humhub/modules/user/views/account/editSettings.php

@@ -21,8 +21,7 @@ use humhub\modules\user\widgets\UserPickerField;
     <?= $form->field($model, 'language')->dropDownList($languages, ['data-ui-select2' => '']); ?>
 <?php endif; ?>
 
-<?= $form->field($model, 'timeZone')->dropDownList(TimezoneHelper::generateList(true), ['data-ui-select2' => '']); ?>
-
+<?= $form->field($model, 'timeZone')->dropDownList(TimezoneHelper::generateList(true)); ?>
 <?php if ($model->isVisibilityViewable()): ?>
     <?= $form->field($model, 'visibility')->dropDownList($model->getVisibilityOptions(), [
         'disabled' => !$model->isVisibilityEditable()

protected/humhub/widgets/views/selectTimeZoneDropdown.php

@@ -6,8 +6,8 @@ use humhub\widgets\Link;
 <div class="timeZoneInputContainer" style="display:none">
     <?= Html::label(Yii::t('base', 'Time Zone'), $id, ['class' => 'control-label'])?>
     <?php if($model) : ?>
-        <?= Html::activeDropDownList($model, $attribute, $timeZoneItems, ['id' => $id, 'data-action-change' => 'ui.form.elements.timeZoneSelected', 'data-ui-select2' => '', 'style' => 'width:100%']) ?>
+        <?= Html::activeDropDownList($model, $attribute, $timeZoneItems, ['id' => $id, 'data-action-change' => 'ui.form.elements.timeZoneSelected', 'style' => 'width:100%']) ?>
     <?php elseif($name) : ?>
-        <?= Html::dropDownList($name, $value, $timeZoneItems, ['data-action-change' => 'ui.form.elements.timeZoneSelected', 'data-ui-select2' => '', 'style' => 'width:100%']) ?>
+        <?= Html::dropDownList($name, $value, $timeZoneItems, ['data-action-change' => 'ui.form.elements.timeZoneSelected', 'style' => 'width:100%']) ?>
     <?php endif; ?>
 </div>

static/js/select2-searchInputPlaceholder.js

@@ -0,0 +1,23 @@
+(function($) {
+
+    var Defaults = $.fn.select2.amd.require('select2/defaults');
+
+    $.extend(Defaults.defaults, {
+        searchInputPlaceholder: ''
+    });
+
+    var SearchDropdown = $.fn.select2.amd.require('select2/dropdown/search');
+
+    var _renderSearchDropdown = SearchDropdown.prototype.render;
+
+    SearchDropdown.prototype.render = function(decorated) {
+
+        // invoke parent method
+        var $rendered = _renderSearchDropdown.apply(this, Array.prototype.slice.apply(arguments));
+
+        this.$search.attr('placeholder', this.options.get('searchInputPlaceholder'));
+
+        return $rendered;
+    };
+
+})(window.jQuery);

static/js/select2-searchInputPlaceholder.min.js

@@ -0,0 +1 @@
+(function($){var Defaults=$.fn.select2.amd.require("select2/defaults");$.extend(Defaults.defaults,{searchInputPlaceholder:""});var SearchDropdown=$.fn.select2.amd.require("select2/dropdown/search");var _renderSearchDropdown=SearchDropdown.prototype.render;SearchDropdown.prototype.render=function(decorated){var $rendered=_renderSearchDropdown.apply(this,Array.prototype.slice.apply(arguments));this.$search.attr("placeholder",this.options.get("searchInputPlaceholder"));return $rendered}})(window.jQuery);