labsense-ui-kit 1.3.63 → 1.3.64

package/dist/index.js

@@ -8727,7 +8727,7 @@ var LabelText$1 = styled__default.div(_templateObject5$5 || (_templateObject5$5
   return $disabled ? theme.vms.text.medium : $color || theme.vms.text.medium;
 });
 var NoOptions = styled__default(Span)(_templateObject6$5 || (_templateObject6$5 = _taggedTemplateLiteralLoose(["\n  display: flex;\n  align-items: center;\n  height: 100%;\n  padding: 12px;\n  font-size: 14px;\n  font-weight: 400;\n"])));
-var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: absolute;\n  z-index: 2;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
+var DropdownMenu$1 = styled__default.div(_templateObject7$3 || (_templateObject7$3 = _taggedTemplateLiteralLoose(["\n  height: auto;\n  max-height: 170px;\n  border: ", ";\n  border-radius: ", ";\n  min-width: 100%;\n  width: ", ";\n  background: ", ";\n  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);\n  overflow: hidden;\n  position: absolute;\n  z-index: 2;\n  outline: none;\n  ", "\n  ", "\n\n  ", "\n"])), function (_ref24) {
   var theme = _ref24.theme;
   return "1px solid " + theme.vms.border.light;
 }, function (_ref25) {
@@ -8850,6 +8850,8 @@ var SelectOption = function SelectOption(_ref37) {
     highlightedIndex = _useState4[0],
     setHighlightedIndex = _useState4[1];
   var optionsWrapperRef = React.useRef(null);
+  var dropdownMenuRef = React.useRef(null);
+  var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
   React.useEffect(function () {
     if (loading) {
       setIsOpen(false);
@@ -8857,7 +8859,15 @@ var SelectOption = function SelectOption(_ref37) {
       setHighlightedIndex(-1);
     }
   }, [loading]);
-  var showSearchBox = searchBox && (options.length > 5 || allowCustomValue);
+  React.useEffect(function () {
+    if (isOpen) {
+      if (showSearchBox && searchInputRef.current) {
+        searchInputRef.current.focus();
+      } else if (dropdownMenuRef.current) {
+        dropdownMenuRef.current.focus();
+      }
+    }
+  }, [isOpen, showSearchBox]);
   var toggleDropdown = function toggleDropdown() {
     var refToUse = (positionRef === null || positionRef === void 0 ? void 0 : positionRef.current) || dropdownRef.current;
     if (refToUse) {
@@ -8963,13 +8973,14 @@ var SelectOption = function SelectOption(_ref37) {
       case 'ArrowDown':
         e.preventDefault();
         setHighlightedIndex(function (prev) {
-          return prev < totalOptions - 1 ? prev + 1 : prev;
+          var newIndex = prev < totalOptions - 1 ? prev + 1 : prev;
+          return prev === -1 ? 0 : newIndex;
         });
         break;
       case 'ArrowUp':
         e.preventDefault();
         setHighlightedIndex(function (prev) {
-          return prev > 0 ? prev - 1 : -1;
+          return prev > 0 ? prev - 1 : 0;
         });
         break;
       case 'Enter':
@@ -9043,6 +9054,9 @@ var SelectOption = function SelectOption(_ref37) {
     size: 7,
     color: color || themeColors.vms.text.medium
   })), isOpen && React__default.createElement(DropdownMenu$1, {
+    ref: dropdownMenuRef,
+    tabIndex: -1,
+    onKeyDown: !showSearchBox ? handleKeyDown : undefined,
     "$width": width,
     "$menuBackground": menuBackground,
     "$optionsBorderRadius": optionsBorderRadius,