!2517 feat(#I4U3DX): make the item visible in dropdown menu on Select component

* style: 更新样式
* feat: 增加脚本滚动下拉框
* doc: 代码格式化

src/BootstrapBlazor.Shared/Samples/Selects.razor.cs

@@ -39,63 +39,63 @@ public sealed partial class Selects
     /// </summary>
     private IEnumerable<SelectedItem> Items { get; set; } = new[]
     {
-            new SelectedItem ("Beijing", "北京"),
-            new SelectedItem ("Shanghai", "上海") { Active = true },
-        };
+        new SelectedItem ("Beijing", "北京"),
+        new SelectedItem ("Shanghai", "上海") { Active = true },
+    };
 
     /// <summary>
     /// 获得 默认数据集合
     /// </summary>
     private readonly IEnumerable<SelectedItem> Items4 = new[]
     {
-            new SelectedItem ("Beijing", "北京") { IsDisabled = true},
-            new SelectedItem ("Shanghai", "上海") { Active = true },
-            new SelectedItem ("Guangzhou", "广州")
-        };
+        new SelectedItem ("Beijing", "北京") { IsDisabled = true},
+        new SelectedItem ("Shanghai", "上海") { Active = true },
+        new SelectedItem ("Guangzhou", "广州")
+    };
 
     /// <summary>
     /// 获得 默认数据集合
     /// </summary>
     private readonly IEnumerable<SelectedItem> StringItems = new[]
     {
-            new SelectedItem ("1", "1"),
-            new SelectedItem ("12", "12"),
-            new SelectedItem ("123", "123"),
-            new SelectedItem ("1234", "1234"),
-            new SelectedItem ("a", "a"),
-            new SelectedItem ("ab", "ab"),
-            new SelectedItem ("abc", "abc"),
-            new SelectedItem ("abcd", "abcd"),
-            new SelectedItem ("abcde", "abcde")
-        };
+        new SelectedItem ("1", "1"),
+        new SelectedItem ("12", "12"),
+        new SelectedItem ("123", "123"),
+        new SelectedItem ("1234", "1234"),
+        new SelectedItem ("a", "a"),
+        new SelectedItem ("ab", "ab"),
+        new SelectedItem ("abc", "abc"),
+        new SelectedItem ("abcd", "abcd"),
+        new SelectedItem ("abcde", "abcde")
+    };
 
     /// <summary>
     /// 获得 默认数据集合
     /// </summary>
     private readonly IEnumerable<SelectedItem> Items3 = new SelectedItem[]
     {
-            new SelectedItem ("", "请选择 ..."),
-            new SelectedItem ("Beijing", "北京") { Active = true },
-            new SelectedItem ("Shanghai", "上海"),
-            new SelectedItem ("Hangzhou", "杭州")
+        new SelectedItem ("", "请选择 ..."),
+        new SelectedItem ("Beijing", "北京") { Active = true },
+        new SelectedItem ("Shanghai", "上海"),
+        new SelectedItem ("Hangzhou", "杭州")
     };
 
     private readonly IEnumerable<SelectedItem> GroupItems = new SelectedItem[]
     {
-            new SelectedItem ("Jilin", "吉林") { GroupName = "东北"},
-            new SelectedItem ("Liaoning", "辽宁") {GroupName = "东北", Active = true },
-            new SelectedItem ("Beijing", "北京") { GroupName = "华中"},
-            new SelectedItem ("Shijiazhuang", "石家庄") { GroupName = "华中"},
-            new SelectedItem ("Shanghai", "上海") {GroupName = "华东", Active = true },
-            new SelectedItem ("Ningbo", "宁波") {GroupName = "华东", Active = true }
+        new SelectedItem ("Jilin", "吉林") { GroupName = "东北"},
+        new SelectedItem ("Liaoning", "辽宁") {GroupName = "东北", Active = true },
+        new SelectedItem ("Beijing", "北京") { GroupName = "华中"},
+        new SelectedItem ("Shijiazhuang", "石家庄") { GroupName = "华中"},
+        new SelectedItem ("Shanghai", "上海") {GroupName = "华东", Active = true },
+        new SelectedItem ("Ningbo", "宁波") {GroupName = "华东", Active = true }
     };
 
     private Guid CurrentGuid { get; set; }
 
     private readonly IEnumerable<SelectedItem> GuidItems = new SelectedItem[]
     {
-            new SelectedItem(Guid.NewGuid().ToString(), "Guid1"),
-            new SelectedItem(Guid.NewGuid().ToString(), "Guid2")
+        new SelectedItem(Guid.NewGuid().ToString(), "Guid1"),
+        new SelectedItem(Guid.NewGuid().ToString(), "Guid2")
     };
 
     /// <summary>
