Fix primefaces#4211: Datatable attribute selector use Ref not state (p…

…rimefaces#4415) * Fix primefaces#4211: Datatable attribute selector use Ref not state * Fix primefaces#4211: Datatable attribute selector use Ref not state
melloware · May 17, 2023 · c329252 · c329252
1 parent f78ae0b
commit c329252
Showing 1 changed file with 12 additions and 14 deletions.
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -25,9 +25,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const [columnOrderState, setColumnOrderState] = React.useState([]);
     const [groupRowsSortMetaState, setGroupRowsSortMetaState] = React.useState(null);
     const [editingMetaState, setEditingMetaState] = React.useState({});
-    const [attributeSelectorState, setAttributeSelectorState] = React.useState(null);
     const [d_rowsState, setD_rowsState] = React.useState(props.rows);
     const [d_filtersState, setD_filtersState] = React.useState({});
+    const attributeSelector = React.useRef('');
     const elementRef = React.useRef(null);
     const tableRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
@@ -372,7 +372,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 createStyleElement();
 
                 let innerHTML = '';
-                let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+                let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
                 widths.forEach((width, index) => {
                     let style = `width: ${width}px !important; max-width: ${width}px !important`;
@@ -568,7 +568,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         createStyleElement();
 
         let innerHTML = '';
-        let selector = `.p-datatable[${attributeSelectorState}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
+        let selector = `.p-datatable[${attributeSelector.current}] > .p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
 
         widths.forEach((width, index) => {
             let colWidth = index === colIndex ? newColumnWidth : nextColumnWidth && index === colIndex + 1 ? nextColumnWidth : width;
@@ -761,8 +761,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
             responsiveStyleElement.current = DomHandler.createInlineStyle(PrimeReact.nonce);
 
             let tableSelector = `.p-datatable-wrapper ${isVirtualScrollerDisabled() ? '' : '> .p-virtualscroller'} > .p-datatable-table`;
-            let selector = `.p-datatable[${attributeSelectorState}] > ${tableSelector}`;
-            let gridLinesSelector = `.p-datatable[${attributeSelectorState}].p-datatable-gridlines > ${tableSelector}`;
+            let selector = `.p-datatable[${attributeSelector.current}] > ${tableSelector}`;
+            let gridLinesSelector = `.p-datatable[${attributeSelector.current}].p-datatable-gridlines > ${tableSelector}`;
             let innerHTML = `
 @media screen and (max-width: ${props.breakpoint}) {
     ${selector} > .p-datatable-thead > tr > th,
@@ -1318,7 +1318,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     useMountEffect(() => {
-        !attributeSelectorState && setAttributeSelectorState(UniqueComponentId());
+        attributeSelector.current = UniqueComponentId();
 
         //setFiltersState(cloneFilters(props.filters)); // Github #4248
         setD_filtersState(cloneFilters(props.filters));
@@ -1333,18 +1333,16 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     });
 
     useUpdateEffect(() => {
-        if (attributeSelectorState) {
-            elementRef.current.setAttribute(attributeSelectorState, '');
+        elementRef.current.setAttribute(attributeSelector.current, '');
 
-            if (props.responsiveLayout === 'stack' && !props.scrollable) {
-                createResponsiveStyle();
-            }
+        if (props.responsiveLayout === 'stack' && !props.scrollable) {
+            createResponsiveStyle();
         }
 
         return () => {
             destroyResponsiveStyle();
         };
-    }, [attributeSelectorState, props.breakpoint]);
+    }, [props.breakpoint]);
 
     useUpdateEffect(() => {
         const filters = cloneFilters(props.filters);
@@ -1492,7 +1490,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 className="p-datatable-tbody p-datatable-frozen-tbody"
                 frozenRow
                 tableProps={props}
-                tableSelector={attributeSelectorState}
+                tableSelector={attributeSelector.current}
                 columns={columns}
                 selectionModeInColumn={selectionModeInColumn}
                 first={first}
@@ -1568,7 +1566,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
                 empty={empty}
                 frozenRow={false}
                 tableProps={props}
-                tableSelector={attributeSelectorState}
+                tableSelector={attributeSelector.current}
                 columns={columns}
                 selectionModeInColumn={selectionModeInColumn}
                 first={first}