- remove ref to select list item

Author: Edward Xiao

lib/components/Select.js

@@ -284,11 +284,6 @@ var component = function component(_ref) {
   var $elWrapper = $wrapper;
   var $elItemsWrapper = $itemsWrapper;
   var $itemsRef = [];
-
-  for (var i = 0; i < optionList.length; i += 1) {
-    $itemsRef.push(useRef(null));
-  }
-
   var handleOnBlur = useCallback(function (e) {
     if (onBlur) {
       check();
@@ -397,53 +392,51 @@ var component = function component(_ref) {
   var scroll = useCallback(function () {
     var direction = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : undefined;
 
-    if ($elItemsWrapper === null) {
-      return;
-    }
-
-    var containerHeight = $elItemsWrapper.current.offsetHeight;
-    var containerScrollTop = $elItemsWrapper.current.scrollTop;
+    if ($itemsWrapper && $itemsWrapper.current && $itemsWrapper.current.children) {
+      var $children = $itemsWrapper.current.children;
 
-    if (!globalVariableCurrentFocus || !$itemsRef[globalVariableCurrentFocus]) {
-      return;
-    }
+      if ($elItemsWrapper === null) {
+        return;
+      }
 
-    var $elOptionItem = $itemsRef[globalVariableCurrentFocus];
+      var containerHeight = $elItemsWrapper.current.offsetHeight;
+      var containerScrollTop = $elItemsWrapper.current.scrollTop;
 
-    if ($elOptionItem === null) {
-      return;
-    }
+      if (!globalVariableCurrentFocus || !$children[globalVariableCurrentFocus]) {
+        return;
+      }
 
-    var itemHeight = $elOptionItem.current.offsetHeight;
+      var itemHeight = $children[globalVariableCurrentFocus].offsetHeight;
 
-    if (direction) {
-      if (direction === 'down') {
-        var bound = containerScrollTop + containerHeight;
-        var heightItems = globalVariableCurrentFocus * itemHeight;
-        var heightContainer = bound - itemHeight;
+      if (direction) {
+        if (direction === 'down') {
+          var bound = containerScrollTop + containerHeight;
+          var heightItems = globalVariableCurrentFocus * itemHeight;
+          var heightContainer = bound - itemHeight;
 
-        if (heightItems >= heightContainer) {
-          var offset = Math.abs(heightItems - heightContainer - itemHeight);
+          if (heightItems >= heightContainer) {
+            var offset = Math.abs(heightItems - heightContainer - itemHeight);
 
-          if (offset >= 0 && !globalVariableIsCorrected) {
-            $elItemsWrapper.current.scrollTop = containerScrollTop + itemHeight - offset;
-            globalVariableIsCorrected = true;
-          } else {
-            $elItemsWrapper.current.scrollTop = containerScrollTop + itemHeight;
+            if (offset >= 0 && !globalVariableIsCorrected) {
+              $elItemsWrapper.current.scrollTop = containerScrollTop + itemHeight - offset;
+              globalVariableIsCorrected = true;
+            } else {
+              $elItemsWrapper.current.scrollTop = containerScrollTop + itemHeight;
+            }
           }
         }
-      }
 
-      if (direction === 'up') {
-        globalVariableIsCorrected = false;
+        if (direction === 'up') {
+          globalVariableIsCorrected = false;
 
-        if (globalVariableCurrentFocus * itemHeight <= containerScrollTop) {
-          $elItemsWrapper.current.scrollTop = globalVariableCurrentFocus * itemHeight;
+          if (globalVariableCurrentFocus * itemHeight <= containerScrollTop) {
+            $elItemsWrapper.current.scrollTop = globalVariableCurrentFocus * itemHeight;
+          }
         }
+      } else {
+        globalVariableIsCorrected = false;
+        $elItemsWrapper.current.scrollTop = globalVariableCurrentFocus * itemHeight;
       }
-    } else {
-      globalVariableIsCorrected = false;
-      $elItemsWrapper.current.scrollTop = globalVariableCurrentFocus * itemHeight;
     }
   }, []);
   var handleOnItemClick = useCallback(function (v, e) {
@@ -460,29 +453,21 @@ var component = function component(_ref) {
     removeActive();
   }, []);
   var addActive = useCallback(function () {
-    if (!$itemsRef) return;
-    removeActive();
-    if (globalVariableCurrentFocus === null) return;
-    if (globalVariableCurrentFocus >= $itemsRef.length) globalVariableCurrentFocus = 0;
-    if (globalVariableCurrentFocus < 0) globalVariableCurrentFocus = $itemsRef.length - 1;
-    var $node = $itemsRef[globalVariableCurrentFocus];
-
-    if (!$node) {
-      return;
+    if ($itemsWrapper && $itemsWrapper.current && $itemsWrapper.current.children) {
+      var $children = $itemsWrapper.current.children;
+      removeActive();
+      if (globalVariableCurrentFocus === null) return;
+      if (globalVariableCurrentFocus >= $children.length) globalVariableCurrentFocus = 0;
+      if (globalVariableCurrentFocus < 0) globalVariableCurrentFocus = $children.length - 1;
+      $children[globalVariableCurrentFocus].className += " ".concat(reactInputsValidationCss["".concat(TYPE, "__hover-active")]);
     }
-
-    $itemsRef[globalVariableCurrentFocus].current.className += " ".concat(reactInputsValidationCss["".concat(TYPE, "__hover-active")]);
   }, []);
   var removeActive = useCallback(function () {
-    for (var _i2 = 0; _i2 < $itemsRef.length; _i2 += 1) {
-      var $node = $itemsRef[_i2];
-
-      if (!$node) {
-        break;
-      }
+    if ($itemsWrapper && $itemsWrapper.current && $itemsWrapper.current.children) {
+      var $children = $itemsWrapper.current.children;
 
-      if ($node && $node.current) {
-        $node.current.className = $node.current.className.replace(reactInputsValidationCss["".concat(TYPE, "__hover-active")], '');
+      for (var i = 0; i < $children.length; i += 1) {
+        $children[i].className = $children[i].className.replace(reactInputsValidationCss["".concat(TYPE, "__hover-active")], '');
       }
     }
   }, []);
@@ -533,10 +518,14 @@ var component = function component(_ref) {
         addActive();
       } else if (keyCode === keyCodeEnter) {
         if (globalVariableCurrentFocus > -1) {
-          if ($itemsRef[globalVariableCurrentFocus]) {
-            $itemsRef[globalVariableCurrentFocus].current.click();
-          } else {
-            return;
+          if ($itemsWrapper && $itemsWrapper.current && $itemsWrapper.current.children) {
+            var $children = $itemsWrapper.current.children;
+
+            if ($children[globalVariableCurrentFocus]) {
+              $children[globalVariableCurrentFocus].click();
+            } else {
+              return;
+            }
           }
         }
       }
@@ -611,7 +600,7 @@ var component = function component(_ref) {
   useEffect(function () {
     if (show) {
       globalVariableCurrentFocus = globalVariableCurrentFocus === null ? getIndex(optionList, String(value)) : globalVariableCurrentFocus;
-      $itemsRef[globalVariableCurrentFocus].current.focus();
+      $itemsRef[globalVariableCurrentFocus] && $itemsRef[globalVariableCurrentFocus].current.focus();
     } else {
       $elButton.current.focus();
     }
@@ -649,7 +638,6 @@ var component = function component(_ref) {
         key: k,
         index: k,
         id: "react-inputs-validation__select_option-".concat(i.id),
-        refItem: $itemsRef[k],
         className: String(i.id) === String(value) ? "".concat(selectOptionListItemClass, " ").concat(reactInputsValidationCss['active']) : "".concat(selectOptionListItemClass),
         item: i,
         customStyleOptionListItem: customStyleOptionListItem,
@@ -703,8 +691,6 @@ var component = function component(_ref) {
 var Option = memo(function (_ref2) {
   var _ref2$index = _ref2.index,
       index = _ref2$index === void 0 ? -1 : _ref2$index,
-      _ref2$refItem = _ref2.refItem,
-      refItem = _ref2$refItem === void 0 ? null : _ref2$refItem,
       _ref2$id = _ref2.id,
       id = _ref2$id === void 0 ? '' : _ref2$id,
       _ref2$className = _ref2.className,
@@ -738,7 +724,6 @@ var Option = memo(function (_ref2) {
   }, []);
   return React.createElement("a", {
     id: id,
-    ref: refItem,
     onMouseOver: handleOnMouseOver,
     onMouseMove: handleOnMouseMove,
     onMouseOut: handleOnMouseOut,