funda-ui 4.7.755 → 4.7.770

package/Accordion/index.js

@@ -332,7 +332,7 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
-var _excluded = ["heightObserver", "index", "animSpeed", "easing", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
+var _excluded = ["heightObserver", "index", "animSpeed", "easing", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "forceExpanded", "children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -363,6 +363,7 @@ var AccordionItem = function AccordionItem(props) {
     onTransitionEnd = props.onTransitionEnd,
     onItemCollapse = props.onItemCollapse,
     controlledExpanded = props.isExpanded,
+    forceExpanded = props.forceExpanded,
     children = props.children,
     attributes = _objectWithoutProperties(props, _excluded);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
@@ -371,9 +372,12 @@ var AccordionItem = function AccordionItem(props) {
     setInternalExpanded = _useState2[1];
   var isFirstRender = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(true);
   var initialHeightSet = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  var hasUserInteracted = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
 
-  // Use controlled or uncontrolled expanded state
-  var isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+  // Use forceExpanded if provided and user hasn't interacted, otherwise use controlled or uncontrolled expanded state
+  // forceExpanded takes priority over isExpanded from parent, but only before user interaction
+  var actualExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+  var isExpanded = forceExpanded !== undefined && !hasUserInteracted.current ? forceExpanded : actualExpanded;
   var observer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var contentWrapperRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var contentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -382,6 +386,9 @@ var AccordionItem = function AccordionItem(props) {
   var handleToggle = function handleToggle(e) {
     e.preventDefault();
     e.stopPropagation();
+
+    // Mark that user has interacted, so forceExpanded will be ignored
+    hasUserInteracted.current = true;
     if (controlledExpanded === undefined) {
       setInternalExpanded(function (prev) {
         return !prev;
@@ -399,6 +406,13 @@ var AccordionItem = function AccordionItem(props) {
       overflow: 'hidden'
     };
   };
+
+  // Reset user interaction flag when forceExpanded changes externally
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (forceExpanded !== undefined) {
+      hasUserInteracted.current = false;
+    }
+  }, [forceExpanded]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (triggerRef.current && typeof onItemCollapse === 'function') {
       if (isFirstRender.current) {

package/LiveSearch/index.js

@@ -3853,30 +3853,41 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
       if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
       var options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide)'));
       // Avoid selecting options that are disabled
-      options = options.filter(function (options) {
-        return !options.classList.contains('disabled');
+      options = options.filter(function (option) {
+        return !option.classList.contains('disabled');
       });
+      if (!options.length) return;
+      var activeNode = listRef.current.querySelector('.list-group-item.active');
       var currentIndex = options.findIndex(function (e) {
-        return e === listRef.current.querySelector('.list-group-item.active');
+        return e === activeNode;
       });
 
       // get the next element in the list, "%" will loop around to 0
-      var nextIndex;
+      var nextIndex = -1;
       if (type === 'increase') {
-        nextIndex = currentIndex + 1 % options.length;
+        // ArrowDown
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
       } else {
-        nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+        // ArrowUp
+        nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
       }
 
       //only one
       if (options.length === 1) nextIndex = 0;
-      if (!isNaN(nextIndex)) {
-        options.forEach(function (node, index) {
+      if (nextIndex >= 0 && nextIndex < options.length) {
+        options.forEach(function (node) {
           node === null || node === void 0 ? void 0 : node.classList.remove('active');
         });
         var targetOption = options[nextIndex];
         if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
           targetOption.classList.add('active');
+
+          // Ensure the focused option is visible in the scroll area
+          if (typeof targetOption.scrollIntoView === 'function') {
+            targetOption.scrollIntoView({
+              block: 'nearest'
+            });
+          }
           resolve(targetOption);
         }
       }

package/Select/index.js

@@ -5721,28 +5721,39 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
       // Avoid selecting options that are disabled
       var options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.custom-select-multi__control-option-item--select-all):not(.custom-select-multi__control-option-item--clear)'));
+      if (!options.length) return;
+      var activeNode = listRef.current.querySelector('.list-group-item.active');
       var currentIndex = options.findIndex(function (e) {
-        return e === listRef.current.querySelector('.list-group-item.active');
+        return e === activeNode;
       });
 
       // get the next element in the list, "%" will loop around to 0
-      var nextIndex;
+      var nextIndex = -1;
       if (type === 'increase') {
-        nextIndex = currentIndex + 1 % options.length;
+        // ArrowDown
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
       } else {
-        nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+        // ArrowUp
+        nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
       }
 
       //only one
       if (options.length === 1) nextIndex = 0;
-      if (!isNaN(nextIndex)) {
-        options.forEach(function (node, index) {
+      if (nextIndex >= 0 && nextIndex < options.length) {
+        options.forEach(function (node) {
           node === null || node === void 0 ? void 0 : node.classList.remove('active');
         });
         var targetOption = options[nextIndex];
         if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
           targetOption.classList.add('active');
           keyboardSelectedItem.current = targetOption;
+
+          // Ensure the focused option is visible in the scroll area
+          if (typeof targetOption.scrollIntoView === 'function') {
+            targetOption.scrollIntoView({
+              block: 'nearest'
+            });
+          }
           resolve(targetOption);
         }
       }

package/lib/cjs/Accordion/index.js

@@ -332,7 +332,7 @@ var external_root_React_commonjs2_react_commonjs_react_amd_react_default = /*#__
 // EXTERNAL MODULE: ../Utils/dist/cjs/cls.js
 var cls = __webpack_require__(188);
 ;// CONCATENATED MODULE: ./src/AccordionItem.tsx
-var _excluded = ["heightObserver", "index", "animSpeed", "easing", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "children"];
+var _excluded = ["heightObserver", "index", "animSpeed", "easing", "arrowOnly", "itemClassName", "itemContentWrapperClassName", "itemContentClassName", "itemTriggerClassName", "itemHeaderClassName", "itemTriggerIcon", "itemStyle", "activeItem", "title", "onToggleEv", "onTransitionEnd", "onItemCollapse", "isExpanded", "forceExpanded", "children"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -363,6 +363,7 @@ var AccordionItem = function AccordionItem(props) {
     onTransitionEnd = props.onTransitionEnd,
     onItemCollapse = props.onItemCollapse,
     controlledExpanded = props.isExpanded,
+    forceExpanded = props.forceExpanded,
     children = props.children,
     attributes = _objectWithoutProperties(props, _excluded);
   var _useState = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useState)(false),
@@ -371,9 +372,12 @@ var AccordionItem = function AccordionItem(props) {
     setInternalExpanded = _useState2[1];
   var isFirstRender = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(true);
   var initialHeightSet = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
+  var hasUserInteracted = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(false);
 
-  // Use controlled or uncontrolled expanded state
-  var isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+  // Use forceExpanded if provided and user hasn't interacted, otherwise use controlled or uncontrolled expanded state
+  // forceExpanded takes priority over isExpanded from parent, but only before user interaction
+  var actualExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+  var isExpanded = forceExpanded !== undefined && !hasUserInteracted.current ? forceExpanded : actualExpanded;
   var observer = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var contentWrapperRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
   var contentRef = (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useRef)(null);
@@ -382,6 +386,9 @@ var AccordionItem = function AccordionItem(props) {
   var handleToggle = function handleToggle(e) {
     e.preventDefault();
     e.stopPropagation();
+
+    // Mark that user has interacted, so forceExpanded will be ignored
+    hasUserInteracted.current = true;
     if (controlledExpanded === undefined) {
       setInternalExpanded(function (prev) {
         return !prev;
@@ -399,6 +406,13 @@ var AccordionItem = function AccordionItem(props) {
       overflow: 'hidden'
     };
   };
+
+  // Reset user interaction flag when forceExpanded changes externally
+  (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
+    if (forceExpanded !== undefined) {
+      hasUserInteracted.current = false;
+    }
+  }, [forceExpanded]);
   (0,external_root_React_commonjs2_react_commonjs_react_amd_react_.useEffect)(function () {
     if (triggerRef.current && typeof onItemCollapse === 'function') {
       if (isFirstRender.current) {

package/lib/cjs/LiveSearch/index.js

@@ -3853,30 +3853,41 @@ var LiveSearch = /*#__PURE__*/(0,react__WEBPACK_IMPORTED_MODULE_0__.forwardRef)(
       if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
       var options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide)'));
       // Avoid selecting options that are disabled
-      options = options.filter(function (options) {
-        return !options.classList.contains('disabled');
+      options = options.filter(function (option) {
+        return !option.classList.contains('disabled');
       });
+      if (!options.length) return;
+      var activeNode = listRef.current.querySelector('.list-group-item.active');
       var currentIndex = options.findIndex(function (e) {
-        return e === listRef.current.querySelector('.list-group-item.active');
+        return e === activeNode;
       });
 
       // get the next element in the list, "%" will loop around to 0
-      var nextIndex;
+      var nextIndex = -1;
       if (type === 'increase') {
-        nextIndex = currentIndex + 1 % options.length;
+        // ArrowDown
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
       } else {
-        nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+        // ArrowUp
+        nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
       }
 
       //only one
       if (options.length === 1) nextIndex = 0;
-      if (!isNaN(nextIndex)) {
-        options.forEach(function (node, index) {
+      if (nextIndex >= 0 && nextIndex < options.length) {
+        options.forEach(function (node) {
           node === null || node === void 0 ? void 0 : node.classList.remove('active');
         });
         var targetOption = options[nextIndex];
         if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
           targetOption.classList.add('active');
+
+          // Ensure the focused option is visible in the scroll area
+          if (typeof targetOption.scrollIntoView === 'function') {
+            targetOption.scrollIntoView({
+              block: 'nearest'
+            });
+          }
           resolve(targetOption);
         }
       }

package/lib/cjs/Select/index.js

@@ -5721,28 +5721,39 @@ var Select = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_react_
 
       // Avoid selecting options that are disabled
       var options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.custom-select-multi__control-option-item--select-all):not(.custom-select-multi__control-option-item--clear)'));
+      if (!options.length) return;
+      var activeNode = listRef.current.querySelector('.list-group-item.active');
       var currentIndex = options.findIndex(function (e) {
-        return e === listRef.current.querySelector('.list-group-item.active');
+        return e === activeNode;
       });
 
       // get the next element in the list, "%" will loop around to 0
-      var nextIndex;
+      var nextIndex = -1;
       if (type === 'increase') {
-        nextIndex = currentIndex + 1 % options.length;
+        // ArrowDown
+        nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
       } else {
-        nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+        // ArrowUp
+        nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
       }
 
       //only one
       if (options.length === 1) nextIndex = 0;
-      if (!isNaN(nextIndex)) {
-        options.forEach(function (node, index) {
+      if (nextIndex >= 0 && nextIndex < options.length) {
+        options.forEach(function (node) {
           node === null || node === void 0 ? void 0 : node.classList.remove('active');
         });
         var targetOption = options[nextIndex];
         if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
           targetOption.classList.add('active');
           keyboardSelectedItem.current = targetOption;
+
+          // Ensure the focused option is visible in the scroll area
+          if (typeof targetOption.scrollIntoView === 'function') {
+            targetOption.scrollIntoView({
+              block: 'nearest'
+            });
+          }
           resolve(targetOption);
         }
       }

package/lib/esm/Accordion/AccordionItem.tsx

@@ -2,7 +2,6 @@ import React, { useEffect, useRef, useState } from 'react';
 
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
-
 export type AccordionItemProps = {
     heightObserver?: number[];
     index?: number;
@@ -29,6 +28,8 @@ export type AccordionItemProps = {
     onItemCollapse?: (trigger: HTMLElement,  icon: HTMLElement, isExpanded: boolean) => void;
 	/** Control expanded state from parent */
 	isExpanded?: boolean;
+	/** Force expanded state, takes priority over isExpanded from parent */
+	forceExpanded?: boolean;
 	/** -- */
 	children: React.ReactNode;
 };
@@ -56,6 +57,7 @@ const AccordionItem = (props: AccordionItemProps) => {
         onTransitionEnd,
         onItemCollapse,
         isExpanded: controlledExpanded,
+        forceExpanded,
         children,
         ...attributes
     } = props;
@@ -63,9 +65,12 @@ const AccordionItem = (props: AccordionItemProps) => {
     const [internalExpanded, setInternalExpanded] = useState<boolean>(false);
     const isFirstRender = useRef<boolean>(true);
     const initialHeightSet = useRef<boolean>(false);
+    const hasUserInteracted = useRef<boolean>(false);
 
-    // Use controlled or uncontrolled expanded state
-    const isExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    // Use forceExpanded if provided and user hasn't interacted, otherwise use controlled or uncontrolled expanded state
+    // forceExpanded takes priority over isExpanded from parent, but only before user interaction
+    const actualExpanded = controlledExpanded !== undefined ? controlledExpanded : internalExpanded;
+    const isExpanded = (forceExpanded !== undefined && !hasUserInteracted.current) ? forceExpanded : actualExpanded;
 
     const observer = useRef<ResizeObserver | null>(null);
     const contentWrapperRef = useRef<HTMLDivElement | null>(null);
@@ -77,6 +82,9 @@ const AccordionItem = (props: AccordionItemProps) => {
         e.preventDefault();
         e.stopPropagation();
 
+        // Mark that user has interacted, so forceExpanded will be ignored
+        hasUserInteracted.current = true;
+
         if (controlledExpanded === undefined) {
             setInternalExpanded(prev => !prev);
         }
@@ -96,6 +104,13 @@ const AccordionItem = (props: AccordionItemProps) => {
     };
 
 
+    // Reset user interaction flag when forceExpanded changes externally
+    useEffect(() => {
+        if (forceExpanded !== undefined) {
+            hasUserInteracted.current = false;
+        }
+    }, [forceExpanded]);
+
     useEffect(() => {
         if (triggerRef.current && typeof onItemCollapse === 'function') {
             if (isFirstRender.current) {

package/lib/esm/LiveSearch/index.tsx

@@ -17,7 +17,6 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export interface OptionConfig {
     disabled?: boolean;
     label: any;
@@ -740,35 +739,45 @@ const LiveSearch = forwardRef((props: LiveSearchProps, externalRef: any) => {
             if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
 
 
-            let options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide)'));
+            let options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide)')) as HTMLElement[];
             // Avoid selecting options that are disabled
-            options = options.filter((options: HTMLElement) => !options.classList.contains('disabled'));
+            options = options.filter((option: HTMLElement) => !option.classList.contains('disabled'));
+
+            if (!options.length) return;
 
-            const currentIndex = options.findIndex((e) => e === listRef.current.querySelector('.list-group-item.active'));
+            const activeNode = listRef.current.querySelector('.list-group-item.active') as HTMLElement | null;
+            const currentIndex = options.findIndex((e: HTMLElement) => e === activeNode);
 
 
             // get the next element in the list, "%" will loop around to 0
-            let nextIndex;
+            let nextIndex = -1;
             if (type === 'increase') {
-                nextIndex = currentIndex + 1 % options.length;
+                // ArrowDown
+                nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
             } else {
-                nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+                // ArrowUp
+                nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
             }
 
 
-
             //only one
             if (options.length === 1) nextIndex = 0;
 
 
-            if (!isNaN(nextIndex)) {
-                options.forEach((node: any, index: number) => {
+            if (nextIndex >= 0 && nextIndex < options.length) {
+                options.forEach((node: any) => {
                     node?.classList.remove('active');
                 });
 
                 const targetOption = options[nextIndex] as HTMLElement;
                 if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
                     targetOption.classList.add('active');
+
+                    // Ensure the focused option is visible in the scroll area
+                    if (typeof (targetOption as any).scrollIntoView === 'function') {
+                        (targetOption as any).scrollIntoView({ block: 'nearest' });
+                    }
+
                     resolve(targetOption);
                 }
 

package/lib/esm/Select/index.tsx

@@ -47,6 +47,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 export interface MultiSelectValue {
     items: { label: string; value: string }[];
     labels: string[];
@@ -2012,26 +2013,35 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
 
 
             // Avoid selecting options that are disabled
-            const options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.custom-select-multi__control-option-item--select-all):not(.custom-select-multi__control-option-item--clear)'));
-            const currentIndex = options.findIndex((e) => e === listRef.current.querySelector('.list-group-item.active'));
+            const options = [].slice.call(
+                listRef.current.querySelectorAll(
+                    '.list-group-item:not(.hide):not(.custom-select-multi__control-option-item--select-all):not(.custom-select-multi__control-option-item--clear)'
+                )
+            );
+
+            if (!options.length) return;
+
+            const activeNode = listRef.current.querySelector('.list-group-item.active');
+            const currentIndex = options.findIndex((e: HTMLElement) => e === activeNode);
 
 
             // get the next element in the list, "%" will loop around to 0
-            let nextIndex;
+            let nextIndex = -1;
             if (type === 'increase') {
-                nextIndex = currentIndex + 1 % options.length;
+                // ArrowDown
+                nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % options.length;
             } else {
-                nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+                // ArrowUp
+                nextIndex = currentIndex === -1 ? options.length - 1 : (currentIndex - 1 + options.length) % options.length;
             }
 
 
-
             //only one
             if (options.length === 1) nextIndex = 0;
 
 
-            if (!isNaN(nextIndex)) {
-                options.forEach((node: any, index: number) => {
+            if (nextIndex >= 0 && nextIndex < options.length) {
+                options.forEach((node: any) => {
                     node?.classList.remove('active');
                 });
 
@@ -2040,6 +2050,12 @@ const Select = forwardRef((props: SelectProps, externalRef: any) => {
                     targetOption.classList.add('active');
 
                     keyboardSelectedItem.current = targetOption;
+
+                    // Ensure the focused option is visible in the scroll area
+                    if (typeof targetOption.scrollIntoView === 'function') {
+                        targetOption.scrollIntoView({ block: 'nearest' });
+                    }
+
                     resolve(targetOption);
                 }
 

package/package.json

@@ -1 +1 @@
-{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.755","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"}}
+{"author":"UIUX Lab","email":"uiuxlab@gmail.com","name":"funda-ui","version":"4.7.770","description":"React components using pure Bootstrap 5+ which does not contain any external style and script libraries.","repository":{"type":"git","url":"git+https://github.com/xizon/funda-ui.git"},"scripts":{"test":"echo \"Error: no test specified\" && exit 1"},"keywords":["bootstrap","react-bootstrap","react-components","components","components-react","react-bootstrap-components","react","funda-ui","fundaui","uikit","ui-kit","ui-components"],"bugs":{"url":"https://github.com/xizon/funda-ui/issues"},"homepage":"https://github.com/xizon/funda-ui#readme","main":"all.js","license":"MIT","dependencies":{"react":"^18.2.0","react-dom":"^18.2.0"},"types":"all.d.ts","publishConfig":{"directory":"lib"},"directories":{"lib":"lib"}}