Web: Common: FilterInput: Fixed filter when selected new item filter items, fixed infinite rendering in small mobile devices

web/ASC.Web.Common/src/components/FilterInput/FilterInput.js

@@ -107,6 +107,7 @@ class FilterInput extends React.Component {
       filterValues,
       openFilterItems: [],
       hideFilterItems: [],
+      needUpdateFilter: false,
     };
 
     this.searchWrapper = React.createRef();
@@ -124,7 +125,6 @@ class FilterInput extends React.Component {
   }
   componentDidUpdate(prevProps, prevState) {
     const { selectedFilterData } = this.props;
-    const { filterWidth } = this.state;
 
     if (
       this.props.needForUpdate &&
@@ -469,11 +469,19 @@ class FilterInput extends React.Component {
       this.isResizeUpdate = false;
     }
 
+    this.setState({
+      needUpdateFilter: false,
+    });
+
     this.updateFilter();
   };
   onClickFilterItem = (event, filterItem) => {
     const currentFilterItems = cloneObjectsArray(this.state.filterValues);
 
+    this.setState({
+      needUpdateFilter: true,
+    });
+
     if (filterItem.isSelector) {
       const indexFilterItem = currentFilterItems.findIndex(
         (x) => x.group === filterItem.group
@@ -718,6 +726,7 @@ class FilterInput extends React.Component {
                 onFilterRender={this.onFilterRender}
                 isDisabled={isDisabled}
                 columnCount={filterColumnCount}
+                needUpdateFilter={this.state.needUpdateFilter}
               />
             </div>
           </SearchInput>

web/ASC.Web.Common/src/components/FilterInput/sub-components/FilterBlock.js

@@ -39,6 +39,7 @@ class FilterItem extends React.Component {
       isOpen: false,
       isOpenSelector: !isOpenSelector,
       selectedOption,
+      needUpdate: false,
     };
   }
 
@@ -67,6 +68,11 @@ class FilterItem extends React.Component {
         selectedOption,
       });
     }
+
+    if (this.state.needUpdate) {
+      this.props.onFilterRender();
+      this.setNeedUpdate(false);
+    }
   }
 
   onSelect = (option) => {
@@ -77,6 +83,7 @@ class FilterItem extends React.Component {
       group,
       inSubgroup: !!inSubgroup,
     });
+    this.setNeedUpdate(true);
   };
   onClick = () => {
     const { isDisabled, id, onClose } = this.props;
@@ -85,6 +92,12 @@ class FilterItem extends React.Component {
 
   toggleCombobox = (e, isOpen) => this.setState({ isOpen });
 
+  setNeedUpdate = (needUpdate) => {
+    this.setState({
+      needUpdate,
+    });
+  };
+
   onCancelSelector = (e) => {
     if (
       this.state.isOpenSelector &&
@@ -265,17 +278,20 @@ class FilterBlock extends React.Component {
     this.state = {
       hideFilterItems: hideFilterItems || [],
       openFilterItems: openFilterItems || [],
+      needUpdate: false,
     };
   }
 
   componentDidUpdate(prevProps, prevState) {
-    debugger;
+    const { needUpdate } = this.state;
+    const { needUpdateFilter } = this.props;
     if (
-      !isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
-      !isEqual(prevState.hideFilterItems, this.state.hideFilterItems)
+      (needUpdate || needUpdateFilter) &&
+      (!isEqual(prevState.openFilterItems, this.state.openFilterItems) ||
+        !isEqual(prevState.hideFilterItems, this.state.hideFilterItems))
     ) {
-      console.log("onFilterRender");
       this.props.onFilterRender();
+      this.setNeedUpdate(false);
     }
   }
 
@@ -301,6 +317,13 @@ class FilterBlock extends React.Component {
 
   onDeleteFilterItem = (key) => {
     this.props.onDeleteFilterItem(key);
+    this.setNeedUpdate(true);
+  };
+
+  setNeedUpdate = (needUpdate) => {
+    this.setState({
+      needUpdate,
+    });
   };
   getFilterItems = () => {
     const { openFilterItems, hideFilterItems } = this.state;
@@ -342,6 +365,7 @@ class FilterBlock extends React.Component {
             defaultOption={defaultOption}
             defaultSelectLabel={defaultSelectLabel}
             selectedItem={selectedItem}
+            onFilterRender={_this.props.onFilterRender}
           ></FilterItem>
         );
       });
@@ -382,6 +406,7 @@ class FilterBlock extends React.Component {
             defaultOption={defaultOption}
             defaultSelectLabel={defaultSelectLabel}
             selectedItem={selectedItem}
+            onFilterRender={_this.props.onFilterRender}
           ></FilterItem>
         );
       });