@redsift/table-pro 12.5.8-muiv8-alpha.3 → 12.5.8

package/_internal/StatefulDataGrid2.js

@@ -1510,7 +1510,7 @@ const isValueValid = (value, field, columns, operator) => {
 
 // example:
 // unicodeDomain[contains]=a&unicodeDomain[contains]=dsa&logicOperator=and&tab=ignored
-const getFilterModelFromString = (searchString, columns) => {
+const getFilterModelFromString = (searchString, columns, previousModel) => {
   if (!searchString) {
     return 'invalid';
   }
@@ -1540,6 +1540,21 @@ const getFilterModelFromString = (searchString, columns) => {
     }
   }
   let id = 5000;
+
+  // Positional id-reuse map keyed by `${field}|${operator}` (decoded operator, matching
+  // the item we push below). FIFO per key so duplicate field+operator items map by order.
+  // Reusing the id of a previously parsed/emitted item keeps `item.id` stable across the
+  // URL write→parse roundtrip (the URL never carries the id), so MUI's GridFilterForm
+  // React key does not change and the filter panel input keeps focus. (DS-81)
+  const previousIdsByKey = new Map();
+  if (previousModel) {
+    for (const prev of previousModel.items) {
+      if (prev.id === undefined) continue;
+      const key = `${prev.field}|${prev.operator}`;
+      const bucket = previousIdsByKey.get(key);
+      if (bucket) bucket.push(prev.id);else previousIdsByKey.set(key, [prev.id]);
+    }
+  }
   const fields = columns.map(column => column.field);
   let isInvalid = false;
   const items = [];
@@ -1575,10 +1590,13 @@ const getFilterModelFromString = (searchString, columns) => {
       isInvalid = true;
       return;
     }
+    const finalOperator = columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator;
+    const reuseBucket = previousIdsByKey.get(`${field}|${finalOperator}`);
+    const stableId = reuseBucket && reuseBucket.length > 0 ? reuseBucket.shift() : id;
     items.push({
       field,
-      operator: columnType === 'number' && Object.keys(numberOperatorDecoder).includes(operator) ? numberOperatorDecoder[operator] : operator,
-      id,
+      operator: finalOperator,
+      id: stableId,
       value: listOperators.includes(operator) && decodedValue === '' ? [] : decodedValue,
       type
     });
@@ -1672,7 +1690,7 @@ const getSearchParamsFromFilterModel = filterModel => {
 // - if we have something in the URL, use that info
 // - if we don't have that, use the localStorage and update the URL
 // - if we don't have that, return an empty FilterModel
-const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion) => {
+const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion, previousModel) => {
   const defaultValue = initialState && initialState.filter && initialState.filter.filterModel ? initialState.filter.filterModel : {
     items: [],
     logicOperator: GridLogicOperator.And
@@ -1690,7 +1708,7 @@ const getFilterModel = (search, columns, localStorageFilters, setLocalStorageFil
     persistDefaultFilters();
     return defaultValue;
   }
-  const filterModelFromSearch = getFilterModelFromString(search, columns);
+  const filterModelFromSearch = getFilterModelFromString(search, columns, previousModel);
   if (filterModelFromSearch !== 'invalid') {
     const searchFromFilterModel = getSearchParamsFromFilterModel(filterModelFromSearch);
     const searchString = urlSearchParamsToString(searchFromFilterModel);
@@ -2279,7 +2297,7 @@ const getFinalSearch = _ref => {
   return new URLSearchParams([...searchParams, ...filterModelSearch, ...sortModelSearch, ...paginationModelSearch, ...tabSearch, ...pinnedColumnsModelSearch, ...columnVisibilityModelSearch, ...densitySearch, ...columnOrderSearch]);
 };
 /** Return the state of the table given the URL and the local storage state */
-const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage) => {
+const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, columns, initialState, localStorage, previousFilterModel) => {
   var _initialState$columns6, _initialState$columns7;
   // Decompress any compressed params in the search string before processing
   const decompressedSearch = decompressSearchParams(search);
@@ -2318,7 +2336,7 @@ const getModelsParsedOrUpdateLocalStorage = (search, localStorageVersion, column
     localStorageColumnOrder,
     setLocalStorageColumnOrder
   } = localStorage;
-  const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion);
+  const filterModel = getFilterModel(decodedSearch, columns, localStorageFilters, setLocalStorageFilters, initialState, isNewVersion, previousFilterModel);
   const sortModel = getSortModel(decodedSearch, columns, localStorageSorting, setLocalStorageSorting, initialState, isNewVersion);
   const paginationModel = getPaginationModel(decodedSearch, localStoragePagination, setLocalStoragePagination, initialState, isNewVersion);
   const columnVisibilityModel = getColumnsVisibility(decodedSearch, columns, localStorageColumnsVisibility, setLocalStorageColumnsVisibility, initialState, isNewVersion);
@@ -2665,6 +2683,11 @@ const useStatefulTable = props => {
       [field]: newWidth
     }));
   }, [dimensionModel, setDimensionModel]);
+
+  // Source of ids for content-matching in the parser, so item.id is stable across the
+  // URL write→parse roundtrip (DS-81). Holds MUI's just-emitted model (random placeholder
+  // id) after onFilterModelChange, then the stabilised parsed model each render.
+  const filterIdSourceRef = useRef(undefined);
   const {
     filterModel: filterParsed,
     sortModel: sortModelParsed,
@@ -2689,7 +2712,7 @@ const useStatefulTable = props => {
     setLocalStorageDensity: setDensityModel,
     localStorageColumnOrder,
     setLocalStorageColumnOrder
-  });
+  }, filterIdSourceRef.current);
 
   // Sync URL in an effect rather than during render to comply with React rules
   useEffect(() => {
@@ -2704,6 +2727,10 @@ const useStatefulTable = props => {
   if (!isDeepEqual(filterParsedRef.current, filterParsed)) {
     filterParsedRef.current = filterParsed;
   }
+  // Keep the id source in sync with the stabilised parsed model so re-parses triggered
+  // by unrelated state (pagination/sort/visibility) reuse the same ids (DS-81). The parse
+  // call above reads the ref before this write (read-before-write within the render).
+  filterIdSourceRef.current = filterParsed;
   const sortModelParsedRef = useRef(sortModelParsed);
   if (!isDeepEqual(sortModelParsedRef.current, sortModelParsed)) {
     sortModelParsedRef.current = sortModelParsed;
@@ -2827,6 +2854,10 @@ const useStatefulTable = props => {
       });
       if (isDeepEqual(filterModel, lastEmittedFilterRef.current)) return;
       lastEmittedFilterRef.current = filterModel;
+      // Capture MUI's just-emitted model (carrying the placeholder's random id) so the
+      // next render's URL re-parse reuses that id and the GridFilterForm key — and thus
+      // the value input's focus — survives the write→parse roundtrip (DS-81).
+      filterIdSourceRef.current = filterModel;
       updateUrl(buildModel({
         filterModel
       }), search, localStorageVersion, historyReplace, columns);