@bytebrand/fe-ui-core 4.2.34 → 4.2.35

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bytebrand/fe-ui-core",
-  "version": "4.2.34",
+  "version": "4.2.35",
   "description": "UI components for the auto.de project",
   "main": "index.ts",
   "module": "dist/common.js",

package/source/components/SearchPage/Filters/MakeModel/MakeModel.tsx

@@ -5,6 +5,7 @@ import MaterialAutocomplete from '../../../_common/MaterialAutocomplete/Material
 import MaterialSelect from '../../../_common/MaterialSelect/MaterialSelect';
 import MaterialField from '../../../_common/MaterialField/MaterialField';
 import IconSVG from '../../../_common/IconSVG/IconSVG';
+import _debounce from 'lodash/debounce';
 
 import styles from './MakeModel.styl';
 
@@ -17,6 +18,8 @@ export interface IMakeModelProps {
   t?: any;
 }
 
+const DEBOUNCE_TIME: number = 700;
+
 class MakeModel extends React.Component<IMakeModelProps> {
   renderLabel = (option: any): React.ReactNode => {
     const { t } = this.props;
@@ -54,6 +57,13 @@ class MakeModel extends React.Component<IMakeModelProps> {
     return bodyType ? <MaterialSelect {...ddProps} /> : <MaterialAutocomplete {...ddProps} />;
   };
 
+  debaunceOnFilterChange = _debounce( // is used for the text field to add a delay and not make a search request for each key stroke
+    (name: string, value: string, index: number) => {
+      this.props.onChange(name, value, index)
+    },
+    DEBOUNCE_TIME
+  );
+
   renderTextField = (props: any) => {
     const { name, values, index, placeholder } = props;
 
@@ -62,7 +72,7 @@ class MakeModel extends React.Component<IMakeModelProps> {
       placeholder,
       size: 'custom',
       value: values,
-      onChange: (value: string, name: string) => this.props.onChange(name, value, index)
+      onChange: (value: string, name: string) => this.debaunceOnFilterChange(name, value, index)
     };
 
     return (<MaterialField {...textFieldProps} />);

package/source/components/_common/MaterialField/MaterialField.tsx

@@ -1,4 +1,4 @@
-import * as React from 'react';
+import React, { useState } from 'react';
 import { TextField, IconButton } from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import { Theme } from './MaterialField.styled';
@@ -43,11 +43,13 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
   placeholder
 }: IVehicleModalProps) => {
   const [showPassword, setShowPassword] = React.useState(false);
+  const [enteredValue, setEnteredValue] = useState(value);
 
   const onHandleChange = (event?: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
     const value = event.currentTarget.value;
     const name = event.currentTarget.name;
 
+    setEnteredValue(event.target.value);
     onChange(value, name, event);
   };
 
@@ -67,7 +69,7 @@ const MaterialField: React.FC<IVehicleModalProps> = ({
         fullWidth={true}
         autoComplete={autoComplete}
         label={label}
-        value={value}
+        value={enteredValue}
         name={name}
         sx={sx}
         error={!!error}

package/source/components/containers/SearchPage/FiltersContainer/FiltersContainer.tsx

@@ -60,8 +60,6 @@ interface IFiltersContainerProps extends IRouteComponentProps<PathParamsType> {
   Link?: any;
 }
 
-const DEBOUNCE_TIME: number = 500;
-
 @observer
 class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
   componentDidMount() {
@@ -103,13 +101,6 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     resetFiltersToDefault();
   }
 
-  debaunceOnFilterChange = _debounce( // is used for the text field to add a delay and not make a search request for each key stroke
-    () => {
-      this.props.onFilterChange();
-    },
-    DEBOUNCE_TIME
-  );
-
   onFilterChange = (field: string, value: any, index?: number, isSeries?: boolean) => {
     const { addModelsToFilters, changeFilterValue, changeSeries, getModelsInfoByMaker } = this.props;
     let newValue = _get(value, 'value') || value;
@@ -147,12 +138,7 @@ class FiltersContainer extends React.Component<IFiltersContainerProps, {}> {
     }
 
     changeFilterValue(field, newValue, index);
-
-    if (field === SUB_MODEL_KEY) {
-      this.debaunceOnFilterChange();
-    } else {
-      this.props.onFilterChange();
-    }
+    this.props.onFilterChange();
   };
 
   onChangeFilterControls = (field: string, value: any) => {