From 18348e2cb3ad3393fe68b64a6f395ce34c5e15fe Mon Sep 17 00:00:00 2001
From: morning-star <26325820+Sight-wcg@users.noreply.github.com>
Date: Fri, 31 May 2024 22:26:43 +0800
Subject: [PATCH] =?UTF-8?q?refactor(form-select):=20=E5=BC=80=E5=90=AF=20l?=
 =?UTF-8?q?ay-creatable=20=E6=97=B6=EF=BC=8C=E6=96=B0=E5=88=9B=E5=BB=BA?=
 =?UTF-8?q?=E7=9A=84=20option=20=E5=85=83=E7=B4=A0=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?=E5=9C=A8=E9=A1=B6=E9=83=A8=20(#1950)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor(form-select): 开启 lay-creatable 时，新创建的 option 元素显示在顶部

* refactor: 优化键盘切换选中元素效果

1. fix: 开启 creatable 后方向键切换选中元素偶现异常
2. feat: 支持循环切换选中元素

* refactor: 改进选中项索引查找
---
 src/modules/form.js | 71 ++++++++++++++++-----------------------------
 1 file changed, 25 insertions(+), 46 deletions(-)

diff --git a/src/modules/form.js b/src/modules/form.js
index 3f8586bc..2e3074e9 100644
--- a/src/modules/form.js
+++ b/src/modules/form.js
@@ -534,50 +534,27 @@ layui.define(['lay', 'layer', 'util'], function(exports){
             }
             
             // 标注 dd 的选中状态
-            var setThisDd = function(prevNext, thisElem1){
-              var nearDd, cacheNearElem
+            var setThisDd = function(prevNext){
               e.preventDefault();
+              var allDisplayedElem = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')');
+              if(!allDisplayedElem.length) return;
+              var firstIndex = 0;
+              var lastIndex = allDisplayedElem.length - 1;
+              var selectedIndex = -1;
 
-              // 得到当前队列元素  
-              var thisElem = function(){
-                var thisDd = dl.children('dd.'+ THIS);
-                
-                // 如果是搜索状态，且按 Down 键，且当前可视 dd 元素在选中元素之前，
-                // 则将当前可视 dd 元素的上一个元素作为虚拟的当前选中元素，以保证递归不中断
-                if(dl.children('dd.'+  HIDE)[0] && prevNext === 'next'){
-                  var showDd = dl.children('dd:not(.'+ HIDE +',.'+ DISABLED +')')
-                  ,firstIndex = showDd.eq(0).index();
-                  if(firstIndex >=0 && firstIndex < thisDd.index() && !showDd.hasClass(THIS)){
-                    return showDd.eq(0).prev()[0] ? showDd.eq(0).prev() : dl.children(':last');
-                  }
+              layui.each(allDisplayedElem, function(index, el){
+                if($(el).hasClass(THIS)){
+                  selectedIndex = index;
+                  return true;
                 }
+              })
+    
+              var nextIndex = prevNext === 'prev'
+                ? (selectedIndex - 1 < firstIndex ? lastIndex : selectedIndex - 1)
+                : (selectedIndex + 1 > lastIndex ? firstIndex : selectedIndex + 1)
 
-                if(thisElem1 && thisElem1[0]){
-                  return thisElem1;
-                }
-                if(nearElem && nearElem[0]){
-                  return nearElem;
-                }
-       
-                return thisDd;
-                // return dds.eq(index);
-              }();
-              
-              cacheNearElem = thisElem[prevNext](); // 当前元素的附近元素
-              nearDd =  thisElem[prevNext]('dd:not(.'+ HIDE +')'); // 当前可视元素的 dd 元素
-
-              // 如果附近的元素不存在，则停止执行，并清空 nearElem
-              if(!cacheNearElem[0]) return nearElem = null;
-              
-              // 记录附近的元素，让其成为下一个当前元素
-              nearElem = thisElem[prevNext]();
-
-              // 如果附近不是 dd ，或者附近的 dd 元素是禁用状态，则进入递归查找
-              if((!nearDd[0] || nearDd.hasClass(DISABLED)) && nearElem[0]){
-                return setThisDd(prevNext, nearElem);
-              }
-              
-              nearDd.addClass(THIS).siblings().removeClass(THIS); // 标注样式
+              var selectedElem = allDisplayedElem.eq(nextIndex);
+              selectedElem.addClass(THIS).siblings().removeClass(THIS); // 标注样式
               followScroll(); // 定位滚动条
             };
             
@@ -658,9 +635,11 @@ layui.define(['lay', 'layer', 'util'], function(exports){
                   if(createOptionElem[0]){
                     createOptionElem.attr('lay-value', value).html(util.escape(value));
                   }else{
-                    var ddElem = $('<dd>');
-                    ddElem.addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
-                    dl.append(ddElem);
+                    // 临时显示在顶部
+                    var ddElem = $('<dd>').addClass(CREATE_OPTION).attr('lay-value', value).html(util.escape(value));
+                    var firstOptionELem = dl.children().eq(0);
+                    var hasTips = firstOptionELem.hasClass('layui-select-tips');
+                    firstOptionELem[hasTips ? 'after' : 'before'](ddElem);
                   }
                 }
               }else{
@@ -719,10 +698,10 @@ layui.define(['lay', 'layer', 'util'], function(exports){
               othis.addClass(THIS);
             }
 
+            // 将新增的 option 元素添加到末尾
             if(isCreatable && othis.hasClass(CREATE_OPTION)){
-              othis.removeClass(CREATE_OPTION);
-              var optionElem = $('<option>');
-              optionElem.attr('value', value).text(othis.text());
+              dl.append(othis.removeClass(CREATE_OPTION));
+              var optionElem = $('<option>').attr('value', value).text(othis.text());
               select.append(optionElem);
             }