@fto-consult/expo-ui 6.52.6 → 6.53.1

package/src/components/Datagrid/Accordion/Filters.js

@@ -13,20 +13,18 @@ import { Dimensions } from "react-native";
 import Grid from "$ecomponents/Grid";
 import { Pressable } from "react-native";
 import Tooltip from "$ecomponents/Tooltip";
+import { useDatagrid } from "../hooks";
 
 const MIN_WIDTH = 250;
 let windowWidth = Dimensions.get("window").width;
 
-const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
-    const {filters,isLoading,filteredColumns,children,label,testID:cTestID,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,context:customContext,...restProps} = props;
-    const context = defaultObj(customContext);
+const FiltersAccordionComponent = React.forwardRef(({children,filters,filteredColumns,context,label,testID:cTestID,filterTitle:customFilterTitle,visible:customVisible,orOperator,andOperator,onToggleFilters,...rest},ref)=>{
     const testID = defaultStr(testID,"RN_AccordionFilters");
     const [visibleColumns,setVisibleColumns] = React.useState(filteredColumns);
     const [visible,setVisible] = React.useState(defaultBool(customVisible,false));
     const valuesRefs = React.useRef({});
     windowWidth = Dimensions.get("window").width;
     const innerRef = React.useRef(null);
-    const rest = defaultObj(restProps);
     const filterTitle = defaultStr(customFilterTitle,'Filtres');
     const canHandlerFilterRef = React.useRef(0);
     const filteredRef = React.useRef({});
@@ -74,9 +72,6 @@ const FiltersAccordionComponent = React.forwardRef((props,ref)=>{
                             {...rest}
                             {...(isObj(valuesRefs.current[key]) ? valuesRefs.current[key] : {})}
                             dynamicRendered
-                            //isLoading = {isLoading && filteredRef.current[key] ? true : false}
-                            orOperator = {defaultBool(orOperator,filter.orOperator,true)}
-                            andOperator = {defaultBool(andOperator,filter.andOperator,true)}
                             onChange = {(arg)=>{
                                 if(!arg.action && !arg.operator || !arg.field) return;
                                 const canHandle = canHandleFilter(arg);

package/src/components/Datagrid/Common/Common.js

@@ -15,7 +15,7 @@ import {sortBy,isDecimal,defaultVal,sanitizeSheetName,extendObj,isObjOrArray,isO
 import {Datagrid as DatagridContentLoader} from "$ecomponents/ContentLoader";
 import React from "$react";
 import DateLib from "$lib/date";
-import Filter,{canHandleFilter,prepareFilters} from "$ecomponents/Filter";
+import Filter,{canHandleFilter,prepareFilters,compareValues} from "$ecomponents/Filter";
 import {CHECKED_ICON_NAME} from "$ecomponents/Checkbox";
 import { COLUMN_WIDTH,DATE_COLUMN_WIDTH,willConvertFiltersToSQL } from "../utils";
 import { StyleSheet,Dimensions,useWindowDimensions} from "react-native";
@@ -2505,9 +2505,10 @@ export default class CommonDatagridComponent extends AppComponent {
                 datagridMenuItems,
                 ...restCol
             } = header;
+            this.filteredValues = defaultObj(this.filteredValues);
             restCol = Object.clone(defaultObj(restCol));
             let colFilter = defaultVal(restCol.filter,true);
-            field = header.field = restCol.field = defaultStr(header.field,field,headerIndex);
+            const columnField = field = restCol.field = header.field = restCol.field = defaultStr(field,headerIndex);
             delete restCol.filter;
             
             const type = defaultStr(header.jsType,header.type,"text").toLowerCase();
@@ -2533,20 +2534,21 @@ export default class CommonDatagridComponent extends AppComponent {
                 width = Math.max(width,minWidth);
             }
             totalWidths +=width;
-            widths[header.field] = width;
+            widths[columnField] = width;
             const colProps = {id,key}
-            colProps.key = isNonNullString(key)?key : (header.field||("datagrid-column-header-"+headerIndex))
+            colProps.key = isNonNullString(key)?key : (columnField||("datagrid-column-header-"+headerIndex))
             colProps.style = Object.assign({},StyleSheet.flatten(restCol.style));
             if(!visible){
                 colProps.style.display = 'none';
             }
-            const title = header.text = header.text || header.label || header.title||header.field
-            visibleColumnsNames[header.field] = visible ? true : false;
-           
+            visibleColumnsNames[columnField] = visible ? true : false;
+            const label = header.label = header.text = restCol.label = header.text && React.isValidElement(header.text,true) ? header.text : header.label && React.isValidElement(header.label,true)? header.label : columnField;
+            const title = label || header.title && React.isValidElement(header.title,true)? header.title : columnField
+            
             visibleColumns.push({
                 onPress : ()=>{
                     setTimeout(() => {
-                        this.toggleColumnVisibility(header.field);
+                        this.toggleColumnVisibility(columnField);
                     },100);
                     return false;
                 },
@@ -2556,9 +2558,6 @@ export default class CommonDatagridComponent extends AppComponent {
                     onPress = {(e)=>{console.log(e," is pressed toddd config")}}
                 /> : undefined
             });
-            restCol.field = header.field;
-            
-            restCol.label = defaultStr(header.text,header.label) ;
             restCol.type = type;
             if(!restCol.label){
                 console.error(header," has not label or text in datagrid",columns,this.props)
@@ -2588,12 +2587,31 @@ export default class CommonDatagridComponent extends AppComponent {
             const sortedProps =  isColumnSorted ? {...sortedColumn} : {};
             let filterProps = {};
             if(colFilter){
-                const fCol = defaultObj(this.filters[header.field]);
-                this.filters[header.field] = fCol;
-                filterableColumnsNames.push(header.field);
+                const fCol = defaultObj(this.filters[columnField]);
+                this.filters[columnField] = fCol;
+                filterableColumnsNames.push(columnField);
                 delete restCol.sortable;
+                const defaultFilterProps = {
+                    operator : fCol.operator,
+                    action : defaultStr(fCol.originAction,fCol.action),
+                    defaultValue : defaultVal(fCol.defaultValue,restCol.defaultValue),
+                }
+                const filteringVal = this.filteredValues[columnField];
+                if(!isObj(filteringVal)){
+                    this.filteredValues[columnField] = defaultFilterProps;
+                } else {
+                    if("value" in filteringVal){
+                        defaultFilterProps.defaultValue = filteringVal.value;
+                    }
+                    if("operator" in filteringVal){
+                        defaultFilterProps.operator = filteringVal.operator;
+                    }
+                    if("action" in filteringVal){
+                        defaultFilterProps.action = filteringVal.action;
+                    }
+                }
                 filterProps = {
-                    ...restCol,
+                    ...Object.clone(restCol),
                     type,
                     columnIndex,
                     visibleColumnIndex,
@@ -2602,23 +2620,22 @@ export default class CommonDatagridComponent extends AppComponent {
                     sortedColumn :sortedProps,///les props de la columns triée
                     sortedProps,
                     width,
-                    columnField : field,
+                    columnField,
+                    field,
                     index : headerIndex,
                     visible,
-                    key : header.field,
-                    label : defaultStr(header.label,header.text),
-                    orOperator : filterOrOperator,
-                    andOperator : filterAndOperator,
+                    key : columnField,
+                    label,
+                    orOperator : defaultBool(filterOrOperator,header.orOperator,true),
+                    andOperator : defaultBool(this.props.filterAndOperator,header.andOperator,true),
                     searchIconTooltip : 'Filtre',
                     searchIcon : 'filter_list',  
-                    defaultValue : defaultVal(fCol.defaultValue,restCol.defaultValue),
-                    name : header.field,
+                    name : columnField,
                     onClearFilter : this.onClearFilter.bind(this),
                     onChange : this.onFilterChange.bind(this),
-                    operator : fCol.operator,
-                    action : defaultStr(fCol.originAction,fCol.action),
+                    ...defaultFilterProps,
                 };
-                this.currentFilteringColumns[header.field] = filterProps;
+                this.currentFilteringColumns[columnField] = filterProps;
                 this.prepareFilter(filterProps,headerFilters); 
             }
             this.prepareColumn({
@@ -2637,11 +2654,11 @@ export default class CommonDatagridComponent extends AppComponent {
                 //columnDef : header,
                 index : headerIndex,
                 filterProps,
-                key : header.field,
+                key : columnField,
                 filter :colFilter, 
             },headerFilters)
             
-            if(this.props.groupable !== false && header.groupable !== false && !this.isSelectableColumn(header,header.field) && !this.isIndexColumn(header,header.field)){
+            if(this.props.groupable !== false && header.groupable !== false && !this.isSelectableColumn(header,columnField) && !this.isIndexColumn(header,columnField)){
                 const isInSectionListHeader = isObj(sListColumns[field]);
                 if(isInSectionListHeader){
                     nSectionList[field] = {
@@ -2696,6 +2713,8 @@ export default class CommonDatagridComponent extends AppComponent {
         this.preparedColumns.sectionListColumns = sectionListColumns;
         this.preparedColumns.sectionListColumnsMenuItems = sectionListColumnsMenuItems;
         this.preparedColumns.filterableColumnsNames = filterableColumnsNames;
+        this.preparedColumns.filteredValues = this.filteredValues;
+        this.preparedColumns.filtersByColumnsNames = this.currentFilteringColumns; //l'objet contenant pour chaqun des field name, le filterProp correspondant
         return this.preparedColumns;
    }
    getFooterValues(){

package/src/components/Datagrid/{Table → Filters}/Filter.js

@@ -1,22 +1,21 @@
 import React from "$react";
 import View from "$ecomponents/View";
 import Label from "$ecomponents/Label";
-import { useDatagrid } from "./hooks";
+import { useDatagrid } from "../hooks";
 import styles from "./styles";
 import {defaultStr} from "$cutils";
 import theme from "$theme";
-import Filter, {canHandleFilter} from "$ecomponents/Filter";
+import Filter from "$ecomponents/Filter";
 import { getMenuStyle } from "./styles";
 
-export default function DatagridTableFilterComponent({columnField,label,onChange,text,testID,...rest}){
-    const {context,filteredColumns} = useDatagrid();
+export default function DatagridTableFilterComponent({columnField,visible:cVisible,label,text,testID,...rest}){
+    const {context,filteredValues,filteredColumns} = useDatagrid();
     const [visible,setVisible] = React.useState(!!filteredColumns[columnField]);
     testID = defaultStr(testID,"RN_DatagridTableFilterComponent");
     React.useEffect(()=>{
         if(typeof context?.on ==='function'){
             const onToggleVisibility = ({columnField:cField,visible:nVisible})=>{
                 if(columnField === cField && visible !== nVisible){
-                    console.log("toggle ",columnField,nVisible);
                     setVisible(nVisible);
                 }
             }
@@ -26,25 +25,30 @@ export default function DatagridTableFilterComponent({columnField,label,onChange
             }
         }
     },[context]);
+    React.useEffect(()=>{
+        return ()=>{
+        }
+    },[])
+    const filteredProps = Object.assign({},filteredValues[columnField]);
+    if("value" in filteredProps){
+        filteredProps.defaultValue = filteredProps.value;
+        delete filteredProps.value;
+    }
     label = label || text;
     return <View testID={testID+"_DatagridFilterTableContainer"} style={[styles.filter,getMenuStyle(),!visible && styles.hidden]}>
         <View testID={testID+"_DatagridTableFilterContent"} style={[theme.styles.row,theme.styles.alignItemsCenter,theme.styles.justifyContentStart,!visible && styles.hidden]}>
-            {React.isValidElement(label,true) ? <Label numberOfLines={1} style={[styles.filterLabel]}>
+            {React.isValidElement(label,true) ? <Label style={[styles.filterLabel]}>
                 {label} 
-                Un label
             </Label>:null}
             <Filter
                 {...rest}
+                {...filteredProps}
                 withLabel={false}
+                containerProps = {{
+                    style : [styles.filterContainer]
+                }}
                 testID={testID+"_DatagridFilterComponent_"+columnField}
                 anchorProps = {{size:20,style:[theme.styles.noMargin,theme.styles.noPadding]}}
-                onChange = {(...args)=>{
-                    if(!visible){
-                        return;
-                    }
-                    console.log("calling on change ",args);
-                    onChange && onChange(...args);
-                }}
             />
         </View>
     </View>;

package/src/components/Datagrid/{Table → Filters}/FiltersMenu.js

@@ -1,6 +1,6 @@
 import Menu from "$ecomponents/Menu";
 import Icon from "$ecomponents/Icon";
-import { useDatagrid } from "./hooks";
+import { useDatagrid } from "../hooks";
 import {Pressable} from "react-native";
 import {defaultStr} from "$cutils";
 import theme from "$theme";

package/src/components/Datagrid/{Table/Filters.js → Filters/index.js}

@@ -6,18 +6,20 @@ import { StyleSheet,ScrollView } from "react-native";
 import Label from "$ecomponents/Label";
 import Filter from "./Filter";
 import FiltersMenu from "./FiltersMenu";
-import {useDatagrid} from "./hooks";
+import {useDatagrid} from "../hooks";
 
 export default function DatagridTableFiltersComponent({orOperator,andOperator,testID}){
     testID = defaultStr(testID,"RN_DatagridTableFiltersComponent")
-    const {filters,filteredColumns,filterableColumnsNames} = useDatagrid();
-    const [visibleColumns,context,setVisibleColumns] = React.useState(filteredColumns);
-    const valuesRefs = React.useRef({});
+    const {context,filteredColumns,filtersByColumnsNames} = useDatagrid();
+    const fArray = React.useMemo(()=>Object.keys(filteredColumns).filter(v=>!!filteredColumns[v]),[]);
+    const [visibleColumns,setVisibleColumns] = React.useState(fArray);
     React.useEffect(()=>{
         if(typeof context?.on ==='function'){
             const onToggleVisibility = ({columnField,visible})=>{
-                if(visibleColumns[columnField] !== visible){
-                    setVisibleColumns({...visibleColumns,[columnField]:visible});
+                const nVisible = visibleColumns.includes(columnField);
+                if(nVisible !== visible){
+                    const nVisibleColumns = nVisible ? [...visibleColumns].filter((v)=>v !== columnField) : [...visibleColumns,columnField];
+                    setVisibleColumns(nVisibleColumns)
                 }
             }
             context.on("toggleFilterColumnVisibility",onToggleVisibility);
@@ -26,25 +28,18 @@ export default function DatagridTableFiltersComponent({orOperator,andOperator,te
             }
         }
     },[context]);
-    const {content} = React.useStableMemo(()=>{
+    const content = React.useStableMemo(()=>{
         const content = [];
-        Object.map(filters,(filter,index)=>{
-            if(isObj(filter)){ 
-                const {filter:isFiltered,...rest} = filter;
-                if(isFiltered === false) return null;
-                const columnField = defaultStr(filter.field,filter.columnField,String(index));
-                if(!columnField || !visibleColumns[columnField]) return null;
-                content.push(<Filter
-                    {...rest}
-                    //{...(isObj(valuesRefs.current[columnField]) ? valuesRefs.current[columnField] : {})}
-                    columnField={columnField}
-                    dynamicRendered={false}
-                    orOperator = {defaultBool(orOperator,filter.orOperator,true)}
-                    andOperator = {defaultBool(andOperator,filter.andOperator,true)}
-                />)
-            }
-        })
-        return {content};
+        visibleColumns.map((columnField)=>{
+            if(!columnField || !isObj(filtersByColumnsNames[columnField])) return;
+            const filter = filtersByColumnsNames[columnField];
+            content.push(<Filter
+                {...filter}
+                columnField={columnField}
+                dynamicRendered={true}
+            />)
+        });
+        return content;
     },[visibleColumns])
     return <ScrollView horizontal testID={testID+"_FiltersScrollView"}>
         <View testID={testID} style = {[theme.styles.row,styles.container,theme.styles.rowWrap,theme.styles.justifyStart,theme.styles.alignItemsCenter]}>

package/src/components/Datagrid/{Table → Filters}/styles.js

@@ -13,8 +13,12 @@ const styles = StyleSheet.create({
         opacity : 0,
     },
     filterLabel : {
-        fontSize:11,
-    }
+        fontSize:13,
+        marginRight : 7,
+    },
+    filterContainer : {
+        width : undefined,
+    },
 });
 
 export const getMenuStyle = (style)=>([styles.menuItem,{backgroundColor:theme.colors.surface},style]);

package/src/components/Datagrid/SWRDatagrid.js

@@ -193,7 +193,6 @@ const SWRDatagridComponent = React.forwardRef((props,ref)=>{
             if(showProgressRef.current ===false){
                 opts.showError = false;
             }
-            console.log("will fetch ",url,opts);
             if(typeof fetcher =='function'){
                 return fetcher(url,opts);
             }

package/src/components/Datagrid/Table/index.js

@@ -15,7 +15,7 @@ import Footer from "../Footer/Footer";
 import theme from "$theme";
 import Table,{styles as tableStyles} from "$ecomponents/Table";
 import DatagridProvider from "../hooks/Provider";
-import Filters from "./Filters";
+import Filters from "../Filters";
 
 
 const DatagridFactory = (Factory)=>{
@@ -298,11 +298,6 @@ const DatagridFactory = (Factory)=>{
                             /> : null}
                             {rPagination}
                             {progressBar}  
-                            <Filters
-                                testID={testID+"_DatagridTableHeaderFilters"}
-                                orOperator = {this.props.filterOrOperator}
-                                andOperator = {this.props.filterAndOperator}
-                            />
                         </View>
                         {canRenderChart ?
                             <View testID={testID+"_ChartContainer"} {...chartContainerProps} style={[theme.styles.w100,chartContainerProps.style]}>
@@ -320,7 +315,7 @@ const DatagridFactory = (Factory)=>{
                             renderItem = {this.renderFlashListItem.bind(this)}
                             renderSectionHeader = {this.renderFlashListItem.bind(this)}
                             hasFooters = {hasFootersFields && !canRenderChart ? true : false}
-                            showFilters = {false}
+                            showFilters = {showFilters}
                             showFooters = {showFooters && !canRenderChart ? true : false}
                             showHeaders = { canRenderChart ? !!showFilters : true}
                             headerCellContainerProps = {{
@@ -340,7 +335,7 @@ const DatagridFactory = (Factory)=>{
                             data = {this.state.data}
                             footers = {this.getFooterValues()}
                             renderHeaderCell={this.renderHeaderCell.bind(this)}
-                            //renderFilterCell={this.renderFilterCell.bind(this)}
+                            renderFilterCell={this.renderFilterCell.bind(this)}
                             renderFooterCell={this.renderFooterCell.bind(this)}
                             renderEmpty = {this.renderEmpty.bind(this)}
                         />}

package/src/components/Datagrid/hooks/index.js

@@ -7,7 +7,13 @@ export const useDatagrid = x=> {
     if(!t || !t?.context || !t?.context?.state || !t?.context?.state?.data){
         throw "Le composant Datagrid actions doit être enfant d'un contexe de datagrid valide";
     }
-    return t;
+    const {context} = t;
+    const isLoading = context && context.isLoading() || false;
+    const r = typeof context?.getPreparedColumns =='function'? context?.getPreparedColumns() : {};
+    const columns = typeof context?.getColumns =='function' && context.getColumns() || {}
+    r.filtersByColumnsNames = isObj(r.filtersByColumnsNames) ? r.filtersByColumnsNames : {};
+    r.filteredValues = isObj(r.filteredValues) ? r.filteredValues : {};
+    return {...t,...r,isLoading,context,columns}
 };
 export const useDatagridContext = ()=>{
     return useDatagrid()?.context;

package/src/components/Dropdown/index.js

@@ -111,7 +111,6 @@ class DropdownComponent extends AppComponent {
         const previousSelected = this.state.selected;
         const prevValueKey = this.getValueKey(previousSelected);
         const prevItem = prevValueKey ? this.state.valuesKeys[prevValueKey] : null;
-        //if(this.countEee ===5) return
         return this.setState(nState,()=>{
             ///vérifie s'il y a eu changement call on change par exemple
             let selectedItem = null;
@@ -151,7 +150,7 @@ class DropdownComponent extends AppComponent {
             if(this.props.onChange){
                 this.props.onChange({value:this.state.selected,selectedKey:valueKey,selectedItems : this.getSelectedItems(),selectedItem,item:selectedItem,items:this.state.data});
             }
-        });
+        },force);
     }
     selectItem ({value,select,valueKey}){
         let selected = this.canHandleMultiple ? [...this.state.selected] : undefined;
@@ -604,7 +603,7 @@ class DropdownComponent extends AppComponent {
         const {items,defaultValue,selected} = nextProps;
         if(!React.areEquals(items,this.props.items)){
             const nState = this.prepareItems({items,defaultValue,selected});
-            return this.updateSelected(nState);
+            return this.updateSelected(nState,true);
         }
         let value = this.prepareSelected({defaultValue});
         let areEquals = !this.canHandleMultiple ? this.compare(value,this.state.selected) : false;

package/src/components/Filter/index.js

@@ -22,7 +22,6 @@ const manualRunKey = "manual-run";
 
 export * from "$cfilters";
 
-  
 /***** Coposant Filter, pour les filtres de données */
 export default class Filter extends AppComponent {
   constructor(props) {
@@ -117,9 +116,12 @@ export default class Filter extends AppComponent {
     const t = defaultStr(this.type,this.props.type).toLowerCase();
     return t =="number" || t =='decimal' ? true : false;
   }
+  compareValues(v1,v2,...args){
+      return compareValues(this.prepareValue(v1),this.prepareValue(v2),...args);
+  }
   onFilterValidate(arg){
      arg = defaultObj(arg);
-     if(JSON.stringify(this.state.defaultValue) === JSON.stringify(arg.value)){
+     if(this.compareValues(this.state.defaultValue, arg.value)){
         return;
      }
      this.setState({defaultValue:arg.value},()=>{
@@ -168,25 +170,34 @@ export default class Filter extends AppComponent {
     if(!action){
         action = this.getDefaultAction(type);
     } 
+    let defaultValue = defaultVal(this.props.defaultValue);
     operator = defaultVal(operator,"$and");
-    return {actions,action,ignoreCase,operator,operators,manualRun:defaultBool(this.props.manualRun,false),defaultValue:defaultVal(this.props.defaultValue),isTextFilter};
+    if(actions == _inActions || type.contains("select") || this.props.multiple){
+        defaultValue = isNonNullString(defaultValue)? defaultValue.split(",") : Array.isArray(defaultValue)? defaultValue : !isNullOrEmpty(defaultValue)? [defaultValue] : {};
+    }
+    return {actions,action,ignoreCase,operator,operators,manualRun:defaultBool(this.props.manualRun,false),defaultValue,isTextFilter};
+  }
+  /**** prepare la valeur afin qu'elle soit soumise au composant qui implémente le filtre en question */
+  prepareValue(value){
+    if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || String(value).trim() ==='undefined') ){
+        value = undefined;
+    }
+    if(this.isDecimal()){
+      value = parseDecimal(value)
+      if(value == 0){
+        value = undefined;
+      }
+    }
+    return value;
   }
   fireValueChanged (forceRun){
       if(this.willRunManually() && !forceRun) return;
       let {defaultValue:value,action,ignoreCase,operator} = this.state;
       let force = forceRun ===true ? true : false;
-      if(!isObjOrArray(value) && (isNullOrEmpty(value,true) || value ==='undefined') ){
-          value = undefined;
-      }
+      value = this.prepareValue(value);
       if(action =="$today" || action =='$yesterday'){
          force = true;
       }
-      if(this.isDecimal()){
-        value = parseDecimal(value)
-        if(value == 0){
-          value = undefined;
-        }
-      }
       const prev = JSON.stringify(this.previousRef.current), current = {value,operator,action,ignoreCase};
       if(prev == JSON.stringify(current) && (force !== true)){
           return this;
@@ -229,6 +240,9 @@ export default class Filter extends AppComponent {
       super.componentDidUpdate();
       this.canBindEvent = true;
   }
+  componentDidMount(){
+    super.componentDidMount();
+  }
   setIgnoreCase(ignoreCase){
     if(!(this.searchFilter.current) ) return;
     if(ignoreCase === this.state.ignoreCase) return;
@@ -689,4 +703,14 @@ Filter.propTypes = {
     /**** lorsque le contenu du filtre est réinitialisé */
     onClearFilter : PropTypes.func,
     onResetFilter : PropTypes.func, //idem à onClearFilter
-}
+}
+/****
+  compare 
+*/
+export const compareValues = (v1,v2)=>{
+  if(v1 === v2) return true;
+  if(Array.isArray(v1) && v1.length ==0 || v1 === null || v1 =="" || String(v1).trim() =="") v1 = undefined;
+  if(Array.isArray(v2) && v2.length ==0 || v2 === null || v2 == "" || String(v2).trim() =="") v2 = undefined;
+  return v1 === v2 || JSON.stringify(v1) === JSON.stringify(v2);
+}
+Filter.compareValues = compareValues;

package/src/components/Form/Fields/Field.js

@@ -203,9 +203,8 @@ export default class Field extends AppComponent {
         Object.defineProperties(this,{
             name : {value:name,override:false,writable:false},
             formName : {value:formName,override:false,writable : false},
-            canValidate : {value : defaultVal(props.validate,true),override:false,writable:false},
         })
-        if(this.canValidate !== false){
+        if(this.canRegisterField()){
              Forms.trigger("registerField",name,formName,this);
              this.initObservers();
         }
@@ -227,6 +226,12 @@ export default class Field extends AppComponent {
         this.state.wrapperStyle = this.getMediaQueryUpdateStyle();
         this.state.currentMedia = Dimensions.getDimensionsProps().currentMedia;
     }
+    canRegisterField(){
+        return !this.isFilter() && this.canValidate();
+    }
+    canValidate(){
+        return this.props.validate !== false;
+    }
     validatorBeforeValidate({value,validRule,validParams,event,...rest}){
         let _result = undefined;
         this.trigger.call(this,"beforeValidate",{...defaultObj(rest),value,name:this.name,field:this.name,formName:this.formName,context:this,event,validRule,validParams},(result)=>{
@@ -541,7 +546,7 @@ export default class Field extends AppComponent {
     validate ({value,event,...rest}){
         value = this.parseDecimal(value);
         this.validatingValue = value;
-        if((!this.canValidate) && !this.isSelectField()){
+        if((!this.canValidate()) && !this.isSelectField()){
             if(this._isInitialized && !this.hasValueChanged(value)) {
                 return;
             }
@@ -618,7 +623,7 @@ export default class Field extends AppComponent {
     componentDidMount (validate){
         super.componentDidMount();
         this.mediaQueryUpdateStyleSubscription = addMediaQueryUpdateStyeSubscription(this.doUpdateMediaQueryStyle.bind(this));
-        if(this.canValidate !== false){
+        if(this.canRegisterField()){
             Forms.trigger("registerField",this.getName(),this.getFormName(),this);
         }
         if(defaultVal(validate,true) && !this.isFilter()) this.validate({context:this,value:defaultVal(this.props.defaultValue)});
@@ -631,7 +636,7 @@ export default class Field extends AppComponent {
         if(this.mediaQueryUpdateStyleSubscription && this.mediaQueryUpdateStyleSubscription?.remove){
             this.mediaQueryUpdateStyleSubscription.remove();
         }
-        if(this.canValidate !== false){
+        if(this.canRegisterField()){
             Forms.trigger("unregisterField",this.getName(),this.getFormName());
         }
     }
@@ -656,7 +661,7 @@ export default class Field extends AppComponent {
     }
     onKeyEvent(key,event){
         let form = this.getForm();
-        if(!this.canValidate) return; 
+        if(!this.canValidate()) return; 
         let {keyboardEvents,onKeyEvent} = this.props;
         const formInstance = this.getForm();
         const data = formInstance ? formInstance.getData() : {};

package/src/components/Form/Fields/SelectField.js

@@ -25,7 +25,6 @@ export default class FormSelectField extends Field{
             this.validate({context:this,value});
         }
         return;
-     
     }
     getDefaultValue(){
         if(this._field){

package/src/components/Form/Fields/SelectTableData/Component.js

@@ -215,14 +215,16 @@ const TableDataSelectField = React.forwardRef(({foreignKeyColumn,isStructData,ge
         if(Array.isArray(foreignKeyLabel)){
             let itl = "";
             foreignKeyLabel.map(fk=>{
-                if(!fk) return;
-                const itv = p.item[fk];
-                itl+= (itl?" ":"")+ (typeof itv =='number' && itv || defaultStr(itv))
+                if(!isNonNullString(fk)) return;
+                let itv = p.item[fk];
+                if(typeof itv =='number'){
+                    itv = String(itv);
+                }
+                itl+= (itl?" ":"")+ (itv || defaultStr(itv))
             })
             if(itl){
                 itemLabel = itl;
             }
-            
         }
         if(!itemLabel && isNonNullString(foreignKeyLabel)){
             itemLabel = defaultStr(p.item[foreignKeyLabel] !== undefined && p.item[foreignKeyLabel] !== null && p.item[foreignKeyLabel].toString(), p.item[foreignKeyColumn] !== undefined && p.item[foreignKeyColumn] !== null && p.item[foreignKeyColumn].toString());

package/src/components/Form/FormData/componentsTypes.js

@@ -92,6 +92,7 @@ export const getFilterComponentProps = (_props)=>{
     const sanitizedType = type.replaceAll("_","").toLowerCase().trim();
     props = defaultObj(props);
     props.label = defaultStr(label,text);
+    const SelectTableData = React.isComponent(componentTypes['selecttabledata']) ? componentTypes['selecttabledata'] : componentTypes.SelectTableData
     if(sanitizedType.startsWith("select")){
         props.inputProps = Object.assign({},props.inputProps);
         props.inputProps.placeholder = defaultStr(props.inputProps.placeholder,i18n.lang("search.."))
@@ -99,7 +100,7 @@ export const getFilterComponentProps = (_props)=>{
         if(sanitizedType ==='selectcountry'){
             component = componentTypes.SelectCountry;
         } else if(sanitizedType ==='selecttabledata'){
-            component = componentTypes.SelectTableData;
+            component = SelectTableData;
         } else if(React.isComponent(componentTypes[type])){
             component = componentTypes[type];
         } else if(React.isComponent(componentTypes[sanitizedType])){
@@ -122,7 +123,7 @@ export const getFilterComponentProps = (_props)=>{
     } else if(type == 'dateformat' || type =='select_dateformat' || type =='select_date_format') {
         component = componentTypes.SelectDateFormat;
     } else if(isNonNullString(props.foreignKeyColumn) && isNonNullString(props.foreignKeyTable)) {
-        component = componentTypes.SelectTableData;
+        component = SelectTableData;
         type = "select";
     } else if(React.isComponent(componentTypes[type]) && componentTypes[type] !== false) {
         component = componentTypes[type];