@@ -121,16 +121,16 @@ public sealed partial class Selects
         {
             Items2 = new SelectedItem[]
             {
-                    new SelectedItem("1","朝阳区") { Active = true},
-                    new SelectedItem("2","海淀区"),
+                new SelectedItem("1","朝阳区") { Active = true},
+                new SelectedItem("2","海淀区"),
             };
         }
         else if (item.Value == "Shanghai")
         {
             Items2 = new SelectedItem[]
             {
-                    new SelectedItem("1","静安区"),
-                    new SelectedItem("2","黄浦区") { Active = true } ,
+                new SelectedItem("1","静安区"),
+                new SelectedItem("2","黄浦区") { Active = true } ,
             };
         }
         else
@@ -150,9 +150,9 @@ public sealed partial class Selects
 
     private IEnumerable<SelectedItem> NullableIntItems { get; set; } = new SelectedItem[]
     {
-            new SelectedItem() { Text = "Item 1", Value = "" },
-            new SelectedItem() { Text = "Item 2", Value = "2" },
-            new SelectedItem() { Text = "Item 3", Value = "3" }
+        new SelectedItem() { Text = "Item 1", Value = "" },
+        new SelectedItem() { Text = "Item 2", Value = "2" },
+        new SelectedItem() { Text = "Item 3", Value = "3" }
     };
 
     private int? SelectedIntItem { get; set; }
@@ -164,9 +164,9 @@ public sealed partial class Selects
 
     private IEnumerable<SelectedItem> NullableBoolItems { get; set; } = new SelectedItem[]
     {
-            new SelectedItem() { Text = "空值", Value = "" },
-            new SelectedItem() { Text = "True 值", Value = "true" },
-            new SelectedItem() { Text = "False 值", Value = "false" }
+        new SelectedItem() { Text = "空值", Value = "" },
+        new SelectedItem() { Text = "True 值", Value = "true" },
+        new SelectedItem() { Text = "False 值", Value = "false" }
     };
 
     private bool? SelectedBoolItem { get; set; }
@@ -191,18 +191,18 @@ public sealed partial class Selects
     /// <returns></returns>
     private IEnumerable<EventItem> GetEvents() => new EventItem[]
     {
-            new EventItem()
-            {
-                Name = "OnSelectedItemChanged",
-                Description = Localizer["OnSelectedItemChanged"],
-                Type = "Func<SelectedItem, Task>"
-            },
-            new EventItem()
-            {
-                Name = "OnBeforeSelectedItemChange",
-                Description = Localizer["OnBeforeSelectedItemChange"],
-                Type = "Func<SelectedItem, Task<bool>>"
-            }
+        new EventItem()
+        {
+            Name = "OnSelectedItemChanged",
+            Description = Localizer["OnSelectedItemChanged"],
+            Type = "Func<SelectedItem, Task>"
+        },
+        new EventItem()
+        {
+            Name = "OnBeforeSelectedItemChange",
+            Description = Localizer["OnBeforeSelectedItemChange"],
+            Type = "Func<SelectedItem, Task<bool>>"
+        }
     };
 
     /// <summary>
