funda-ui 4.3.355 → 4.3.721

package/lib/esm/MultipleCheckboxes/index.tsx

@@ -33,6 +33,7 @@ export type MultipleCheckboxesProps = {
     groupWrapperClassName?: string;
     groupLabelClassName?: string;
     inline?: boolean;
+    defaultValue?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -74,6 +75,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
         options,
         disabled,
         required,
+        defaultValue,
         value,
         label,
         name,
@@ -177,10 +179,10 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
 
 
 
-    async function fetchData(params: any) {
+    async function fetchData(params: any, inputDefault: any) {
 
         // set default value
-        if (typeof value !== 'undefined' && value !== '') rootRef.current.dataset.value = value;
+        if (typeof inputDefault !== 'undefined' && inputDefault !== '') rootRef.current.dataset.value = inputDefault;
 
         //
         if (typeof fetchFuncAsync === 'object') {
@@ -207,7 +209,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
 
 
             //
-            initDefaultValue(value, _ORGIN_DATA); // value must be initialized
+            initDefaultValue(inputDefault, _ORGIN_DATA); // value must be initialized
 
 
             //
@@ -225,7 +227,7 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
             optionsDataInit = removeArrDuplicateItems(optionsDataInit, 'value');
 
             //
-            initDefaultValue(value, optionsDataInit); // value must be initialized
+            initDefaultValue(inputDefault, optionsDataInit); // value must be initialized
 
             //
             setDataInit(optionsDataInit); // data must be initialized
@@ -540,12 +542,23 @@ const MultipleCheckboxes = forwardRef((props: MultipleCheckboxesProps, externalR
         // data init
         //--------------
         const _params: any[] = fetchFuncMethodParams || [];
-        fetchData((_params).join(','));
+        fetchData((_params).join(','), value);
 
 
     }, [value, options]);
 
 
+    useEffect(() => {
+
+        // update default value (It does not re-render the component because the incoming value changes.)
+        //--------------
+        if (typeof defaultValue !== 'undefined') { //REQUIRED
+            const _params: any[] = fetchFuncMethodParams || [];
+            fetchData((_params).join(','), defaultValue);
+        }
+
+    }, []);
+
     return (
         <>
 

package/lib/esm/MultipleSelect/ItemList.tsx

@@ -7,6 +7,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 import { formatIndentVal, multiSelControlOptionExist } from './multiple-select-utils/func';
 
 /* Recursively nested components to traverse nodes

package/lib/esm/MultipleSelect/index.tsx

@@ -1,5 +1,4 @@
-import React, { useState, useEffect, useRef, forwardRef } from 'react';
-
+import React, { useState, useEffect, useRef, forwardRef, useImperativeHandle } from 'react';
 
 
 import useComId from 'funda-utils/dist/cjs/useComId';
@@ -33,6 +32,7 @@ export interface OptionConfig {
 
 
 export type MultipleSelectProps = {
+    contentRef?: React.ForwardedRef<any>; // could use "Array" on contentRef.current, such as contentRef.current[0], contentRef.current[1]
     wrapperClassName?: string;
     childClassName?: string;
     wrapperMinHeight?: string;
@@ -50,6 +50,7 @@ export type MultipleSelectProps = {
     doubleIndent?: boolean;
     alternateCollapse?: boolean;
     arrow?: React.ReactNode;
+    defaultValue?: string;
     value?: string;
     label?: React.ReactNode | string;
     name?: string;
@@ -70,6 +71,8 @@ export type MultipleSelectProps = {
     fetchFuncMethodParams?: any[];
     fetchCallback?: (data: any) => void;
     onFetch?: (data: any) => void;
+    onAddAll?: (e: any, data: any, dataStr: any) => void;
+    onRemoveAll?: (e: any, data: any, dataStr: any) => void;
     onChange?: (e: any, data: any, dataStr: any, currentData: any, type: string) => void;
 
 };
@@ -77,6 +80,7 @@ export type MultipleSelectProps = {
 
 const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any) => {
     const {
+        contentRef,
         wrapperClassName,
         childClassName,
         wrapperMinHeight,
@@ -98,6 +102,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         disabled,
         required,
         appendControl,
+        defaultValue,
         value,
         label,
         name,
@@ -110,11 +115,13 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         fetchFuncMethodParams,
         fetchCallback,
         onFetch,
+        onAddAll,
+        onRemoveAll,
         onChange,
         ...attributes
     } = props;
 
-    
+
     const UN_ATTACHED_SELECT = typeof unattachedSelect === 'undefined' || unattachedSelect === false ? false : true;
     const WRAPPER_MIN_H = typeof wrapperMinHeight === 'undefined' ? '' : wrapperMinHeight;
     const WRAPPER_MIN_W = typeof wrapperMinWidth === 'undefined' ? '' : wrapperMinWidth;
@@ -133,7 +140,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
 
     // return a array of options
-    let optionsDataInit: OptionConfig[] = optionsRes; 
+    let optionsDataInit: OptionConfig[] = optionsRes;
 
 
     //
@@ -142,39 +149,63 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
     //
     const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
     const [hasErr, setHasErr] = useState<boolean>(false);
+    
 
+    // exposes the following methods
+
+    useImperativeHandle(
+        contentRef,
+        () => ({
+            clear: (cb?: any) => {
+                initDefaultValue('', dataInit);
+                cb?.();
+            },
+            /*
+            set([{"label": "Option 1","listItemLabel":"Option 1 (No: 001)","value": "value-1","queryString": "option1"}], () => { console.log('callback') }])
+            */
+            set: (inputData: any[], cb?: any) => {
+                if (! Array.isArray(inputData)) return;
+                
+                initDefaultValue(inputData.map((v: any) => `[${v.value}]`).join(''), dataInit);
+
+                cb?.();
+            }
+        }),
+        [contentRef, dataInit],
+    );
+
+
+    async function fetchData(params: any, inputDefault: any) {
 
-    async function fetchData(params: any) {
-        
         // set default value
-        if (typeof value !== 'undefined' && value !== '') inputRef.current.dataset.value = value;
+        if (typeof inputDefault !== 'undefined' && inputDefault !== '') inputRef.current.dataset.value = inputDefault;
 
         //
-        if ( typeof fetchFuncAsync === 'object' ) {
+        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.' );
+            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 = [];
             }
 
-    
+
             // Set hierarchical categories ( with sub-categories )
-            if ( hierarchical ) {
+            if (hierarchical) {
                 _ORGIN_DATA = addTreeDepth(_ORGIN_DATA);
                 addTreeIndent(_ORGIN_DATA, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
-            
+
             // remove Duplicate objects from JSON Array
             _ORGIN_DATA = removeArrDuplicateItems(_ORGIN_DATA, 'value');
 
@@ -182,22 +213,22 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             setDataInit(_ORGIN_DATA); // data must be initialized
 
             //
-            initDefaultValue(value, _ORGIN_DATA); // value must be initialized
+            initDefaultValue(inputDefault, _ORGIN_DATA); // value must be initialized
 
 
             //
             onFetch?.(_ORGIN_DATA);
-    
+
             return _ORGIN_DATA;
         } else {
 
             // Set hierarchical categories ( with sub-categories )
-            if ( hierarchical ) {
+            if (hierarchical) {
                 optionsDataInit = addTreeDepth(optionsDataInit);
                 addTreeIndent(optionsDataInit, INDENT_PLACEHOLDER, INDENT_LAST_PLACEHOLDER, 'label');
             }
 
-               
+
             // remove Duplicate objects from JSON Array
             optionsDataInit = removeArrDuplicateItems(optionsDataInit, 'value');
 
@@ -207,7 +238,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
 
             //
-            initDefaultValue(value, optionsDataInit); // value must be initialized
+            initDefaultValue(inputDefault, optionsDataInit); // value must be initialized
 
 
 
@@ -225,7 +256,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
     function initDefaultValue(defaultValue: any, options: any[]) {
 
-   
+
         // change the value to trigger component rendering
         if (typeof defaultValue === 'undefined' || defaultValue === '') {
             setValSelected([]);
@@ -246,7 +277,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                         let _data = [...prevState, ...options.filter((item: any) => {
                             return multiSelControlOptionExist(_initVal, item.value);
                         })];
-             
+
                         return uniqueArr(_data);
                     });
                 } else {
@@ -276,7 +307,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         const _label = _listItemLabel === '' ? _li.dataset.label : _listItemLabel;
         const _data = typeof _li.dataset.itemdata !== 'undefined' ? JSON.parse(_li.dataset.itemdata) : {};
 
-   
+
         // set selected items
         setValSelected((prevState) => {
             const newData = JSON.parse(JSON.stringify(prevState));
@@ -305,48 +336,48 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             return _res;
         });
     }
-    
+
     function removeItem(el: HTMLElement) {
         if (el === null) return;
-    
+
         const _li = el;
         const _val = _li.dataset.value;
         const _data = typeof _li.dataset.itemdata !== 'undefined' ? JSON.parse(_li.dataset.itemdata) : {};
-        
-    
+
+
         // set selected items
         setValSelected((prevState) => {
             const newData = JSON.parse(JSON.stringify(prevState));
             const index = newData.findIndex((item: string | number) => item == _val);
             if (index !== -1) newData.splice(index, 1);
-    
+
             const _res = newData;
-    
+
             onChange?.(_li, _res, VALUE_BY_BRACKETS ? convertArrToValByBrackets(_res) : _res.join(','), _data, 'remove');
-    
+
             // show current item
             if (availableListRef.current) {
                 const removedItem = availableListRef.current.querySelector(`li[data-value="${_val}"]`);
                 if (removedItem !== null) removedItem.classList.remove('hide');
             }
-       
-            
+
+
             return _res;
         });
-    
-    
+
+
         // update selected data
         setValSelectedData((prevState) => {
             const newData = JSON.parse(JSON.stringify(prevState));
             const index = newData.findIndex((item: any) => item.value == _val);
             if (index !== -1) newData.splice(index, 1);
-    
+
             const _res = newData;
-    
+
             return _res;
         });
-    
-        
+
+
     }
 
 
@@ -358,13 +389,18 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
         const items = [].slice.call(availableListRef.current.querySelectorAll('li[data-value]'));
         items.forEach((item: any) => {
-            
+
             if (!item.classList.contains('disabled')) {
                 selectItem(item);
             }
-            
+
         });
 
+        //
+        onAddAll?.(event, dataInit.map((v: any) => `${v.value}`), VALUE_BY_BRACKETS ? dataInit.map((v: any) => `[${v.value}]`).join('') : dataInit.map((v: any) => v.value).join(''));
+
+        
+
 
     }
 
@@ -378,6 +414,11 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             removeItem(item);
         });
 
+        //
+        onRemoveAll?.(event, [], '');
+
+        
+
     }
 
     function handleChangeSearch(event: any) {
@@ -388,11 +429,11 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
         const items = [].slice.call(availableListRef.current.querySelectorAll('li[data-value]'));
         items.forEach((item: any) => {
-        
+
             // Avoid fatal errors causing page crashes
             const _label = typeof item.dataset.label !== 'undefined' && item.dataset.label !== null ? item.dataset.label : '';
             const _queryString = typeof item.dataset.querystring !== 'undefined' && item.dataset.querystring !== null ? item.dataset.querystring : '';
-   
+
             if (
                 (
                     _queryString.split(',').some((l: any) => l.charAt(0) === inputVal.toLowerCase()) ||
@@ -405,7 +446,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
             } else {
                 item.classList.add('hide');
             }
-            
+
         });
 
 
@@ -426,20 +467,30 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
         // data init
         //--------------
         const _params: any[] = fetchFuncMethodParams || [];
-        fetchData((_params).join(','));
+        fetchData((_params).join(','), value);
+
 
-    
     }, [value, options, data]);
 
+    useEffect(() => {
+
+        // update default value (It does not re-render the component because the incoming value changes.)
+        //--------------
+        if (typeof defaultValue !== 'undefined') { //REQUIRED
+            const _params: any[] = fetchFuncMethodParams || [];
+            fetchData((_params).join(','), defaultValue);
+        }
+
+    }, []);
 
     return (
         <>
 
-            <div 
+            <div
                 className={combinedCls(
                     'm-select__wrapper',
                     clsWrite(wrapperClassName, 'mb-3')
-                )} 
+                )}
                 ref={rootRef}
                 style={{
                     minWidth: WRAPPER_MIN_W === '' ? 'var(--m-select-wrapper-min-w)' : WRAPPER_MIN_W,
@@ -466,7 +517,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                     id={idRes}
                     name={name}
                     value={VALUE_BY_BRACKETS ? convertArrToValByBrackets(valSelected) : valSelected.join(',')} // do not use `defaultValue`
-                    onChange={() => void(0)}
+                    onChange={() => void (0)}
                     required={required || null}
                     {...attributes}
                 />
@@ -497,7 +548,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                             </div>
                             {/* /SEARCH */}
 
-                            <span className="m-select__title" dangerouslySetInnerHTML={{__html: `${availableHeaderTitle || ''}`}}></span>
+                            <span className="m-select__title" dangerouslySetInnerHTML={{ __html: `${availableHeaderTitle || ''}` }}></span>
 
                             <a href="#" className="m-select__btn--add-all" onClick={handleSelectAll}>{addAllBtnLabel || 'Add all'}</a>
                         </div>
@@ -506,7 +557,7 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
 
                         {/* OPTIONS LIST */}
                         <ItemList
-                             appendControl={appendControl}
+                            appendControl={appendControl}
                             root={rootRef.current}
                             listContainerClassName="m-select__available m-select__options-contentlist"
                             ref={availableListRef}
@@ -529,11 +580,11 @@ const MultipleSelect = forwardRef((props: MultipleSelectProps, externalRef: any)
                     // ++++++++++++++++++++
                     // Selected  Container
                     // ++++++++++++++++++++
-                    */}                    
+                    */}
                     <div className="m-select__selected__container">
                         <div className="m-select__m-select__item-actions m-select__header">
-                            <span className="m-select__count" dangerouslySetInnerHTML={{__html: `${typeof selectedHeaderNote !== 'undefined' ? selectedHeaderNote.replace('{items_num}', valSelectedData.length as never) : ''}`}}></span>
-                            <span className="m-select__title" dangerouslySetInnerHTML={{__html: `${selectedHeaderTitle || ''}`}}></span>
+                            <span className="m-select__count" dangerouslySetInnerHTML={{ __html: `${typeof selectedHeaderNote !== 'undefined' ? selectedHeaderNote.replace('{items_num}', valSelectedData.length as never) : ''}` }}></span>
+                            <span className="m-select__title" dangerouslySetInnerHTML={{ __html: `${selectedHeaderTitle || ''}` }}></span>
                             <a href="#" className="m-select__btn--remove-all" onClick={handleRemoveAll}>{removeAllBtnLabel || 'Remove all'}</a>
                         </div>
 

package/lib/esm/NativeSelect/index.tsx

@@ -109,6 +109,8 @@ const NativeSelect = forwardRef((props: NativeSelectProps, externalRef: any) =>
   
 
     const optionsFormatGroupOpt = (allData: any[]) => {
+        if (!Array.isArray(allData)) return;
+
         allData.forEach((item: any) => {
             if (typeof item.optgroup !== 'undefined') {
                 item.value = String(Math.random());

package/lib/esm/Radio/index.tsx

@@ -11,6 +11,7 @@ import {
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
+
 export interface OptionConfig {
     [propName: string]: string | number | React.ReactNode | boolean;
 }
@@ -29,7 +30,8 @@ export type RadioProps = {
     tableLayout?: boolean;
     tableLayoutClassName?: string;
     tableLayoutCellClassName?: string;
-    value?: string;
+    defaultValue?: string | OptionConfig;
+    value?: string | OptionConfig;
     label?: React.ReactNode | string;
     name?: string;
     disabled?: any;
@@ -71,6 +73,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
         tableLayoutCellClassName,
         disabled,
         required,
+        defaultValue,
         value,
         label,
         name,
@@ -111,6 +114,32 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
     };
 
 
+    const isObject = (value: any) => {
+        return Object.prototype.toString.call(value) === '[object Object]';
+    };
+
+    const optionsFlat = (allData: any[]) => {
+
+        const flatItems: any[] = [];
+
+        allData.forEach((item: any) => {
+            if (typeof item.optgroup !== 'undefined') {
+                item.optgroup.forEach((opt: any) => {
+                    flatItems.push(opt);
+                });
+            } else {
+                flatItems.push(item);
+            }
+        });
+
+        return flatItems;
+    };
+
+
+    const finalRes = (val: any) => {
+        return isObject(val) ? val.value : val;
+    };
+
 
     //
     const [dataInit, setDataInit] = useState<OptionConfig[]>(optionsDataInit);
@@ -176,10 +205,10 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
     }
  
 
-    async function fetchData(params: any) {
+    async function fetchData(params: any, valueToInputDefault: any,  inputDefault: any) {
 
         // set default value
-        if (typeof value !== 'undefined' && value !== '') rootRef.current.dataset.value = value;
+        if (typeof valueToInputDefault !== 'undefined' && valueToInputDefault !== '') rootRef.current.dataset.value = valueToInputDefault;
 
 
         if (rootRef.current) {
@@ -212,15 +241,22 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
                   
             // If the default value is label, match value
-            let _realValue = value;
+            let _realValue = valueToInputDefault;
             let filterRes: any = [];
-            const filterResQueryValue = _ORGIN_DATA.filter((item: any) => item.value == value);
-            const filterResQueryLabel = _ORGIN_DATA.filter((item: any) => item.label == value);
+            const filterResQueryValue = _ORGIN_DATA.filter((item: any) => item.value == valueToInputDefault);
+            const filterResQueryLabel = _ORGIN_DATA.filter((item: any) => item.label == valueToInputDefault);
 
             if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
                 filterRes = filterResQueryValue;
                 if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
                 if (filterRes.length > 0) _realValue = filterRes[0].value;
+
+                // if the default value is Object
+                if (isObject(inputDefault) && filterRes.length === 0) {
+                    filterRes = [inputDefault];
+                }
+
+
             }
     
 
@@ -249,15 +285,21 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
                   
             // If the default value is label, match value
-            let _realValue = value;
+            let _realValue = valueToInputDefault;
             let filterRes: any = [];
-            const filterResQueryValue = optionsDataInit.filter((item: any) => item.value == value);
-            const filterResQueryLabel = optionsDataInit.filter((item: any) => item.label == value);
+            const filterResQueryValue = optionsDataInit.filter((item: any) => item.value == valueToInputDefault);
+            const filterResQueryLabel = optionsDataInit.filter((item: any) => item.label == valueToInputDefault);
 
             if (filterResQueryValue.length === 0 && filterResQueryLabel.length > 0) {
                 filterRes = filterResQueryValue;
                 if (filterResQueryValue.length === 0) filterRes = filterResQueryLabel;
                 if (filterRes.length > 0) _realValue = filterRes[0].value;
+
+                // if the default value is Object
+                if (isObject(inputDefault) && filterRes.length === 0) {
+                    filterRes = [inputDefault];
+                }
+
             }
 
 
@@ -298,22 +340,10 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
     function handleChange(event: any) {
         const val = event.target.value;
-        let curData: any;
-        let currentIndex = event.target.dataset.index;
-
-        // if group
-        if (currentIndex.indexOf('-') >= 0) {
-            const groupIdArr = currentIndex.split('-');
-            const groupIndex = groupIdArr[0];
-            const groupItemIndex = groupIdArr[1];
-            const groupOpts: any = dataInit[groupIndex].optgroup;
-
-            curData = groupOpts[groupItemIndex];
-        } else {
-            curData = dataInit[currentIndex];
-        }
-
+        const curData: Record<string, unknown> = optionsFlat(dataInit).find((v: any) => v.value == val);
+        const currentIndex = event.target.dataset.index;
 
+    
         //----
         // update value
         setControlValue(val);
@@ -375,7 +405,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
         return Array.isArray(dataInit) ? dataInit.map((item: any, index: number) => {
             const requiredVal = index === 0 ? required || null : null;
 
-            const _formatItem = {};
+            const _formatItem: Record<string, unknown> = {};
             Object.keys(item).forEach((key: string) => {
                 if (key !== 'extends') _formatItem[key] = item[key];
             });
@@ -392,7 +422,7 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
 
                     {item.optgroup.map((opt: any, optIndex: number) => {
 
-                        const _formatOpt = {};
+                        const _formatOpt: Record<string, unknown> = {};
                         Object.keys(item).forEach((key: string) => {
                             if (key !== 'extends') _formatOpt[key] = item[key];
                         });
@@ -563,13 +593,24 @@ const Radio = forwardRef((props: RadioProps, externalRef: any) => {
         // data init
         //--------------
         const _params: any[] = fetchFuncMethodParams || [];
-        fetchData((_params).join(','));
+        fetchData((_params).join(','), finalRes(value), value);
 
 
 
     }, [value, options]);
 
 
+    useEffect(() => {
+
+        // update default value (It does not re-render the component because the incoming value changes.)
+        //--------------
+        if (typeof defaultValue !== 'undefined') { //REQUIRED
+            const _params: any[] = fetchFuncMethodParams || [];
+            fetchData((_params).join(','), finalRes(defaultValue), defaultValue);
+        }
+
+    }, []);
+
     return (
         <>