funda-ui 4.7.615 → 4.7.624

package/publish/lib/esm/Select/index.tsx

@@ -0,0 +1,3104 @@
+import React, { useEffect, useState, useRef, KeyboardEvent, forwardRef, useImperativeHandle } from 'react';
+
+import {
+    formatIndentVal,
+    removeItemOnce,
+    optionsCustomSelectFlat,
+    isObject
+} from './utils/func';
+
+
+import RootPortal from 'funda-root-portal';
+
+
+import useComId from 'funda-utils/dist/cjs/useComId';
+import {
+    isJSON
+} from 'funda-utils/dist/cjs/validate';
+import useDebounce from 'funda-utils/dist/cjs/useDebounce';
+import useClickOutside from 'funda-utils/dist/cjs/useClickOutside';
+import useWindowScroll from 'funda-utils/dist/cjs/useWindowScroll';
+import {
+    convertArrToValByBrackets
+} from 'funda-utils/dist/cjs/convert';
+import {
+    getAbsolutePositionOfStage
+} from 'funda-utils/dist/cjs/getElementProperty';
+import {
+    addTreeDepth,
+    addTreeIndent,
+} from 'funda-utils/dist/cjs/tree';
+import {
+    getTextWidth
+} from 'funda-utils/dist/cjs/inputsCalculation';
+import {
+    removeArrDuplicateItems
+} from 'funda-utils/dist/cjs/object';
+
+// Destroys body scroll locking
+import {
+    clearAllBodyScrollLocks, 
+    disableBodyScroll, 
+    enableBodyScroll,
+} from 'funda-utils/dist/cjs/bodyScrollLock';
+import {
+    stripTagsAndContent
+} from 'funda-utils/dist/cjs/format-string';
+import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
+
+
+export interface MultiSelectValue {
+    items: { label: string; value: string }[];
+    labels: string[];
+    values: string[];
+    labelsOfString: string;
+    valuesOfString: string;
+}
+
+export type SelectOptionChangeFnType = (
+    element: HTMLElement,
+    valueElement: HTMLElement,
+    value: OptionConfig | MultiSelectValue
+) => void | Promise<void>;
+
+
+export interface MultiSelectControlValConfig {
+    values: string[];
+    labels: string[];
+}
+
+export interface OptionConfig {
+    disabled?: boolean;
+    optgroup?: any[];
+    group?: boolean;
+    label: string;
+    listItemLabel?: string;
+    value: string | number | boolean;
+    queryString: string | number;
+    callback?: () => void | Promise<void>;
+    [key: string]: string | number | boolean | any[] | (() => void | Promise<void>) | undefined;
+}
+
+
+export interface MultiSelectConfig {
+    valid: boolean;
+    selectAll: boolean;
+    selectAllLabel?: string;
+    deselectAllLabel?: string;
+}
+
+export interface multiSelectSelectedItemOnlyStatusConfig {
+    itemsLabel?: string;
+    allItemsLabel?: string;
+    noneLabel?: string;
+}
+
+
+
+export interface ClearTriggerConfig {
+    valid: boolean;
+    clearValueLabel?: string;
+}
+
+
+export type SelectProps = {
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
+    popupRef?: React.ForwardedRef<any>; // could use "Array" on popupRef.current, such as popupRef.current[0], popupRef.current[1]
+    wrapperClassName?: string;
+    controlClassName?: string;
+    controlExClassName?: string;
+    optionsExClassName?: string;
+    customScrollContainer?: string | HTMLElement | React.RefObject<HTMLElement>;
+    exceededSidePosOffset?: number;
+    clearIcon?: boolean; 
+    renderOption?: (optionData: OptionConfig, index: number) => React.ReactNode;
+    multiSelect?: MultiSelectConfig;
+    multiSelectEntireAreaTrigger?: boolean;
+    multiSelectSelectedItemOnlyStatus?: multiSelectSelectedItemOnlyStatusConfig;
+    renderSelectedValue?: (selectedData: MultiSelectControlValConfig, removeFunc: (e: React.MouseEvent) => void) => React.ReactNode;
+    clearTrigger?: ClearTriggerConfig;
+    defaultValue?: string | OptionConfig | OptionConfig[];
+    value?: string | OptionConfig | OptionConfig[];
+    label?: React.ReactNode | string;
+    name?: string;
+    disabled?: any;
+    required?: any;
+    readOnly?: any;
+    placeholder?: string;
+    options?: OptionConfig[] | string;
+    lockBodyScroll?: boolean;
+    loader?: React.ReactNode;
+    hierarchical?: boolean;
+    indentation?: string;
+    doubleIndent?: boolean;
+    winWidth?: string | Function;
+    controlArrow?: React.ReactNode;
+    firstRequestAutoExec?: boolean;
+    fetchTrigger?: boolean;
+    /** Set the depth value of the control to control the display of the pop-up layer appear above.
+     * Please set it when multiple controls are used at the same time. */
+    depth?: number;
+    /** Incoming data, you can set the third parameter of `onFetch` */
+    data?: any;
+    /** Whether to use square brackets to save result and initialize default value */
+    extractValueByBrackets?: boolean;
+    /** -- */
+    id?: string;
+    autoComplete?: string;
+    autoCapitalize?: string;
+    spellCheck?: boolean;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    fetchNoneInfo?: string;
+    fetchUpdate?: boolean;
+    fetchFuncAsync?: any;
+    fetchFuncMethod?: string;
+    fetchFuncMethodParams?: any[];
+    fetchCallback?: (data: OptionConfig[]) => OptionConfig[];
+    onFetch?: (
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string,
+        data: OptionConfig[],
+        incomingData: string | null | undefined
+    ) => void;
+    onLoad?: (
+        event: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string | null | undefined
+    ) => void;
+    onSelect?: (data: OptionConfig) => void | Promise<void>;
+    onChange?: SelectOptionChangeFnType | null;
+    onBlur?: (event: React.FocusEvent<HTMLElement>) => void;
+    onFocus?: (event: React.FocusEvent<HTMLElement>) => void;
+    onKeyPressed?: (
+        event: React.KeyboardEvent<HTMLElement>,
+        element: HTMLElement,
+        value: string
+    ) => void;
+};
+
+
+const Select = forwardRef((props: SelectProps, externalRef: any) => {
+    const {
+        contentRef,
+        popupRef,
+        wrapperClassName,
+        controlClassName,
+        controlExClassName,
+        optionsExClassName,
+        customScrollContainer,
+        exceededSidePosOffset,
+        clearIcon,
+        renderOption,
+        multiSelect,
+        multiSelectEntireAreaTrigger,
+        multiSelectSelectedItemOnlyStatus,
+        renderSelectedValue,
+        disabled,
+        required,
+        defaultValue,
+        value,
+        label,
+        name,
+        readOnly,
+        placeholder,
+        id,
+        autoComplete,
+        autoCapitalize,
+        spellCheck,
+        options,
+        clearTrigger,
+        loader,
+        lockBodyScroll,
+        hierarchical,
+        indentation,
+        doubleIndent,
+        style,
+        depth,
+        controlArrow,
+        winWidth,
+        tabIndex,
+        firstRequestAutoExec,
+        fetchTrigger,
+        fetchNoneInfo = 'No match yet',
+        fetchUpdate,
+        fetchFuncAsync,
+        fetchFuncMethod,
+        fetchFuncMethodParams,
+        data,
+        extractValueByBrackets,
+        fetchCallback,
+        onFetch,
+        onLoad,
+        onSelect,
+        onChange,
+        onBlur,
+        onFocus,
+        onKeyPressed,
+        ...attributes
+    } = props;
+
+
+    const QUERY_STRING_PLACEHOLDER = '------';  // Invalid parameters for the first automatic request
+    const DEPTH = depth || 1055;  // the default value same as bootstrap
+    const MANUAL_REQ = typeof fetchTrigger !== 'undefined' && fetchTrigger === true ? true : false;  // Manual requests
+    const LIVE_SEARCH_DISABLED = !MANUAL_REQ && typeof window !== 'undefined' && typeof (window as any)['funda-ui__Select-disable-livesearch'] !== 'undefined' ? true : false; // Globally disable real-time search functionality (only valid for non-dynamic requests)
+
+    const CLEAR_ICON = typeof clearIcon === 'undefined' ? true : clearIcon;
+    const FIRST_REQUEST_AUTO = typeof firstRequestAutoExec === 'undefined' ? true : firstRequestAutoExec;
+    const INPUT_READONLY = LIVE_SEARCH_DISABLED ? true : (typeof readOnly === 'undefined' ? null : readOnly);
+    const VALUE_BY_BRACKETS = typeof extractValueByBrackets === 'undefined' ? true : extractValueByBrackets;
+    const LOCK_BODY_SCROLL = typeof lockBodyScroll === 'undefined' ? false : lockBodyScroll;
+    const WIN_WIDTH = typeof winWidth === 'function' ? winWidth() : winWidth ? winWidth : 'auto';
+    const INDENT_PLACEHOLDER = doubleIndent ? `&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;` : `&nbsp;&nbsp;&nbsp;&nbsp;`;
+    const INDENT_LAST_PLACEHOLDER = `${typeof indentation !== 'undefined' && indentation !== '' ? `${indentation}&nbsp;&nbsp;` : ''}`;
+    const POS_OFFSET = 0;
+    const EXCEEDED_SIDE_POS_OFFSET = Number(exceededSidePosOffset) || 15;
+    const uniqueID = useComId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const rootMultiRef = useRef<any>(null);
+    const selectInputRef = useRef<any>(null);
+    const valueInputRef = useRef<any>(null);
+    const listRef = useRef<any>(null);
+    const listContentRef = useRef<any>(null);
+    const optionsRes = options ? (isJSON(options) ? JSON.parse(options as string) : options) : [];
+    const LIST_CONTAINER_MAX_HEIGHT = 300;
+    const MIN_SPACE_FOR_DROPDOWN = 200; // Minimum space needed to show dropdown below trigger
+
+    const keyboardSelectedItem = useRef<any>(null);
+
+
+    // loading
+    const [fetchLoading, setFetchLoading] = useState<boolean>(false);
+    const loadingOutput = <><div className="cus-select-loader">{loader || <svg height="12px" width="12px" viewBox="0 0 512 512"><g><path fill="inherit" d="M256,0c-23.357,0-42.297,18.932-42.297,42.288c0,23.358,18.94,42.288,42.297,42.288c23.357,0,42.279-18.93,42.279-42.288C298.279,18.932,279.357,0,256,0z" /><path fill="inherit" d="M256,427.424c-23.357,0-42.297,18.931-42.297,42.288C213.703,493.07,232.643,512,256,512c23.357,0,42.279-18.93,42.279-42.288C298.279,446.355,279.357,427.424,256,427.424z" /><path fill="inherit" d="M74.974,74.983c-16.52,16.511-16.52,43.286,0,59.806c16.52,16.52,43.287,16.52,59.806,0c16.52-16.511,16.52-43.286,0-59.806C118.261,58.463,91.494,58.463,74.974,74.983z" /><path fill="inherit" d="M377.203,377.211c-16.503,16.52-16.503,43.296,0,59.815c16.519,16.52,43.304,16.52,59.806,0c16.52-16.51,16.52-43.295,0-59.815C420.489,360.692,393.722,360.7,377.203,377.211z" /><path fill="inherit" d="M84.567,256c0.018-23.348-18.922-42.279-42.279-42.279c-23.357-0.009-42.297,18.932-42.279,42.288c-0.018,23.348,18.904,42.279,42.279,42.279C65.645,298.288,84.567,279.358,84.567,256z" /><path fill="inherit" d="M469.712,213.712c-23.357,0-42.279,18.941-42.297,42.288c0,23.358,18.94,42.288,42.297,42.297c23.357,0,42.297-18.94,42.279-42.297C512.009,232.652,493.069,213.712,469.712,213.712z" /><path fill="inherit" d="M74.991,377.22c-16.519,16.511-16.519,43.296,0,59.806c16.503,16.52,43.27,16.52,59.789,0c16.52-16.519,16.52-43.295,0-59.815C118.278,360.692,91.511,360.692,74.991,377.22z" /><path fill="inherit" d="M437.026,134.798c16.52-16.52,16.52-43.304,0-59.824c-16.519-16.511-43.304-16.52-59.823,0c-16.52,16.52-16.503,43.295,0,59.815C393.722,151.309,420.507,151.309,437.026,134.798z" /></g></svg>}</div></>;
+
+
+    // return a array of options
+    let staticOptionsData: OptionConfig[] = optionsRes;
+    const hasDefaultOptions = staticOptionsData.length > 0;
+
+    //
+    const [orginalData, setOrginalData] = useState<OptionConfig[]>(staticOptionsData);
+    const [optionsData, setOptionsData] = useState<OptionConfig[]>(staticOptionsData);
+    const [hasErr, setHasErr] = useState<boolean>(false);
+
+    // Set the final result
+    const [controlLabel, setControlLabel] = useState<string | undefined>('');
+    const [controlValue, setControlValue] = useState<string | undefined>('');
+
+    //
+    const [controlTempValue, setControlTempValue] = useState<string | null>(null); // Storage for temporary input
+    const [isOpen, setIsOpen] = useState<boolean>(false);
+    const [incomingData, setIncomingData] = useState<string | null | undefined>(null);
+    const [firstRequestExecuted, setFirstRequestExecuted] = useState<boolean>(false);
+    const [handleFirstFetchCompleted, setHandleFirstFetchCompleted] = useState<boolean>(false);
+
+    // Mark whether it is out of focus
+    // Fixed the issue that caused the pop-up window to still display due to 
+    // the delayed close in handleBlur and the timing of the call to popwinPosInit
+    const isBlurringRef = useRef<boolean>(false);
+
+    // filter status
+    const [filterItemsHasNoMatchData, setFilterItemsHasNoMatchData] = useState<boolean>(false);
+    
+
+    // blinking cursor
+    const BLINKING_CURSOR_STR = '|';
+    const [blinkingPosStart, setBlinkingPosStart] = useState<number>(0);
+    const blinkingPosFauxRef = useRef<any>(null);
+    const blinkingCursorPosDivRef = useRef<any>(null);
+
+    // Select All status (for "Single selection")
+    const [userInputboxIsAllSelected, setUserInputboxIsAllSelected] = useState(false);
+
+
+
+    const selectedSign = useRef<boolean>(false);
+    const MULTI_SEL_VALID = multiSelect ? multiSelect.valid : false;
+    const MULTI_SEL_ENTIRE_AREA_TRIGGER = typeof multiSelectEntireAreaTrigger === 'undefined' ? true : multiSelectEntireAreaTrigger;
+    const MULTI_SEL_LABEL = multiSelect ? multiSelect.selectAllLabel : 'Select all';
+    const MULTI_DESEL_LABEL = multiSelect ? multiSelect.deselectAllLabel : 'Deselect all';
+    const MULTI_SEL_SELECTED_STATUS: Record<string, string> = {
+        itemsLabel: '{num} Selected',
+        allItemsLabel: 'All Content ({num})',
+        noneLabel: 'No items selected',
+    };
+
+    const [controlArr, setControlArr] = useState<MultiSelectControlValConfig>({
+        labels: [],
+        values: []
+    });
+
+
+
+    // Only single symbols such as , #, and @ are allowed, and , a, a, , etc. are not allowed.
+    const isSingleSpecialChar = (str: string) => {
+        return typeof str === 'string' && /^[^\w\s]$/.test(str);
+    };
+
+
+    const chkValueExist = (v: any) => {
+        return typeof v !== 'undefined' && v !== '';
+    };
+
+
+    const listContainerHeightLimit = (num: number) => {
+        let res = num;
+        if (res > LIST_CONTAINER_MAX_HEIGHT) res = LIST_CONTAINER_MAX_HEIGHT;
+
+        // Avoid the height of the child div containing decimal points and scrollbars
+        res = res + 1;
+
+        return res;
+    };
+
+    const multiSelControlOptionExist = (arr: any[], val: any) => {
+        const _data = arr.filter(Boolean);
+        return _data.map((v: any) => v.toString()).includes(val.toString());
+    };
+
+    // clear trigger
+    const CLEAR_TRIGGER_VALID = typeof clearTrigger === 'undefined' ? false : (clearTrigger ? clearTrigger.valid : false);
+    const CLEAR_TRIGGER_LABEL = clearTrigger ? clearTrigger.clearValueLabel : 'Clear';
+
+
+    const optionsFormatGroupOpt = (allData: any[]) => {
+        allData.forEach((item: any) => {
+            if (typeof item.optgroup !== 'undefined') {
+                item.value = String(Math.random());
+            }
+        });
+    };
+
+    const finalRes = (val: any) => {
+        return isObject(val) ? val.value : val;
+    };
+
+    // exposes the following methods
+    useImperativeHandle(
+        popupRef,
+        () => ({
+            close: () => {
+                cancel();
+
+                if (MULTI_SEL_VALID) popwinPosHide();
+            },
+            open: () => {
+                activate();
+            },
+            
+        }),
+        [popupRef],
+    );
+
+    useImperativeHandle(
+        contentRef,
+        () => ({
+            active: () => {
+                handleShowList();
+                selectInputRef.current?.select();
+            },
+            
+            focus: () => {
+                selectInputRef.current?.select();
+            },
+            clear: (cb?: any) => {
+
+                if (MULTI_SEL_VALID) {
+                    updateOptionCheckboxes('remove');
+                    
+                    //
+                    if (typeof onChange === 'function') {
+                        onChange(
+                            selectInputRef.current,
+                            valueInputRef.current,
+                            multipleSelectionCallback([], [])
+                        );
+                    }
+                } else {
+                    handleClearValue();
+                }
+
+                selectInputRef.current?.blur();
+
+                cb?.();
+            },
+            /*
+            set([{"label": "Option 1","listItemLabel":"Option 1 (No: 001)","value": "value-1","queryString": "option1"}], () => { console.log('callback') }])
+            */
+            set: (value: any, cb?: any) => {
+
+                if (MULTI_SEL_VALID) {
+                    updateOptionCheckboxesViaAddSingleItem({
+                        labels: value.map((v: any) => v.label),
+                        values: value.map((v: any) => v.value)
+                    });
+                    
+                    // 
+                    if (typeof onChange === 'function') {
+                        onChange(
+                            selectInputRef.current,
+                            valueInputRef.current,
+                            multipleSelectionCallback(
+                                value.map((v: any) => v.value),
+                                value.map((v: any) => v.label)
+                            )
+                        );
+                    }
+                } else {
+                    const _val = value[0];
+                    handleSelect(null, (typeof _val === 'object' ? JSON.stringify(_val) : _val), [`${_val.value}`], [`${_val.label}`]);
+                    
+                    // 
+                    if (typeof onChange === 'function') {
+                        onChange(
+                            selectInputRef.current,
+                            valueInputRef.current,
+                            _val
+                        );
+                    }
+                }
+
+
+                cb?.();
+            }
+        }),
+        [contentRef, selectInputRef],
+    );
+
+
+
+    // click outside
+    useClickOutside({
+        enabled: isOpen && rootRef.current && listRef.current,
+        isOutside: (event: any) => {
+
+            // close dropdown when other dropdown is opened
+            return (
+                (rootRef.current !== event.target && !rootRef.current.contains(event.target as HTMLElement)) &&
+                listRef.current !== event.target && !listRef.current.contains(event.target as HTMLElement)
+            )
+
+        },
+        handle: (event: any) => {
+            // cancel
+            cancel();
+            if (MULTI_SEL_VALID) popwinPosHide();
+        }
+    }, [isOpen, rootRef, listRef]);
+
+
+
+    // Add function to the element that should be used as the scrollable area.
+    const [scrollData, windowScrollUpdate] = useWindowScroll({
+        performance: ['debounce', 500],   // "['debounce', 500]" or "['throttle', 500]"
+        handle: (scrollData: any) => {
+            // remove data-* attibutes
+            popwinContainerHeightReset();
+        }
+    });
+
+
+    // value of multiple selection callback
+    const multipleSelectionCallback = (valuesRes: any[], labelsRes: any[]) => {
+        return {
+            items: valuesRes.map((v: any, i: number) => (
+                {label: labelsRes[i].toString(), value: v.toString()}
+            )),
+            labels: labelsRes.map((v: any) => v.toString()),
+            values: valuesRes.map((v: any) => v.toString()),
+            labelsOfString: VALUE_BY_BRACKETS ? convertArrToValByBrackets(labelsRes.map((v: any) => v.toString())) : labelsRes.map((v: any) => v.toString()).join(','),
+            valuesOfString: VALUE_BY_BRACKETS ? convertArrToValByBrackets(valuesRes.map((v: any) => v.toString())) : valuesRes.map((v: any) => v.toString()).join(',')
+        };
+    };
+
+
+    //performance
+    const handleChangeFetchSafe = useDebounce((val: any) => {
+
+        setFetchLoading(true);
+
+        if (fetchUpdate) {
+
+            // update filter status
+            setFilterItemsHasNoMatchData(false); 
+
+
+            // Make a request
+            handleFetch(val).then((response: any) => {
+
+                // pop win initalization
+                setTimeout(() => {
+                    popwinPosInit();
+                    popwinFilterItems(val);
+
+                }, 0);
+
+                setFetchLoading(false);
+            });
+        } else {
+            
+   
+            // pop win initalization
+            setTimeout(() => {
+                popwinPosInit();
+                popwinFilterItems(val);
+            }, 0);
+
+            setFetchLoading(false);
+
+        }
+
+
+    }, 350, [optionsData]);
+
+    async function fetchData(params: any, valueToInputDefault: any, inputDefault: any, init: boolean = true) {
+
+
+        // Determine whether the default value is user query input or default input
+        const defaultValue = init ? valueToInputDefault : '';
+
+        if (typeof fetchFuncAsync === 'object') {
+
+
+            const response: any = await fetchFuncAsync[`${fetchFuncMethod}`](...params.split(','));
+            let _ORGIN_DATA = response.data;
+
+
+            // reset data structure
+            if (typeof (fetchCallback) === 'function') {
+                _ORGIN_DATA = fetchCallback(_ORGIN_DATA);
+            }
+
+            // Determine whether the data structure matches
+            if (_ORGIN_DATA.length > 0 && typeof _ORGIN_DATA[0].value === 'undefined') {
+                console.warn('The data structure does not match, please refer to the example in the component documentation.');
+                setHasErr(true);
+                _ORGIN_DATA = [];
+            }
+
+
+            // STEP 1: ===========
+            // Set hierarchical categories ( with sub-categories )
+            if (hierarchical) {
+                _ORGIN_DATA = addTreeDepth(_ORGIN_DATA);
+                addTreeIndent(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
+            }
+
+
+            // STEP 2: ===========
+            // Flatten the group
+            _ORGIN_DATA = optionsCustomSelectFlat(_ORGIN_DATA);
+
+
+
+
+            // STEP 3: ===========
+            // value & label must be initialized
+            let filterRes: any = [];
+            // If the default value is label, match value
+            const filterResQueryValue = _ORGIN_DATA.filter((item: any) => item.value == defaultValue);
+            const filterResQueryLabel = _ORGIN_DATA.filter((item: any) => item.label == defaultValue);
+
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+
+            // if the default value is Object
+            if (isObject(inputDefault) && filterRes.length === 0) {
+                filterRes = [inputDefault];
+            }
+
+
+            // STEP 4: ===========
+            // ++++++++++++++++++++
+            // Single selection
+            // ++++++++++++++++++++
+            if (!chkValueExist(defaultValue)) {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
+                setControlValue('');
+                setControlLabel('');
+            } else {
+                if (filterRes.length > 0) {
+                    setControlValue(filterRes[0].value);
+                    setControlLabel(formatIndentVal(filterRes[0].label, INDENT_LAST_PLACEHOLDER) as string);
+                }
+
+            }
+
+
+            // ++++++++++++++++++++
+            // Multiple selection
+            // ++++++++++++++++++++
+            if (MULTI_SEL_VALID) {
+
+
+                if (!chkValueExist(defaultValue) && init) {
+                    setControlArr({
+                        labels: [],
+                        values: []
+                    });
+                }
+
+
+
+                if (chkValueExist(defaultValue) && Array.isArray(defaultValue)) {
+
+                    // initialize default values of Multiple selection
+                    const _currentData: OptionConfig[] = defaultValue;
+                    const _defaultValues = _currentData.map((v: OptionConfig) => v.value as string);
+                    const _defaultLabels = _currentData.map((v: OptionConfig) => v.label as string);
+
+                    setControlArr({
+                        labels: _defaultLabels,
+                        values: _defaultValues,
+                    });
+
+                }
+
+                // Appropriate multi-item container height
+                setTimeout(() => {
+                    adjustMultiControlContainerHeight();
+                }, 0);
+                
+
+                // hide disabled item
+                _ORGIN_DATA = _ORGIN_DATA.filter((v: any) => typeof v.disabled !== 'undefined' && v.disabled == true ? false : true);
+
+            }
+
+            // STEP 5: ===========
+            //
+            // remove Duplicate objects from JSON Array
+            optionsFormatGroupOpt(_ORGIN_DATA); // prevent the value from being filtered out
+            _ORGIN_DATA = removeArrDuplicateItems(_ORGIN_DATA, 'value');
+
+            setOptionsData(_ORGIN_DATA); // data must be initialized
+
+            //
+            setOrginalData(_ORGIN_DATA);
+
+
+            // STEP 6: ===========
+            //
+            onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, _ORGIN_DATA, incomingData);
+
+
+
+            //
+            return _ORGIN_DATA;
+
+
+        } else {
+
+
+            // STEP 1: ===========
+            // Set hierarchical categories ( with sub-categories )
+            if (hierarchical) {
+                staticOptionsData = addTreeDepth(staticOptionsData);
+                addTreeIndent(staticOptionsData, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
+            }
+
+
+            // STEP 2: ===========
+            // Flatten the group
+            staticOptionsData = optionsCustomSelectFlat(staticOptionsData);
+
+
+            // STEP 3: ===========
+            // If the default value is label, match value
+            let filterRes: any = [];
+            const filterResQueryValue = staticOptionsData.filter((item: any) => item.value == defaultValue);
+            const filterResQueryLabel = staticOptionsData.filter((item: any) => item.label == defaultValue);
+
+            filterRes = filterResQueryValue;
+            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+
+   
+            // if the default value is Object
+            if (isObject(inputDefault) && filterRes.length === 0) {
+                filterRes = [inputDefault];
+            }
+
+
+
+            // STEP 4: ===========
+            // ++++++++++++++++++++
+            // Single selection
+            // ++++++++++++++++++++
+            if (!chkValueExist(defaultValue)) {  // Do not use `init`, otherwise the query will revert to the default value if there is no value
+                setControlValue('');
+                setControlLabel('');
+            } else {
+                if (filterRes.length > 0) {
+                    setControlValue(filterRes[0].value);
+                    setControlLabel(formatIndentVal(filterRes[0].label, INDENT_LAST_PLACEHOLDER));
+                }
+
+            }
+
+
+
+            // ++++++++++++++++++++
+            // Multiple selection
+            // ++++++++++++++++++++
+            if (MULTI_SEL_VALID) {
+
+
+                if (!chkValueExist(defaultValue) && init) {
+                    setControlArr({
+                        labels: [],
+                        values: []
+                    });
+                }
+
+                if (chkValueExist(defaultValue) && Array.isArray(defaultValue)) {
+
+                    // initialize default values of Multiple selection
+                    const _currentData: OptionConfig[] = defaultValue;
+                    const _defaultValues = _currentData.map((v: OptionConfig) => v.value as string);
+                    const _defaultLabels = _currentData.map((v: OptionConfig) => v.label as string);
+                    
+                    setControlArr({
+                        labels: _defaultLabels,
+                        values: _defaultValues,
+                    });
+                }
+
+                // Appropriate multi-item container height
+                setTimeout(() => {
+                    adjustMultiControlContainerHeight();
+                }, 0);
+
+
+                // hide disabled item
+                staticOptionsData = staticOptionsData.filter((v: any) => typeof v.disabled !== 'undefined' && v.disabled == true ? false : true);
+
+            }
+
+            // STEP 5: ===========
+            //
+            // remove Duplicate objects from JSON Array
+            optionsFormatGroupOpt(staticOptionsData); // prevent the value from being filtered out
+            staticOptionsData = removeArrDuplicateItems(staticOptionsData, 'value');
+            
+
+            setOptionsData(staticOptionsData); // data must be initialized
+
+            //
+            setOrginalData(staticOptionsData);
+
+            // STEP 6: ===========
+            //
+            onFetch?.(selectInputRef.current, valueInputRef.current, defaultValue, staticOptionsData, incomingData);
+
+
+            //
+            return staticOptionsData;
+        }
+
+
+    }
+
+
+    function adjustMultiControlContainerHeight(scrollbarInit: boolean = true) {
+        if (rootMultiRef.current === null) return;
+        
+        setTimeout(() => {
+
+
+            // Sometimes you may get 0, you need to judge
+            if (MULTI_SEL_VALID && rootMultiRef.current.clientHeight > 0) {
+                rootRef.current.style.height = rootMultiRef.current.clientHeight + 'px';
+            }
+
+            // popwin position update
+            const _modalRef: any = document.querySelector(`#custom-select__options-wrapper-${idRes}`);
+            if (MULTI_SEL_VALID && _modalRef !== null && _modalRef.classList.contains('active')) {
+                popwinPosInit(scrollbarInit);
+            }
+
+
+        }, 0);
+    }
+
+    function syncListContentScrollBody() {
+        const el: any = listContentRef.current;
+        if (el === null) return;
+
+        const activedItem = el.querySelectorAll(`.list-group-item.${!MULTI_SEL_VALID ? 'active' : 'item-selected'}`)[0];
+        if (typeof activedItem !== 'undefined') {
+            
+            const clearItem = el.querySelector(`.list-group-item.${!MULTI_SEL_VALID ? 'custom-select-multi__control-option-item--clear' : 'custom-select-multi__control-option-item--select-all'}`);
+            const clearItemHeight = clearItem === null ? 0 : clearItem.clientHeight;
+            const _latestScrollTop = activedItem.offsetTop - clearItemHeight;
+            
+            el.scrollTop = _latestScrollTop;
+        }
+
+    }
+
+
+    function popwinPosInit(scrollbarInit: boolean = true) {
+        if (listContentRef.current === null || rootRef.current === null || selectInputRef.current === null) return;
+
+        // If it is out of focus, do not perform position initialization
+        if (isBlurringRef.current) return;
+
+        //
+        let contentMaxHeight = 0;
+
+        // update modal position
+        const _modalRef: any = document.querySelector(`#custom-select__options-wrapper-${idRes}`);
+        const _triggerRef: any = selectInputRef.current;
+        const _triggerXaxisRef: any = rootRef.current;
+
+        // console.log(getAbsolutePositionOfStage(_triggerRef));
+
+        if (_modalRef === null) return;
+
+        const { x } = getAbsolutePositionOfStage(_triggerXaxisRef);
+        const { y, width, height } = getAbsolutePositionOfStage(_triggerRef);
+        const _triggerBox = _triggerRef.getBoundingClientRect();
+        let targetPos = '';
+
+        
+
+        // STEP 1:
+        //-----------
+        // display wrapper
+        _modalRef.classList.add('active');
+
+
+
+
+        // STEP 2:
+        //-----------
+        // Detect content MAX HEIGHT and ACTUAL HEIGHT
+        const _contentBox = listContentRef.current.getBoundingClientRect();
+        let _contentOldHeight = listContentRef.current.clientHeight;
+
+        // height restrictions
+        _contentOldHeight = listContainerHeightLimit(_contentOldHeight);
+
+        // You need to wait for the height of the pop-up container to be set
+        // Detect position
+        let containerHeight = window.innerHeight;
+        let containerTop = 0;
+        
+        // If custom scroll container is specified, use it instead of window
+        if (customScrollContainer) {
+            let customContainer: HTMLElement | null = null;
+            
+            if (typeof customScrollContainer === 'string') {
+                // Handle selector string
+                customContainer = document.querySelector(customScrollContainer);
+            } else if (customScrollContainer instanceof HTMLElement) {
+                // Handle DOM element directly
+                customContainer = customScrollContainer;
+            } else if (customScrollContainer && 'current' in customScrollContainer) {
+                // Handle React ref
+                customContainer = customScrollContainer.current;
+            }
+            
+            if (customContainer) {
+                const containerRect = customContainer.getBoundingClientRect();
+                containerHeight = containerRect.height;
+                containerTop = containerRect.top;
+            }
+        }
+        
+        // Calculate available space below the trigger
+        const availableSpaceBelow = containerHeight - (_triggerBox.top - containerTop);
+        
+        // Use a more reasonable threshold for position decision
+        // Consider the minimum space needed for a usable dropdown
+        if (availableSpaceBelow > MIN_SPACE_FOR_DROPDOWN) {
+            targetPos = 'bottom';
+        } else {
+            targetPos = 'top';
+        }
+
+        if (typeof listContentRef.current.dataset.pos === 'undefined') listContentRef.current.dataset.pos = targetPos;
+
+
+
+        // STEP 3:
+        //-----------
+        // Set the pop-up height
+        if (targetPos === 'top') {
+            // Calculate available space above the trigger
+            const availableSpaceAbove = _triggerBox.top - containerTop;
+            contentMaxHeight = availableSpaceAbove;
+
+            // height restrictions
+            contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 0;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
+            if (_contentBox.height > contentMaxHeight) {
+                listContentRef.current.style.height = finalHeight + 'px';
+                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
+
+                // has scrollbar
+                listContentRef.current.dataset.hasScrollbar = 'true';
+                
+
+            } else {
+                if (_contentOldHeight > 50) {
+                    listContentRef.current.style.height = _contentOldHeight + 'px';
+                    if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _contentOldHeight;
+                }
+
+                // has scrollbar
+                listContentRef.current.dataset.hasScrollbar = 'false';
+
+            }
+        }
+
+        if (targetPos === 'bottom') {
+            // Calculate available space below the trigger
+            const availableSpaceBelow = containerHeight - (_triggerBox.bottom - containerTop);
+            contentMaxHeight = availableSpaceBelow;
+
+            // height restrictions
+            contentMaxHeight = listContainerHeightLimit(contentMaxHeight);
+
+            // Calculate the final height with minimum height protection
+            const contentHeightOffset = 10;
+            const finalHeight = Math.max(contentMaxHeight - contentHeightOffset, 150); // Ensure minimum height of 150px
+
+            if (_contentBox.height > contentMaxHeight) {
+                listContentRef.current.style.height = finalHeight + 'px';
+                if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = finalHeight;
+
+                // has scrollbar
+                listContentRef.current.dataset.hasScrollbar = 'true';
+
+            } else {
+                if (_contentOldHeight > 50) {
+                    listContentRef.current.style.height = _contentOldHeight + 'px';
+                    if (typeof listContentRef.current.dataset.height === 'undefined') listContentRef.current.dataset.height = _contentOldHeight;
+                }
+
+                // has scrollbar
+                listContentRef.current.dataset.hasScrollbar = 'false';
+
+            }
+
+        }
+
+
+        // STEP 4:
+        //-----------
+        // Adjust position
+        if (targetPos === 'top') {
+            _modalRef.style.left = x + 'px';
+            //_modalRef.style.top = y - POS_OFFSET - (listRef.current.clientHeight) - 2 + 'px';
+            _modalRef.style.top = 'auto';
+            _modalRef.style.bottom = (window.innerHeight - _triggerBox.top) + POS_OFFSET + 2 + 'px';
+            _modalRef.style.setProperty('position', 'fixed', 'important');
+            _modalRef.classList.add('pos-top');
+
+        }
+
+        if (targetPos === 'bottom') {
+            _modalRef.style.left = x + 'px';
+            _modalRef.style.bottom = 'auto';
+            _modalRef.style.top = y + height + POS_OFFSET + 'px';
+            _modalRef.style.setProperty('position', 'absolute', 'important');
+            _modalRef.classList.remove('pos-top');
+        }
+
+
+
+        // STEP 5:
+        //-----------
+        // Determine whether it exceeds the far right or left side of the screen
+        const _modalContent = _modalRef;
+        const _modalBox = _modalContent.getBoundingClientRect();
+        if (typeof _modalContent.dataset.offset === 'undefined' && _modalBox.left > 0) {
+
+            // Get container width for boundary checking
+            let containerWidth = window.innerWidth;
+            let containerLeft = 0;
+            
+            if (customScrollContainer) {
+                let customContainer: HTMLElement | null = null;
+                
+                if (typeof customScrollContainer === 'string') {
+                    // Handle selector string
+                    customContainer = document.querySelector(customScrollContainer);
+                } else if (customScrollContainer instanceof HTMLElement) {
+                    // Handle DOM element directly
+                    customContainer = customScrollContainer;
+                } else if (customScrollContainer && 'current' in customScrollContainer) {
+                    // Handle React ref
+                    customContainer = customScrollContainer.current;
+                }
+                
+                if (customContainer) {
+                    const containerRect = customContainer.getBoundingClientRect();
+                    containerWidth = containerRect.width;
+                    containerLeft = containerRect.left;
+                }
+            }
+
+            // 10 pixels is used to account for some bias in mobile devices
+            if ((_modalBox.right + 10) > (containerLeft + containerWidth)) {
+                const _modalOffsetPosition = _modalBox.right - (containerLeft + containerWidth) + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `-${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+            if ((_modalBox.left - 10) < containerLeft) {
+                const _modalOffsetPosition = Math.abs(_modalBox.left - containerLeft) + EXCEEDED_SIDE_POS_OFFSET;
+                _modalContent.dataset.offset = _modalOffsetPosition;
+                _modalContent.style.marginLeft = `${_modalOffsetPosition}px`;
+                // console.log('_modalPosition: ', _modalOffsetPosition)
+            }
+
+        }
+
+
+
+
+        // STEP 6:
+        //-----------
+        // no data label
+        popwinNoMatchInit();
+
+
+
+        // STEP 7:
+        //-----------
+        // Scrollbar position synchronization
+        if (scrollbarInit) syncListContentScrollBody();
+        
+
+
+    }
+
+
+    function popwinPosHide() {
+
+        const _modalRef: any = document.querySelector(`#custom-select__options-wrapper-${idRes}`);
+
+        if (_modalRef !== null && listContentRef.current !== null) {
+
+
+            // remove classnames and styles
+            _modalRef.classList.remove('active');
+            listContentRef.current.style.removeProperty('height');
+
+            // remove data-* attibutes
+            popwinContainerHeightReset();
+
+
+            // display all filtered items
+            const _items = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'));
+            _items.forEach((node: any) => {
+                node.classList.remove('hide');
+            });
+
+
+            // nomatch & button of select all 
+            const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+            const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
+            _noDataDiv.classList.add('hide');
+            if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
+
+
+        }
+
+
+    }
+
+
+    function popwinFilterItems(val: any) {
+        if (listContentRef.current === null) return;
+
+        [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).forEach((node: any) => {
+
+            // Avoid fatal errors causing page crashes
+            const _queryString = typeof node.dataset.querystring !== 'undefined' && node.dataset.querystring !== null ? node.dataset.querystring : '';
+            const _val = typeof val !== 'undefined' && val !== null ? val : '';
+
+
+            // STEP 1
+            //========
+            // @@@ This code is triggered only if a custom request is used to update "options" @@@
+            // If the condition is true, skip the loop and move on to the next node.
+            if (fetchUpdate && _val == ' ') {
+                return;
+            }
+
+
+            // STEP 2
+            //========
+            // @@@ This code is triggered only if a custom request is used to update "options" @@@
+            // If the condition is true, skip the loop and move on to the next node.
+            if (fetchUpdate && _val != '' && isSingleSpecialChar(_val)) {
+                return;
+            }
+
+
+            // STEP 3
+            //========
+            if (
+                (
+                    _queryString.split(',').some((l: any) => l.charAt(0) === _val.toLowerCase()) ||
+                    _queryString.split(',').some((l: any) => l.replace(/ /g, '').indexOf(_val.toLowerCase()) >= 0) ||
+                    node.dataset.label.toLowerCase().indexOf(_val.toLowerCase()) >= 0
+                ) &&
+                _val != ''
+            ) {
+                node.classList.remove('hide');
+            } else {
+                node.classList.add('hide');
+            }
+
+        });
+
+        // Determine if all options are hidden
+        const allHidden = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'))
+            .every((node: any) => node.classList.contains('hide'));
+
+   
+        // no data label
+        popwinNoMatchInit();
+
+
+        // display all filtered items
+        const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
+        const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+        if ((val === null ? '' : val).replace(/\s/g, "") === '') {
+            [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item')).forEach((node: any) => {
+                node.classList.remove('hide');
+            });
+            _noDataDiv.classList.add('hide');
+            if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
+        }
+
+        // filter status
+        setFilterItemsHasNoMatchData(allHidden);
+
+
+        // Appropriate list container height
+        popwinContainerHeightAdjust();
+
+
+    }
+
+    function popwinContainerHeightAdjust() {
+        if (listContentRef.current === null) return;
+
+        let oldHeight = listContentRef.current.dataset.height;
+        let filteredHeight = listContentRef.current.firstChild.clientHeight;
+
+        // height restrictions
+        oldHeight = listContainerHeightLimit(oldHeight);
+        filteredHeight = listContainerHeightLimit(filteredHeight);
+
+
+        if (parseFloat(oldHeight) > filteredHeight) {
+            listContentRef.current.style.height = filteredHeight + 'px';
+            console.log('popwinContainerHeightAdjust - height changed to:', filteredHeight);
+        } else {
+            listContentRef.current.style.height = oldHeight + 'px';
+            console.log('popwinContainerHeightAdjust - height kept as:', oldHeight);
+        }
+
+    }
+
+
+
+
+    function popwinNoMatchInit() {
+        if (listContentRef.current === null) return;
+
+        const _btnSelectAll = listContentRef.current.querySelector('.custom-select-multi__control-option-item--select-all');
+        const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+        const _items = [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item'));
+        const itemsDoNotExist = _items.every((node: any) => {
+            if (!node.classList.contains('hide')) {
+                return false;
+            }
+            return true;
+        });
+
+        if (itemsDoNotExist) {
+            _noDataDiv.classList.remove('hide');
+            if (_btnSelectAll !== null) _btnSelectAll.classList.add('hide');
+        } else {
+            _noDataDiv.classList.add('hide');
+            if (_btnSelectAll !== null) _btnSelectAll.classList.remove('hide');
+        }
+
+    }
+
+
+    function popwinContainerHeightReset() {
+        if (listContentRef.current === null) return;
+
+        // remove data-* attibutes
+        listContentRef.current.removeAttribute('data-height');
+        listContentRef.current.removeAttribute('data-pos');
+
+        //
+        if (selectInputRef.current) selectInputRef.current.value = '';
+        
+
+    }
+
+
+    
+    function cancel() {
+        // hide list
+        setIsOpen(false);
+        if (!MULTI_SEL_VALID) popwinPosHide();
+
+        if (MANUAL_REQ) {
+            // restore to static data
+            setOptionsData(staticOptionsData);
+        } else {
+            setOptionsData(orginalData);
+        }
+
+        // update temporary value
+        setControlTempValue(null);
+
+        // update filter status
+        setFilterItemsHasNoMatchData(false);
+
+
+        // reset Select All status (for "Single selection")
+        setUserInputboxIsAllSelected(false);
+
+
+        // Unlocks the page
+        if (LOCK_BODY_SCROLL) enableBodyScroll(document.querySelector('body'));
+    }
+
+    function activate() {
+
+        // trigger the first asynchronous request when the options area is expanded
+        if (!FIRST_REQUEST_AUTO && !firstRequestExecuted) {
+            let curValue: any = defaultValue;
+        
+            if (typeof curValue === 'undefined') {
+                curValue = value;
+            }
+    
+            handleFirstFetch(curValue).then((response: any) => {
+                if (response.length > 0) {
+                    // nomatch
+                    const _noDataDiv = listContentRef.current.querySelector('.custom-select-multi__control-option-item--nomatch');
+                    _noDataDiv.classList.add('hide');
+
+                    // After the data is loaded, reinitialize the pop-up window position and height
+                    setTimeout(() => {
+                        popwinPosInit();
+                    }, 0);
+                }
+            });
+
+            //
+            setFirstRequestExecuted(true);
+        }
+
+        // show list
+        setIsOpen(true);
+
+        // pop win initalization
+        setTimeout(() => {
+            popwinPosInit();
+        }, 0);
+
+        // make sure the event handler is registered
+        if (orginalData.length === 0) {
+            setTimeout(() => {
+                // no data label
+                popwinNoMatchInit();
+            }, 500);
+
+        }
+
+        if (MANUAL_REQ) {
+            // display static data
+            setOptionsData(staticOptionsData);
+        } else {
+            // restore data
+            setOptionsData(orginalData);
+        }
+
+
+        // When you select multiple times, it automatically focuses on the search input box
+        if (MULTI_SEL_VALID) {
+            selectInputRef.current.select();
+        }
+
+
+        // Every time the input changes or the search button is clicked, a data request will be triggered
+        // !!! If the default data is empty, the pop-up window is not displayed
+        if (MANUAL_REQ && (controlTempValue === '' || controlTempValue === null) && !hasDefaultOptions) {
+            setTimeout(() => {
+                popwinPosHide();
+            }, 0);
+        }
+        
+
+        // update temporary value
+        setControlTempValue('');
+
+        
+
+
+        // Locks the page
+        //
+        // Get a target element that you want to persist scrolling for (such as a modal/lightbox/flyout/nav).
+        // Specifically, the target element is the one we would like to allow scroll on (NOT a parent of that element).
+        // This is also the element to apply the CSS '-webkit-overflow-scrolling: touch;' if desired.
+        if (LOCK_BODY_SCROLL) disableBodyScroll(document.querySelector('body'));
+
+
+    }
+    
+
+    function fixFocusStatus() {
+        // When selecting multiple times, in order to avoid losing 
+        if (MULTI_SEL_VALID) handleFocus(selectInputRef.current);
+    }
+
+    async function handleSelect(el: any, dataInput: any = false, valueArr: any[] = [], labelArr: any[] = []) {
+
+        if (typeof el === 'undefined') return;
+
+        const curItem: any = el === null ? (isObject(dataInput) ? dataInput : JSON.parse(dataInput)) : optionsData[Number(el.currentTarget.dataset.index)];
+        
+
+        // get options
+        const options = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.no-match)'));
+
+
+        // current control of some option
+        const curBtn: any = options.filter((node: HTMLElement) => node.dataset.itemdata == JSON.stringify(curItem))[0];
+
+       
+        // Determine whether there is a callback
+        const noCallback = typeof curItem.callback === 'undefined';
+        
+        // ==========================================================================
+        // Whether to cancel or not
+        // ==========================================================================
+        if (noCallback) {
+            // cancel
+            if (!MULTI_SEL_VALID) {
+                cancel();
+            }
+
+            //remove focus style
+            if (!MULTI_SEL_VALID) {
+                rootRef.current?.classList.remove('focus');
+            }
+        }
+
+
+
+        // update value * label
+        if (dataInput) {
+
+            // ==========================================================================
+            // Use the "keyboard" to trigger
+            // ==========================================================================
+
+            const _data = isObject(dataInput) ? dataInput : JSON.parse(dataInput);
+            const _value = _data.value;
+            const _label = _data.label;
+
+            // ++++++++++++++++++++
+            // Callback
+            // ++++++++++++++++++++
+            _data.callback?.();
+
+
+            // ++++++++++++++++++++
+            // Single selection
+            // ++++++++++++++++++++
+            // clear all active classes of options 
+            // (Avoid using the keyboard to select and two actives will appear after clicking on a non-selected option.)
+            if (noCallback) {
+                options.forEach((node: any) => {
+                    node.classList.remove('active');
+                });
+            }
+
+            // If there is a callback, delete the activated style
+            if (!noCallback) {
+                setTimeout(() => {
+                    curBtn.classList.remove('active', 'disabled');
+                }, 0);
+            }
+
+
+
+            //
+            setControlValue(_value);
+            setControlLabel(formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
+
+
+            // ++++++++++++++++++++
+            // Multiple selection
+            // ++++++++++++++++++++
+            let currentControlValueArr: any[] = JSON.parse(JSON.stringify(valueArr));
+            let currentControlLabelArr: any[] = JSON.parse(JSON.stringify(labelArr));
+
+            if (MULTI_SEL_VALID) {
+
+                const $el = el === null ? curBtn : el.currentTarget;
+
+
+                // update option checkboxes
+                const _selected = $el.dataset.selected;
+                const _selectedVal = _selected == 'true' ? true : false;
+                if (_selectedVal) {
+                    //#########
+                    // remove item
+                    //#########
+                    $el.dataset.selected = 'false';
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.add('d-none');
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.remove('d-none');
+
+                    //
+                    setControlArr((prevState: any) => {
+
+                        // update temporary value
+                        setControlTempValue(prevState.labels.length >= 0 ? null : (VALUE_BY_BRACKETS ? convertArrToValByBrackets(prevState.labels) : prevState.labels.join(',')));
+
+                        return {
+                            labels: removeItemOnce(prevState.labels, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER)),
+                            values: removeItemOnce(prevState.values, _value)
+                        }
+                    });
+
+
+                    currentControlValueArr = removeItemOnce(currentControlValueArr, _value);
+                    currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
+
+
+                } else {
+                    //#########
+                    // add item
+                    //#########
+                    $el.dataset.selected = 'true';
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.remove('d-none');
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.add('d-none');
+
+                    //
+                    setControlArr((prevState: any) => {
+
+                        // update temporary value
+                        setControlTempValue(prevState.labels.length >= 0 ? null : (VALUE_BY_BRACKETS ? convertArrToValByBrackets(prevState.labels) : prevState.labels.join(',')));
+
+                        return {
+                            labels: [...prevState.labels, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER)],
+                            values: [...prevState.values, _value]
+                        }
+                    });
+
+                    currentControlValueArr.push(_value);
+                    currentControlLabelArr.push(_label);
+
+                }
+
+                // Appropriate multi-item container height
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
+
+
+                // active current option
+                if (noCallback) {
+                    setTimeout(() => {
+                        $el.classList.add('active');
+                    }, 0);
+
+                }
+
+
+
+            }
+
+            //
+            if (noCallback && typeof (onChange) === 'function') {
+                
+                await onChange?.(
+                    selectInputRef.current,
+                    valueInputRef.current,
+                    !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
+                );
+
+
+                //
+                selectInputRef.current?.blur();
+            }
+
+
+
+
+        } else {
+
+            // ==========================================================================
+            // Use the "mouse" to trigger
+            // ==========================================================================
+
+            const _value = typeof curItem !== 'undefined' ? curItem.value : '';
+            const _label = typeof curItem !== 'undefined' ? curItem.label : '';
+
+
+
+            // ++++++++++++++++++++
+            // Callback
+            // ++++++++++++++++++++
+            curItem.callback?.();
+
+            // ++++++++++++++++++++
+            // Single selection
+            // ++++++++++++++++++++
+
+            // clear all active classes of options
+            // (Avoid using the keyboard to select and two actives will appear after clicking on a non-selected option.)
+            if (noCallback) {
+                options.forEach((node: any) => {
+                    node.classList.remove('active');
+                });
+
+            }
+
+
+
+            // If there is a callback, delete the activated style
+            if (!noCallback) {
+                setTimeout(() => {
+                    curBtn.classList.remove('active', 'disabled');
+                }, 0);
+            }
+
+
+
+            //
+            setControlValue(_value);
+            setControlLabel(formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
+
+
+            // ++++++++++++++++++++
+            // Multiple selection
+            // ++++++++++++++++++++
+            let currentControlValueArr: any[] = JSON.parse(JSON.stringify(controlArr.values));
+            let currentControlLabelArr: any[] = JSON.parse(JSON.stringify(controlArr.labels));
+
+            if (MULTI_SEL_VALID) {
+
+
+                const $el = el === null ? curBtn : el.currentTarget;
+
+
+                // update option checkboxes
+                const _selected = $el.dataset.selected;
+                const _selectedVal = _selected == 'true' ? true : false;
+                if (_selectedVal) {
+                    //#########
+                    // remove item
+                    //#########
+                    $el.dataset.selected = 'false';
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.add('d-none');
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.remove('d-none');
+
+
+                    //
+                    setControlArr((prevState: any) => {
+
+                        // update temporary value
+                        setControlTempValue(prevState.labels.length >= 0 ? null : (VALUE_BY_BRACKETS ? convertArrToValByBrackets(prevState.labels) : prevState.labels.join(',')));
+
+                        return {
+                            labels: removeItemOnce(prevState.labels, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER)),
+                            values: removeItemOnce(prevState.values, _value)
+                        }
+                    });
+
+                    currentControlValueArr = removeItemOnce(currentControlValueArr, _value);
+                    currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
+
+                } else {
+                    //#########
+                    // add item
+                    //#########
+
+                    $el.dataset.selected = 'true';
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.remove('d-none');
+                    $el.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.add('d-none');
+
+
+                    //
+                    setControlArr((prevState: any) => {
+
+                        // update temporary value
+                        setControlTempValue(prevState.labels.length >= 0 ? null : (VALUE_BY_BRACKETS ? convertArrToValByBrackets(prevState.labels) : prevState.labels.join(',')));
+
+                        return {
+                            labels: [...prevState.labels, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER)],
+                            values: [...prevState.values, _value]
+                        }
+                    });
+
+
+                    currentControlValueArr.push(_value);
+                    currentControlLabelArr.push(_label);
+
+                }
+
+
+                // Appropriate multi-item container height
+                // ！！！set `false` to prevents the scrollbar position from changing when multi-selecting the option is clicked
+                adjustMultiControlContainerHeight(false);
+
+                // active current option
+                if (noCallback) {
+                    setTimeout(() => {
+                        $el.classList.add('active');
+                    }, 0);
+                }
+
+
+
+            }
+
+            //
+            if (noCallback && typeof (onChange) === 'function') {
+            
+                await onChange?.(
+                    selectInputRef.current,
+                    valueInputRef.current,
+                    !MULTI_SEL_VALID ? curItem : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
+                );
+
+
+                //
+                selectInputRef.current?.blur();
+            }
+        }
+
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+
+    }
+
+
+    function updateOptionCheckboxes(type: string) {
+
+        const _labels: any[] = [];
+        const _values: any[] = [];
+
+        [].slice.call(listContentRef.current.querySelectorAll('.custom-select-multi__control-option-item:not(.hide)')).forEach((node: any) => {
+
+            const _label = node.dataset.label;
+            const _value = node.dataset.value;
+
+
+            if (type === 'remove') {
+                //#########
+                // remove item
+                //#########
+                node.dataset.selected = 'false';
+                node.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.add('d-none');
+                node.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.remove('d-none');
+
+                //
+                const _indexLable = _labels.findIndex((item: any) => item == _label);
+                const _indexValue = _values.findIndex((item: any) => item == _value);
+                if (_indexLable !== -1) _labels.splice(_indexLable, 1);
+                if (_indexValue !== -1) _values.splice(_indexValue, 1);
+
+
+            } else {
+                //#########
+                // add item
+                //#########
+                node.dataset.selected = 'true';
+                node.querySelector('.custom-select-multi__control-option-checkbox-selected').classList.remove('d-none');
+                node.querySelector('.custom-select-multi__control-option-checkbox-placeholder').classList.add('d-none');
+
+                //
+                _labels.push(_label);
+                _values.push(_value);
+
+            }
+
+        });
+
+        setControlArr({
+            labels: _labels,
+            values: _values
+        });
+
+
+
+        // Appropriate multi-item container height
+        adjustMultiControlContainerHeight();
+
+        return {
+            labels: _labels,
+            values: _values
+        }
+
+    };
+
+    function updateOptionCheckboxesViaAddSingleItem(data: any) {
+
+        const _labels: any[] = data.labels || [];
+        const _values: any[] = data.values || [];
+
+        setControlArr({
+            labels: _labels,
+            values: _values
+        });
+
+        // Appropriate multi-item container height
+        adjustMultiControlContainerHeight();
+
+    };
+
+
+
+    async function handleSelectAll(event: any) {
+        event.preventDefault();
+        event.stopPropagation();  /* REQUIRED */
+        
+        let _labels: any[] = [];
+        let _values: any[] = [];
+        
+        if (controlArr.values.length === optionsData.length) { // selected all items
+            const { labels, values } = updateOptionCheckboxes('remove');
+            selectedSign.current = false;
+            
+            _labels = labels;
+            _values = values;
+        } else {
+    
+            const { labels, values } = updateOptionCheckboxes(selectedSign.current ? 'remove' : 'add');
+            selectedSign.current = !selectedSign.current;
+
+            _labels = labels;
+            _values = values;
+
+        }
+
+        await onChange?.(
+            selectInputRef.current,
+            valueInputRef.current,
+            multipleSelectionCallback(_values, _labels)
+        );
+
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+
+
+    }
+
+    function handleClearValue(event?: any) {
+        if (typeof event !== 'undefined') {
+            event.preventDefault();
+            event.stopPropagation();  /* REQUIRED */
+        }
+        
+        // It is valid when a single selection
+        const emptyValue: Record<string, string> = { label: '', value: '', queryString: '' };
+        handleSelect(null, JSON.stringify(emptyValue), [], []);
+
+        // update temporary value
+        setControlTempValue(null);
+
+        // update filter status
+        setFilterItemsHasNoMatchData(false);
+
+    }
+
+
+
+    async function handleMultiControlItemRemove(event: any) {
+        event.preventDefault();
+        event.stopPropagation();  /* REQUIRED */
+
+        const valueToRemove = String(event.currentTarget.dataset.value);
+        const getCurrentIndex = controlArr.values.findIndex((item: any) => item.toString() === valueToRemove);
+
+        let currentControlValueArr: any[] = JSON.parse(JSON.stringify(controlArr.values));
+        let currentControlLabelArr: any[] = JSON.parse(JSON.stringify(controlArr.labels));
+
+        const _value = valueToRemove;
+        const _label = controlArr.labels[getCurrentIndex];
+
+
+        setControlArr((prevState: any) => {
+
+            // update temporary value
+            setControlTempValue(prevState.labels.length >= 0 ? null : (VALUE_BY_BRACKETS ? convertArrToValByBrackets(prevState.labels) : prevState.labels.join(',')));
+
+            return {
+                labels: removeItemOnce(prevState.labels, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER)),
+                values: removeItemOnce(prevState.values, _value)
+            }
+        });
+
+        currentControlValueArr = removeItemOnce(currentControlValueArr, _value);
+        currentControlLabelArr = removeItemOnce(currentControlLabelArr, formatIndentVal(_label, INDENT_LAST_PLACEHOLDER));
+
+
+        // Appropriate multi-item container height
+        adjustMultiControlContainerHeight();
+
+
+        //
+        if (typeof (onChange) === 'function') {
+
+            await onChange?.(
+                selectInputRef.current,
+                valueInputRef.current,
+                multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
+            );
+
+
+            //
+            selectInputRef.current?.blur();
+        }
+
+    }
+
+
+
+    function handleShowList() {
+
+        // Reset the out-of-focus marker
+        isBlurringRef.current = false;
+
+        //
+        if (!isOpen) {
+            activate();
+        } else {
+            cancel();
+            if (MULTI_SEL_VALID) popwinPosHide();
+        }
+
+    }
+
+    async function handleFetch(inputVal: any = null) {
+        setFetchLoading(true); 
+
+        // data init
+        const searchStr: string = typeof inputVal === 'string' ? inputVal : (controlTempValue || controlTempValue === '' ? controlTempValue : '');
+        const _oparams: any[] = fetchFuncMethodParams || [];
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : searchStr);
+
+
+        const res = await fetchData((_params).join(','), '', '', false);
+
+        setFetchLoading(false);
+
+        return res;
+    }
+
+
+    async function handleFirstFetch(inputVal: any = null) {
+
+        const _oparams: any[] = fetchFuncMethodParams || [];
+        const _params: any[] = _oparams.map((item: any) => item !== '$QUERY_STRING' ? item : (MANUAL_REQ ? QUERY_STRING_PLACEHOLDER : ''));
+        const res = await fetchData((_params).join(','), finalRes(inputVal), inputVal);
+
+        // Set an identifier indicating that the first request has been completed
+        if (!handleFirstFetchCompleted) setHandleFirstFetchCompleted(true);
+
+        return res;
+    }
+
+
+    function handleComposition(event: any) {
+
+        if (event.type === 'compositionstart' || event.type === 'compositionend') {
+            //fire change method to update for Chrome v53
+            handleChange(event);
+        }
+    }
+
+
+
+    function handleChange(event: any) {
+
+        const val = event.target.value;
+
+        //Calculates the position of the blinking cursor
+        setBlinkingPosStart(getTextWidth(event.target, blinkingPosFauxRef.current, blinkingCursorPosDivRef.current));
+
+        // update temporary value
+        setControlTempValue(val);
+
+        //
+        handleChangeFetchSafe(val);
+
+        // Fixed an out-of-focus issue
+        fixFocusStatus();
+        
+        // Every time the input changes or the search button is clicked, a data request will be triggered
+        if (MANUAL_REQ && val !== '') {
+            popwinPosInit();
+        }
+
+    }
+
+    //
+    function handleFocus(event: any) {
+
+        rootRef.current?.classList.add('focus');
+
+        //
+        onFocus?.(selectInputRef.current);
+        
+    }
+
+    function handleBlur(event: any) {
+
+        // Set the out-of-focus marker
+        isBlurringRef.current = true;
+
+
+        // Fix the focus issue with using the "Tabs" and "Enter" keys
+        //
+        //
+        rootRef.current?.classList.remove('focus');
+
+        if (!MULTI_SEL_VALID) {
+            if (!isOpen) {
+                cancel();
+                if (MULTI_SEL_VALID) popwinPosHide();
+            }
+        } else {
+            if (listContentRef.current) listContentRef.current.focus();
+        }
+
+
+        setTimeout(() => {
+            onBlur?.(selectInputRef.current);
+        }, 300);
+    }
+
+
+    function generateInputFocusStr() {
+        return controlTempValue || controlTempValue === '' ? (controlTempValue.length === 0 ? BLINKING_CURSOR_STR : controlTempValue) : (placeholder || '');
+    }
+
+    function hideBlinkingCursor() {
+        return (generateInputFocusStr() === placeholder && placeholder !== '' && typeof placeholder !== 'undefined') || (controlTempValue === null || controlTempValue.length === 0);
+    }
+
+    function optionFocus(type: string) {
+
+        return new Promise(function (resolve) {
+
+            // Determine the "active" class name to avoid listening to other unused components of the same type
+            if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
+
+
+            // 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'));
+
+
+            // get the next element in the list, "%" will loop around to 0
+            let nextIndex;
+            if (type === 'increase') {
+                nextIndex = currentIndex + 1 % options.length;
+            } else {
+                nextIndex = (currentIndex < 0 ? options.length : currentIndex) - 1 % options.length;
+            }
+
+
+
+            //only one
+            if (options.length === 1) nextIndex = 0;
+
+
+            if (!isNaN(nextIndex)) {
+                options.forEach((node: any, index: number) => {
+                    node?.classList.remove('active');
+                });
+
+                const targetOption = options[nextIndex] as HTMLElement;
+                if (typeof targetOption !== 'undefined' && !targetOption.classList.contains('no-match')) {
+                    targetOption.classList.add('active');
+
+                    keyboardSelectedItem.current = targetOption;
+                    resolve(targetOption);
+                }
+
+            }
+        });
+
+
+    }
+
+
+    async function handleKeyPressed(event: KeyboardEvent<HTMLDivElement>) {
+        const key = event.code;
+
+        //
+        onKeyPressed?.(
+            event,
+            selectInputRef.current,
+            valueInputRef.current
+        );
+
+
+        if (!isOpen) return;
+
+        let res: any = null;
+
+        if (key === 'Enter' || key === 'NumpadEnter') {
+            event.preventDefault();
+
+            // Determine the "active" class name to avoid listening to other unused components of the same type
+            if (listRef.current === null || !rootRef.current.classList.contains('active')) return;
+
+            // Avoid selecting options that are disabled
+            if (keyboardSelectedItem.current !== null && keyboardSelectedItem.current.classList.contains('disabled')) return;
+
+            if (listRef.current !== null) {
+                const currentIndex = await listRef.current.dataset.data;
+
+
+                if (typeof currentIndex !== 'undefined') {
+
+
+                    const currentData = optionsData[Number(currentIndex)];
+                    const currentControlValueArr: any[] = [];
+                    const currentControlLabelArr: any[] = [];
+
+                    const htmlOptions = [].slice.call(listRef.current.querySelectorAll('.list-group-item:not(.hide):not(.no-match)'));
+
+                    htmlOptions.forEach((node: any) => {
+                        node.classList.remove('active');
+
+                        // multiple options
+                        if (node.classList.contains('item-selected')) {
+                            currentControlValueArr.push(node.dataset.value);
+                            currentControlLabelArr.push(node.dataset.label);
+                        }
+
+                    });
+
+
+                    handleSelect(null, currentData, currentControlValueArr, currentControlLabelArr);
+
+                    //
+                    if (typeof (onChange) === 'function') {
+
+                        await onChange?.(
+                            selectInputRef.current,
+                            valueInputRef.current,
+                            !MULTI_SEL_VALID ? currentData : multipleSelectionCallback(currentControlValueArr, currentControlLabelArr)
+                        );
+
+
+                        //
+                        selectInputRef.current?.blur();
+                    }
+
+                }
+            }
+        }
+
+        if (key === 'ArrowUp') {
+            res = await optionFocus('decrease');
+
+        }
+
+        if (key === 'ArrowDown') {
+            res = await optionFocus('increase');
+        }
+
+
+        // temporary data
+        if (res !== null) listRef.current.dataset.data = res.dataset.index;
+
+
+    }
+
+    function handleDocOut(e: any) {
+
+        if (e.target.closest('.custom-select__options-wrapper') === null && e.target.closest('.custom-select__wrapper') === null) {
+            // cancel
+            cancel();
+            if (MULTI_SEL_VALID) popwinPosHide();
+
+            // DO NOT USE "handleBlur(null)"
+        }
+    }
+
+
+    // Select all detection functions in the input box (for "Single selection")
+    function checkUserInputboxIsAllSelected(e: any) {
+        const input = e.target;
+        if (input && typeof input.selectionStart === 'number' && typeof input.selectionEnd === 'number') {
+            setUserInputboxIsAllSelected(input.selectionStart === 0 && input.selectionEnd === input.value.length && input.value.length > 0);
+        } else {
+            setUserInputboxIsAllSelected(false);
+        }
+    }
+
+
+    useEffect(() => {
+
+        // Call a function when the component has been rendered completely
+        //--------------
+        onLoad?.(selectInputRef.current, valueInputRef.current, finalRes(value));
+
+
+        // update incoming data
+        //--------------
+        setIncomingData(data);
+
+
+        // data init
+        //--------------
+        if (FIRST_REQUEST_AUTO) {
+            handleFirstFetch(value);
+        } else {
+            if (MULTI_SEL_VALID) {
+                // Appropriate multi-item container height
+                setTimeout(() => {
+                    adjustMultiControlContainerHeight();
+                }, 0);
+            }
+        }
+
+        // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
+        // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
+        if (chkValueExist(value)) {
+            // ++++++++++++++++++++
+            // Single selection
+            // ++++++++++++++++++++
+            if (typeof value === 'object' && !Array.isArray(value) && value !== null) {
+                if (typeof value.value !== 'undefined' && value.value !== null) setControlValue(value.value as string);
+                if (typeof value.label !== 'undefined' && value.label !== null) setControlLabel(formatIndentVal(value.label, INDENT_LAST_PLACEHOLDER));
+            }
+            
+            // ++++++++++++++++++++
+            // Multiple selection
+            // ++++++++++++++++++++
+            if (MULTI_SEL_VALID) {
+                if (chkValueExist(value) && Array.isArray(value)) {
+
+                    const _currentData: OptionConfig[] = value;
+                    const _defaultValues = _currentData.map((v: OptionConfig) => v.value as string);
+                    const _defaultLabels = _currentData.map((v: OptionConfig) => v.label as string);
+
+                    setControlArr({
+                        labels: _defaultLabels,
+                        values: _defaultValues,
+                    });
+                }
+            }
+
+        } else {
+            // ++++++++++++++++++++
+            // Single selection & Multiple selection
+            // ++++++++++++++++++++
+            if (!FIRST_REQUEST_AUTO) {
+                setControlValue('');
+                setControlLabel('');
+                setControlArr({
+                    labels: [],
+                    values: []
+                });
+            }
+        }
+
+
+
+
+
+        //
+        //--------------
+        return () => {
+            if (LOCK_BODY_SCROLL) clearAllBodyScrollLocks();
+        }
+
+    }, [value, options, data]);
+
+
+    useEffect(() => {
+
+        // update default value (It does not re-render the component because the incoming value changes.)
+        //--------------
+        if (typeof defaultValue !== 'undefined') { //REQUIRED
+
+            // Call a function when the component has been rendered completely
+            //--------------
+            onLoad?.(selectInputRef.current, valueInputRef.current, finalRes(defaultValue));
+
+
+            // data init
+            //--------------
+            if (FIRST_REQUEST_AUTO) {
+                handleFirstFetch(defaultValue);
+            } else {
+               if (MULTI_SEL_VALID) {
+                    // Appropriate multi-item container height
+                    setTimeout(() => {
+                        adjustMultiControlContainerHeight();
+                    }, 0);
+               }
+            }
+
+
+            // Forced assignment does not depend on "fetch" or "firstRequestAutoExe"
+            // Don't use "value.value && value.label" directly, if it is empty, it will be treated as FALSE
+            if (chkValueExist(defaultValue)) {
+                // ++++++++++++++++++++
+                // Single selection
+                // ++++++++++++++++++++
+                if (typeof defaultValue === 'object' && !Array.isArray(defaultValue) && defaultValue !== null) {
+                    if (typeof defaultValue.value !== 'undefined' && defaultValue.value !== null) setControlValue(defaultValue.value as string);
+                    if (typeof defaultValue.label !== 'undefined' && defaultValue.label !== null) setControlLabel(formatIndentVal(defaultValue.label, INDENT_LAST_PLACEHOLDER));
+                }
+
+                // ++++++++++++++++++++
+                // Multiple selection
+                // ++++++++++++++++++++
+                if (MULTI_SEL_VALID) {
+                    if (chkValueExist(defaultValue) && Array.isArray(defaultValue)) {
+
+                        const _currentData: OptionConfig[] = defaultValue;
+                        const _defaultValues = _currentData.map((v: OptionConfig) => v.value as string);
+                        const _defaultLabels = _currentData.map((v: OptionConfig) => v.label as string);
+
+                        setControlArr({
+                            labels: _defaultLabels,
+                            values: _defaultValues,
+                        });
+                    }
+                }
+
+            } else {
+                // ++++++++++++++++++++
+                // Single selection & Multiple selection
+                // ++++++++++++++++++++
+                if (!FIRST_REQUEST_AUTO) {
+                    setControlValue('');
+                    setControlLabel('');
+                    setControlArr({
+                        labels: [],
+                        values: []
+                    });
+                }
+            }
+
+
+        }
+
+    }, []);
+
+
+    // Fixed an out-of-focus issue
+    //--------------
+    // !!! TIPS:
+    // Fixed: When `fixFocusStatus()` is triggered, the above judgment will be invalidated, and this judgment will be used
+    // Fixed: The pop-up window is not closed due to the mixing of business components
+    useEffect(() => {
+        document.addEventListener('pointerdown', handleDocOut);
+        return () => {
+            document.removeEventListener('pointerdown', handleDocOut);
+        };
+    }, [orginalData]); // Avoid the issue that `setOptionsData(orginalData)` sets the original value to empty on the first entry
+
+
+
+
+    return (
+        <>
+
+            {label ? <><div className="custom-select__label">{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</div></> : null}
+
+            <span ref={blinkingPosFauxRef}></span>
+
+            <div
+                ref={rootRef}
+                data-overlay-id={`custom-select__options-wrapper-${idRes}`}
+                id={`custom-select__wrapper-${idRes}`}
+                className={combinedCls(
+                    'custom-select__wrapper',
+                    clsWrite(wrapperClassName, 'mb-3 position-relative'),
+                    {
+                        'multiple-selection': MULTI_SEL_VALID,
+                        'active focus': isOpen
+                    }
+                )}
+                onKeyDown={handleKeyPressed}
+                
+            >
+
+
+                {/* CLEAR ICON */}
+                {CLEAR_ICON && ( 
+                    (!MULTI_SEL_VALID && controlValue) ||   // Single selection Control
+                    (MULTI_SEL_VALID && controlArr.values.length > 0 ) // Multiple selection Control
+                ) ? (
+                    <span className={`custom-select-clear-icon ${MANUAL_REQ ? 'pos-offset' : ''}`}>
+                        <button
+                            tabIndex={-1}
+                            type="button"
+                            style={disabled ? {
+                                display: 'none'
+                            } : undefined}
+                            onClick={async (e: React.MouseEvent) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                if (MULTI_SEL_VALID) {
+                                    updateOptionCheckboxes('remove');
+
+                                    await onChange?.(
+                                        selectInputRef.current,
+                                        valueInputRef.current,
+                                        multipleSelectionCallback([], [])
+                                    );
+
+                                } else {
+                                    handleClearValue();
+                                }
+
+                            }}
+                        >
+                            <svg width="12px" height="12px" viewBox="0 0 1024 1024">
+                                <path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" />
+                            </svg>
+                        </button>
+                    </span>
+                ) : null}
+                {/* CLEAR ICON */}
+
+
+                {!MULTI_SEL_VALID ? <>
+
+                    {/** INPUT */}
+                    <div className="position-relative">
+                        <input
+                            ref={(node) => {
+                                selectInputRef.current = node;
+                                if (typeof externalRef === 'function') {
+                                    externalRef(node);
+                                } else if (externalRef) {
+                                    externalRef.current = node;
+                                }
+                            }}
+                            tabIndex={tabIndex || 0}
+                            type="text"
+                            data-overlay-id={`custom-select__options-wrapper-${idRes}`}
+                            id={`label-${idRes}`}
+
+                            // Don't use "name", it's just a container to display the label
+                            data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
+                            data-select
+                            className={combinedCls(
+                                clsWrite(controlClassName, 'form-control'),
+                                controlExClassName
+                            )}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            onClick={typeof readOnly === 'undefined' || !readOnly ? handleShowList : () => void (0)}
+                            onChange={handleChange}
+                            onCompositionStart={handleComposition}
+                            onCompositionUpdate={handleComposition}
+                            onCompositionEnd={handleComposition}
+                            disabled={disabled || null}
+                            required={required || null}
+                            readOnly={INPUT_READONLY}
+                            value={controlTempValue || controlTempValue === '' ? controlTempValue : (MULTI_SEL_VALID ? (VALUE_BY_BRACKETS ? convertArrToValByBrackets(formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripTagsAndContent(v))) : formatIndentVal(controlArr.labels, INDENT_LAST_PLACEHOLDER).map((v: any) => stripTagsAndContent(v)).join(',')) : stripTagsAndContent(controlLabel as never))}  // do not use `defaultValue`
+      
+                            style={{ 
+                                cursor: 'pointer', 
+                                color: 'transparent', 
+                                borderBottomWidth: MULTI_SEL_VALID ? '0' : '1px', 
+                                ...style 
+                            }}
+                            autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
+                            autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
+                            spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
+                            {...attributes}
+                   
+                            // Select all detection (for "Single selection")
+                            onSelect={(e) => { checkUserInputboxIsAllSelected(e); }}
+                            onKeyUp={(e) => { checkUserInputboxIsAllSelected(e); }}
+                            onMouseUp={(e) => { checkUserInputboxIsAllSelected(e); }}
+                        />
+
+                    </div>
+                </> : null}
+
+                {/* ========== RESULT CONTAINER ========== */}
+                <input
+                    ref={valueInputRef}
+                    tabIndex={-1}
+                    type="hidden"
+                    id={idRes}
+                    name={name}
+                    value={MULTI_SEL_VALID ? (VALUE_BY_BRACKETS ? convertArrToValByBrackets(controlArr.values) : controlArr.values.join(',')) : controlValue}  // do not use `defaultValue`
+                    onChange={() => void (0)}
+                    {...attributes}
+                />
+
+
+                {/* BLINKING CURSOR */}
+                {!MULTI_SEL_VALID ? <>
+                    <span
+                        className={combinedCls(
+                            'custom-select-multi__control-blinking-following-cursor animated',
+                            {
+                                'd-none': hideBlinkingCursor()
+                            }
+                        )}
+                        style={{
+                            left: `${blinkingPosStart}px`
+                        }}
+                    >
+                        {BLINKING_CURSOR_STR}
+                    </span>
+                </> : null}
+                {/* /BLINKING CURSOR */}
+
+                {/* ========== /RESULT CONTAINER ==========  */}
+
+
+
+                {/*
+                // ++++++++++++++++++++
+                // Single selection Control
+                // ++++++++++++++++++++
+                */}
+                {!MULTI_SEL_VALID ? <div className="custom-select-single__inputplaceholder-wrapper">
+
+                    {/* PLACEHOLDER */}
+                    <div className="custom-select-single__inputplaceholder-inner" style={style}>
+                        <input
+                            tabIndex={-1}
+                            type="text"
+                            className={combinedCls(
+                                clsWrite(controlClassName, 'form-control'),
+                                controlExClassName
+                            )}
+                        />
+
+                        <span ref={blinkingCursorPosDivRef} className={combinedCls(
+                            'custom-select-multi__control-blinking-cursor',
+                            {
+                                'animated': generateInputFocusStr() === BLINKING_CURSOR_STR,
+
+                                // Select all highlights (for "Single selection")
+                                'selected': userInputboxIsAllSelected
+                            }
+                        )}>
+                            {controlTempValue || controlTempValue === '' ? (controlTempValue.length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{controlTempValue}</span>) : (stripTagsAndContent(controlLabel as never).length === 0 ? <span className={`${!hideBlinkingCursor() ? 'control-placeholder' : ''}`}>{generateInputFocusStr()}</span> : <span>{stripTagsAndContent(controlLabel as never)}</span>)}
+                        </span>
+
+                    </div>
+
+
+                    {/* /PLACEHOLDER */}
+
+
+                    {/* ARROW */}
+                    <span className={combinedCls(
+                        'custom-select-arrow',
+                        {
+                            'reverse': isOpen
+                        }
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
+                        {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
+                            <g stroke="none" strokeWidth="1" fill="none">
+                                <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
+                                    <g transform="translate(56.000000, 160.000000)">
+                                        <path d="M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>}
+                    </span>
+
+
+                    {/* /ARROW */}
+
+
+
+                    {/* SEARCH BUTTON */}
+                    {MANUAL_REQ ? <>
+                        <span className="custom-select-multi__control-searchbtn">
+                            <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+                                
+                                handleFetch().then((response: any) => {
+
+                                    // pop win initalization
+                                    setTimeout(() => {
+                                        popwinPosInit();
+                                        popwinFilterItems(controlTempValue);
+
+                                    }, 0);
+                                });
+                                
+                            }}>
+                                <svg width="1em" height="1em" fill="#a5a5a5" viewBox="0 0 16 16">
+                                    <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />
+                                </svg>
+                            </button>
+
+                        </span>
+                    </> : null}
+                    {/* /SEARCH BUTTON */}
+
+
+
+                </div> : null}
+
+
+
+                {/*
+                // ++++++++++++++++++++
+                // Multiple selection Control
+                // ++++++++++++++++++++
+                */}
+                {MULTI_SEL_VALID ? <div ref={rootMultiRef} className="custom-select-multi__inputplaceholder-wrapper">
+      
+                    {/* PLACEHOLDER */}
+                    <div className="custom-select-multi__inputplaceholder-inner">
+                        <div style={MULTI_SEL_ENTIRE_AREA_TRIGGER ? {pointerEvents: 'auto', cursor: 'pointer'} : undefined} onClick={(e: React.MouseEvent) => {
+                            if (MULTI_SEL_ENTIRE_AREA_TRIGGER) {
+                                if (typeof readOnly === 'undefined' || !readOnly) handleShowList();
+                            }
+                        }}>
+                            <ul className="custom-select-multi__list">
+
+                                {typeof multiSelectSelectedItemOnlyStatus !== 'undefined' ? <>
+
+                                    <li className="custom-select-multi__list-item-statusstring" >
+                
+                                        
+                                        {MANUAL_REQ ? <>
+                                            {/* ===================== Manual requests ===================== */}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* ===================== /Manual requests ===================== */}
+
+                                        </> : <>
+                                            {/* ===================== Auto requests ===================== */}
+
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel === 'string' && 
+                                                controlArr.labels.length > 0 && 
+                                                controlArr.labels.length < optionsData.length 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel === 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                multiSelectSelectedItemOnlyStatus.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel === 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    multiSelectSelectedItemOnlyStatus.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
+
+
+                                            {/*-- DEFAULT VALUE ---*/}
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.itemsLabel !== 'string' && 
+                                                controlArr.labels.length > 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.itemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                : 
+                                                null
+                                            }
+                                            {
+                                                typeof multiSelectSelectedItemOnlyStatus.noneLabel !== 'string' && 
+                                                controlArr.labels.length === 0 
+                                                ? 
+                                                MULTI_SEL_SELECTED_STATUS.noneLabel 
+                                                : 
+                                                null
+                                            }
+
+                                            {/* all */}
+                                            {controlArr.labels.length > 0 ? <>
+                                                {
+                                                    typeof multiSelectSelectedItemOnlyStatus.allItemsLabel !== 'string' && 
+                                                    controlArr.labels.length === optionsData.length 
+                                                    ? 
+                                                    MULTI_SEL_SELECTED_STATUS.allItemsLabel.replace('{num}', `${controlArr.labels.length}`) 
+                                                    : 
+                                                    null
+                                                }
+                                            </>: null}
+                                            {/* ===================== /Auto requests ===================== */}
+
+                                        </>}
+
+                                    </li>
+                                </> : <>
+                                
+                                    {/* ITEMS LIST */}
+                                    {typeof renderSelectedValue === 'function' ? <>
+                                        {renderSelectedValue(controlArr, handleMultiControlItemRemove)}
+                                    </> : <>
+                                        {controlArr.labels.map((item: any, index: number) => (
+                                            <li 
+                                                key={'selected-item-' + index}
+                                                data-value={controlArr.values[index]}
+                                                data-label-full={item}
+                                                data-label-text={formatIndentVal(stripTagsAndContent(item), INDENT_LAST_PLACEHOLDER)}
+                                            >
+                                                {formatIndentVal(stripTagsAndContent(item), INDENT_LAST_PLACEHOLDER)}
+
+                                                <a 
+                                                    href="#" 
+                                                    tabIndex={-1} 
+                                                    onClick={handleMultiControlItemRemove} 
+                                                    data-value={controlArr.values[index]}
+                                                ><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000" d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z" /></svg></a>
+                                            </li>
+                                        ))}
+                                    </>} 
+
+                                    
+                                </>}
+
+
+                                {/** INPUT */}
+                                <li className="custom-select-multi__list-item-add">
+                                    <div className="position-relative">
+                                        {/*
+                                            // DO NOT USE following attributes in " Multiple selection Control":
+                                                a) data-select
+                                                b) value
+                                            */}
+                                        <input
+                                            ref={(node) => {
+                                                selectInputRef.current = node;
+                                                if (typeof externalRef === 'function') {
+                                                    externalRef(node);
+                                                } else if (externalRef) {
+                                                    externalRef.current = node;
+                                                }
+                                            }}
+                                            tabIndex={tabIndex || 0}
+                                            type="text"
+                                            data-overlay-id={`custom-select__options-wrapper-${idRes}`}
+                                            id={`label-${idRes}`}
+
+                                            // Don't use "name", it's just a container to display the label
+                                            data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
+                                            className={combinedCls(
+                                                clsWrite(controlClassName, 'form-control'),
+                                                controlExClassName
+                                            )}
+                                            onFocus={handleFocus}
+                                            onBlur={handleBlur}
+                                            onClick={typeof readOnly === 'undefined' || !readOnly ? handleShowList : () => void (0)}
+                                            onChange={handleChange}
+                                            onCompositionStart={handleComposition}
+                                            onCompositionUpdate={handleComposition}
+                                            onCompositionEnd={handleComposition}
+                                            disabled={disabled || null}
+                                            required={required || null}
+                                            readOnly={INPUT_READONLY}
+                                            placeholder={placeholder}
+                                            style={style}
+                                            autoComplete={typeof autoComplete === 'undefined' ? 'off' : autoComplete}
+                                            autoCapitalize={typeof autoCapitalize === 'undefined' ? 'off' : autoCapitalize}
+                                            spellCheck={typeof spellCheck === 'undefined' ? false : spellCheck}
+                                            {...attributes}
+                                        />
+
+                                    </div>
+
+
+                                </li>
+
+                            </ul>
+
+                        </div>
+
+                    </div>
+                    {/* /PLACEHOLDER */}
+
+
+
+
+                    {/* ARROW */}
+                    <span className={combinedCls(
+                        'custom-select-arrow',
+                        {
+                            'reverse': isOpen
+                        }
+                    )} style={{display: MANUAL_REQ ? 'none' : 'inline-block' }}>
+                        {controlArrow ? controlArrow : <svg width="10px" height="10px" viewBox="0 -4.5 20 20">
+                            <g stroke="none" strokeWidth="1" fill="none">
+                                <g transform="translate(-180.000000, -6684.000000)" className="arrow-fill-g" fill="#a5a5a5">
+                                    <g transform="translate(56.000000, 160.000000)">
+                                        <path d="M144,6525.39 L142.594,6524 L133.987,6532.261 L133.069,6531.38 L133.074,6531.385 L125.427,6524.045 L124,6525.414 C126.113,6527.443 132.014,6533.107 133.987,6535 C135.453,6533.594 134.024,6534.965 144,6525.39">
+                                        </path>
+                                    </g>
+                                </g>
+                            </g>
+                        </svg>}
+                    </span>
+                    {/* /ARROW */}
+
+
+
+                    {/* SEARCH BUTTON */}
+                    {MANUAL_REQ ? <>
+                        <span className="custom-select-multi__control-searchbtn">
+                            <button tabIndex={-1} type="button" className="btn border-end-0 rounded-pill" onClick={(e: React.MouseEvent) => {
+                                e.preventDefault();
+                                e.stopPropagation();
+
+                                handleFetch().then((response: any) => {
+
+                                    // pop win initalization
+                                    setTimeout(() => {
+                                        popwinPosInit();
+                                        popwinFilterItems(controlTempValue);
+
+                                    }, 0);
+                                });
+                            }}>
+                                <svg width="1em" height="1em" fill="#a5a5a5" viewBox="0 0 16 16">
+                                    <path d="M12.027 9.92L16 13.95 14 16l-4.075-3.976A6.465 6.465 0 0 1 6.5 13C2.91 13 0 10.083 0 6.5 0 2.91 2.917 0 6.5 0 10.09 0 13 2.917 13 6.5a6.463 6.463 0 0 1-.973 3.42zM1.997 6.452c0 2.48 2.014 4.5 4.5 4.5 2.48 0 4.5-2.015 4.5-4.5 0-2.48-2.015-4.5-4.5-4.5-2.48 0-4.5 2.014-4.5 4.5z" fillRule="evenodd" />
+                                </svg>
+                            </button>
+
+                        </span>
+                    </> : null}
+
+
+                </div> : null}
+                {/* /SEARCH BUTTON */}
+
+
+
+
+                {optionsData && !hasErr ? <>
+                    <RootPortal show={true} containerClassName="Select">
+
+                        <div
+                            ref={listRef}
+                            id={`custom-select__options-wrapper-${idRes}`}
+                            className={combinedCls(
+                                'custom-select__options-wrapper list-group position-absolute border shadow small',
+                                optionsExClassName,
+                                {
+                                    'multiple-selection': MULTI_SEL_VALID
+                                }
+                            )}
+                            style={{ zIndex: DEPTH, width: WIN_WIDTH, display: 'none' }}
+                            role="tablist"
+                        >
+
+                            <div
+                                className="custom-select__options-contentlist rounded"
+                                style={{ backgroundColor: 'var(--bs-list-group-bg)' }}
+                                tabIndex={0}
+                                ref={listContentRef}
+                            >
+                                <div className="custom-select__options-contentlist-inner">
+
+                                    {/* SELECT ALL BUTTON */}
+                                    {MULTI_SEL_VALID ? <>
+                                        <span
+                                            tabIndex={-1}
+                                            className="list-group-item list-group-item-action border-start-0 border-end-0 text-secondary bg-light custom-select-multi__control-option-item--select-all position-sticky top-0 z-3"
+                                            role="tab"
+                                            style={{ display: multiSelect?.selectAll ? 'block' : 'none' }}
+                                        >
+                                            <span
+                                                tabIndex={-1}
+                                                className="btn btn-secondary"
+                                                dangerouslySetInnerHTML={{
+                                                    __html: controlArr.values.length === optionsData.length ? `${MULTI_DESEL_LABEL}` : `${MULTI_SEL_LABEL}`
+                                                }}
+                                                onClick={handleSelectAll}
+                                            ></span>
+                                        </span>
+                                    </> : null}
+                                    {/* /SELECT ALL BUTTON */}
+
+
+
+                                    {/* CLEAR BUTTON (Only Single selection) */}
+                                    {!MULTI_SEL_VALID ? <>
+                                        {CLEAR_TRIGGER_VALID ? <>
+                                            <span
+                                                tabIndex={-1}
+                                                className="list-group-item list-group-item-action border-start-0 border-end-0 text-secondary bg-light custom-select-multi__control-option-item--clear position-sticky top-0 z-3"
+                                                role="tab"
+                                            >
+                                                <span
+                                                    tabIndex={-1}
+                                                    className="btn btn-secondary"
+                                                    dangerouslySetInnerHTML={{
+                                                        __html: `${CLEAR_TRIGGER_LABEL}`
+                                                    }}
+                                                    onClick={handleClearValue}
+                                                ></span>
+                                            </span>
+                                        </> : null}
+                                    </> : null}
+                                    {/* /CLEAR BUTTON (Only Single selection) */}
+
+
+
+                                    {/* OPTIONS LIST */}
+                                    {fetchLoading && MANUAL_REQ && hasDefaultOptions ? (
+                                        // only loading
+                                        <><button tabIndex={-1} type="button" className="list-group-item list-group-item-action no-match border-0 custom-select-multi__control-option-item--nomatch" disabled>{loadingOutput}</button></>
+                                    ) : (
+                                        <>
+
+                                            {/* NO MATCH & LOADER */}
+                                            <button tabIndex={-1} type="button" className="list-group-item list-group-item-action no-match border-0 custom-select-multi__control-option-item--nomatch hide" disabled>
+                                                {
+                                                    // (1) Handling async data with the click event
+                                                    (!FIRST_REQUEST_AUTO && !handleFirstFetchCompleted) ||
+
+                                                    // (2) Every time the input changes or the search button is clicked, a data request will be triggered
+                                                    (fetchUpdate && !filterItemsHasNoMatchData && controlTempValue !== '')
+                                                ? <>{loadingOutput}</> : <>{fetchNoneInfo}</>}
+                                            </button>
+                                            {/* /NO MATCH & LOADER */}
+
+
+                                            {optionsData ? optionsData.map((item, index) => {
+                                                const startItemBorder = index === 0 ? 'border-top-0' : '';
+                                                const endItemBorder = index === optionsData.length - 1 ? 'border-bottom-0' : '';
+
+
+                                                // disable selected options (only single selection)
+                                                let disabledCurrentOption: boolean = false;
+                                                if (
+                                                    (typeof controlValue !== 'undefined' && controlValue !== null && controlValue !== '') &&
+                                                    (typeof item.value !== 'undefined' && item.value !== null && item.value !== '')
+                                                ) {
+
+                                                    if (!MULTI_SEL_VALID) {
+                                                        const _defaultValue = controlValue.toString();
+                                                        let filterRes: any = [];
+                                                        const filterResQueryValue = optionsData.filter((item: any) => item.value == _defaultValue);
+                                                        const filterResQueryLabel = optionsData.filter((item: any) => item.label == _defaultValue);
+
+                                                        if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
+                                                            filterRes = filterResQueryValue;
+                                                            if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
+                                                        }
+
+                                                        const _targetValue = filterRes.length > 0 ? filterRes[0].value : _defaultValue;
+                                                        const _realValue = item.value.toString();
+
+                                                        if (_realValue === _targetValue && _targetValue !== '') {
+                                                            disabledCurrentOption = true;
+                                                        }
+                                                    }
+
+                                                }
+
+
+
+                                                if (!MULTI_SEL_VALID) {
+
+                                                    // ++++++++++++++++++++
+                                                    // Single selection
+                                                    // ++++++++++++++++++++
+                                                    return <button
+                                                        tabIndex={-1}
+                                                        type="button"
+                                                        data-index={index}
+                                                        key={index}
+                                                        className={combinedCls(
+                                                            'list-group-item list-group-item-action border-start-0 border-end-0 custom-select-multi__control-option-item border-bottom-0',
+                                                            startItemBorder,
+                                                            endItemBorder,
+                                                            {
+                                                                'disabled': item.disabled,
+                                                                'active disabled': disabledCurrentOption,
+                                                                'custom-select-grouptitle': item.group
+                                                            }
+
+                                                        )}
+                                                        data-value={`${item.value}`}
+                                                        data-label={`${item.label}`}
+                                                        data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`}
+                                                        data-itemdata={JSON.stringify(item)}
+                                                        data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
+                                                        role="tab"
+                                                        onClick={handleSelect}
+                                                    >
+                                                        {typeof renderOption === 'function' ? <>
+                                                            {renderOption(item, index)}
+                                                        </> : <>
+                                                            <span dangerouslySetInnerHTML={{
+                                                                __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
+                                                            }}></span>
+                                                        </>}
+                                                    </button>
+
+                                                } else {
+
+                                                    // ++++++++++++++++++++
+                                                    // Multiple selection
+                                                    // ++++++++++++++++++++
+                                                    const itemSelected = multiSelControlOptionExist(controlArr.values, item.value) ? true : false;
+
+                                                    return <button
+                                                        tabIndex={-1}
+                                                        type="button"
+                                                        data-selected={`${itemSelected ? 'true' : 'false'}`}
+                                                        data-index={index}
+                                                        key={index}
+                                                        className={combinedCls(
+                                                            'list-group-item list-group-item-action border-start-0 border-end-0 custom-select-multi__control-option-item border-bottom-0',
+                                                            startItemBorder,
+                                                            endItemBorder,
+                                                            {
+                                                                'list-group-item-secondary item-selected': itemSelected,
+                                                                'disabled': item.disabled,
+                                                                'custom-select-grouptitle': item.group
+
+                                                            }
+                                                        )}
+                                                        data-value={`${item.value}`}
+                                                        data-label={`${item.label}`}
+                                                        data-querystring={`${typeof item.queryString === 'undefined' ? '' : item.queryString}`}
+                                                        data-list-item-label={`${typeof item.listItemLabel === 'undefined' ? '' : item.listItemLabel}`}
+                                                        data-itemdata={JSON.stringify(item)}
+                                                        role="tab"
+                                                        onClick={handleSelect}
+                                                    >
+                                                        <var className={combinedCls(
+                                                            'me-1 custom-select-multi__control-option-checkbox-selected',
+                                                            {
+                                                                'd-none': !itemSelected
+                                                            }
+
+                                                        )}>
+                                                            <svg width="1.2em" height="1.2em" fill="#000000" viewBox="0 0 24 24"><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z" /></svg>
+
+                                                        </var>
+
+                                                        <var className={combinedCls(
+                                                            'me-1 custom-select-multi__control-option-checkbox-placeholder',
+                                                            {
+                                                                'd-none': itemSelected
+                                                            }
+                                                        )}>
+                                                            <svg width="1.2em" height="1.2em" fill="#000000" viewBox="0 0 24 24"><path d="M4 7.2002V16.8002C4 17.9203 4 18.4801 4.21799 18.9079C4.40973 19.2842 4.71547 19.5905 5.0918 19.7822C5.5192 20 6.07899 20 7.19691 20H16.8031C17.921 20 18.48 20 18.9074 19.7822C19.2837 19.5905 19.5905 19.2842 19.7822 18.9079C20 18.4805 20 17.9215 20 16.8036V7.19691C20 6.07899 20 5.5192 19.7822 5.0918C19.5905 4.71547 19.2837 4.40973 18.9074 4.21799C18.4796 4 17.9203 4 16.8002 4H7.2002C6.08009 4 5.51962 4 5.0918 4.21799C4.71547 4.40973 4.40973 4.71547 4.21799 5.0918C4 5.51962 4 6.08009 4 7.2002Z" /></svg>
+                                                        </var>
+
+                                                        {typeof renderOption === 'function' ? <>
+                                                            {renderOption(item, index)}
+                                                        </> : <>
+                                                            <span dangerouslySetInnerHTML={{
+                                                                __html: typeof item.listItemLabel === 'undefined' ? item.label : item.listItemLabel
+                                                            }}></span>
+                                                        </>}
+
+
+                                                    </button>
+
+                                                }
+
+
+                                            }) : null}
+                                        </>
+                                    )}
+                                    {/* /OPTIONS LIST */}
+
+                                </div>
+                            </div>
+
+
+                        </div>
+
+                    </RootPortal>
+
+                </> : null}
+
+
+
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default Select;