@@ -211,90 +211,90 @@ public sealed partial class Selects
     /// <returns></returns>
     private IEnumerable<AttributeItem> GetAttributes() => new AttributeItem[]
     {
-            // TODO: 移动到数据库中
-            new AttributeItem() {
-                Name = "ShowLabel",
-                Description = Localizer["ShowLabel"],
-                Type = "bool",
-                ValueList = "true|false",
-                DefaultValue = "true"
-            },
-            new AttributeItem() {
-                Name = "ShowSearch",
-                Description = Localizer["ShowSearch"],
-                Type = "bool",
-                ValueList = "true|false",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "DisplayText",
-                Description = Localizer["DisplayText"],
-                Type = "string",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "Class",
-                Description = Localizer["Class"],
-                Type = "string",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "Color",
-                Description = Localizer["Color"],
-                Type = "Color",
-                ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
-                DefaultValue = "Primary"
-            },
-            new AttributeItem() {
-                Name = "IsDisabled",
-                Description = Localizer["IsDisabled"],
-                Type = "boolean",
-                ValueList = "true / false",
-                DefaultValue = "false"
-            },
-            new AttributeItem() {
-                Name = "Items",
-                Description = Localizer["Items"],
-                Type = "IEnumerable<SelectedItem>",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "SelectItems",
-                Description = Localizer["SelectItems"],
-                Type = "RenderFragment",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "ItemTemplate",
-                Description = Localizer["ItemTemplate"],
-                Type = "RenderFragment<SelectedItem>",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "ChildContent",
-                Description = Localizer["ChildContent"],
-                Type = "RenderFragment",
-                ValueList = " — ",
-                DefaultValue = " — "
-            },
-            new AttributeItem() {
-                Name = "Category",
-                Description = Localizer["Category"],
-                Type = "SwalCategory",
-                ValueList = " — ",
-                DefaultValue = " SwalCategory.Information "
-            },
-            new AttributeItem() {
-                Name = "Content",
-                Description = Localizer["Content"],
-                Type = "string?",
-                ValueList = " — ",
-                DefaultValue = Localizer["ContentDefaultValue"]!
-            }
+        // TODO: 移动到数据库中
+        new AttributeItem() {
+            Name = "ShowLabel",
+            Description = Localizer["ShowLabel"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "true"
+        },
+        new AttributeItem() {
+            Name = "ShowSearch",
+            Description = Localizer["ShowSearch"],
+            Type = "bool",
+            ValueList = "true|false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "DisplayText",
+            Description = Localizer["DisplayText"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Class",
+            Description = Localizer["Class"],
+            Type = "string",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Color",
+            Description = Localizer["Color"],
+            Type = "Color",
+            ValueList = "Primary / Secondary / Success / Danger / Warning / Info / Dark",
+            DefaultValue = "Primary"
+        },
+        new AttributeItem() {
+            Name = "IsDisabled",
+            Description = Localizer["IsDisabled"],
+            Type = "boolean",
+            ValueList = "true / false",
+            DefaultValue = "false"
+        },
+        new AttributeItem() {
+            Name = "Items",
+            Description = Localizer["Items"],
+            Type = "IEnumerable<SelectedItem>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "SelectItems",
+            Description = Localizer["SelectItems"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "ItemTemplate",
+            Description = Localizer["ItemTemplate"],
+            Type = "RenderFragment<SelectedItem>",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "ChildContent",
+            Description = Localizer["ChildContent"],
+            Type = "RenderFragment",
+            ValueList = " — ",
+            DefaultValue = " — "
+        },
+        new AttributeItem() {
+            Name = "Category",
+            Description = Localizer["Category"],
+            Type = "SwalCategory",
+            ValueList = " — ",
+            DefaultValue = " SwalCategory.Information "
+        },
+        new AttributeItem() {
+            Name = "Content",
+            Description = Localizer["Content"],
+            Type = "string?",
+            ValueList = " — ",
+            DefaultValue = Localizer["ContentDefaultValue"]!
+        }
     };
 }

src/BootstrapBlazor/Components/Select/Select.css

@@ -111,6 +111,12 @@
     margin-top: 2px;
 }
 
+.dropdown-item.preActive {
+    color: #fff;
+    text-decoration: none;
+    background-color: #498ff7;
+}
+
 .disabled .form-select {
     background-color: #f5f7fa;
     border-color: #e4e7ed;

src/BootstrapBlazor/Components/Select/Select.js

@@ -4,6 +4,27 @@
             var $el = $(el);
             var $search = $el.find('input.search-text');
 
+            var bb_scrollToActive = function ($el) {
+                var $menu = $el.find('.dropdown-menu');
+                var $activeItem = $menu.children('.preActive');
+                if ($activeItem.length === 0) {
+                    $activeItem = $menu.children('.active');
+                    $activeItem.addClass('preActive');
+                }
+                if ($activeItem.length === 1) {
+                    var height = $menu.innerHeight();
+                    var itemHeight = $activeItem.outerHeight();
+                    var index = $activeItem.index() + 1;
+                    var margin = 11 + itemHeight * index - height;
+                    if (margin >= 0) {
+                        $menu.scrollTop(margin);
+                    }
+                    else {
+                        $menu.scrollTop(0);
+                    }
+                }
+            };
+
             $el.on('show.bs.dropdown', function (e) {
                 if ($el.find('.form-select').prop('disabled')) {
                     e.preventDefault();
@@ -14,6 +35,7 @@
                 if ($search.length > 0) {
                     $search.focus();
                 }
+                bb_scrollToActive($(this));
             });
 
             $el.on('keyup', function (e) {
@@ -22,25 +44,27 @@
                     var $items = $this.find('.dropdown-menu.show > .dropdown-item').not('.disabled, .search');
 
                     var $activeItem = $items.filter(function (index, ele) {
-                        return $(ele).hasClass('active');
+                        return $(ele).hasClass('preActive');
                     });
 
                     if ($items.length > 1) {
                         if (e.key === "ArrowUp") {
-                            $activeItem.removeClass('active');
+                            $activeItem.removeClass('preActive');
                             var $prev = $activeItem.prev().not('.disabled, .search');
                             if ($prev.length === 0) {
                                 $prev = $items.last();
                             }
-                            $prev.addClass('active');
+                            $prev.addClass('preActive');
+                            bb_scrollToActive($this);
                         }
                         else if (e.key === "ArrowDown") {
-                            $activeItem.removeClass('active');
+                            $activeItem.removeClass('preActive');
                             var $next = $activeItem.next().not('.disabled, .search');
                             if ($next.length === 0) {
                                 $next = $items.first();
                             }
-                            $next.addClass('active');
+                            $next.addClass('preActive');
+                            bb_scrollToActive($this);
                         }
                     }