fix: use inline style

primefaces · Jan 11, 2024 · de0111c · de0111c
1 parent 5c6dfa7
commit de0111c
Showing 1 changed file with 23 additions and 6 deletions.
diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
@@ -67,6 +67,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const dropPosition = React.useRef(null);
     const styleElement = React.useRef(null);
     const responsiveStyleElement = React.useRef(null);
+    const beforeResizeStyleElement = React.useRef(null);
+
     const columnWidthsState = React.useRef(null);
     const tableWidthState = React.useRef(null);
     const resizeColumn = React.useRef(null);
@@ -504,6 +506,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     };
 
     const onColumnResizeStart = (e) => {
+        createBeforeResizeStyleElement();
         const { originalEvent: event, column } = e;
         const containerLeft = DomHandler.getOffset(elementRef.current).left;
 
@@ -518,9 +521,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const onColumnResize = (event) => {
         const containerLeft = DomHandler.getOffset(elementRef.current).left;
 
-        DomHandler.addStyles(elementRef.current, {
-            userSelect: 'none'
-        });
+        elementRef.current.setAttribute('data-p-unselectable-text', true);
+
         resizeHelperRef.current.style.height = elementRef.current.offsetHeight + 'px';
         resizeHelperRef.current.style.top = 0 + 'px';
         resizeHelperRef.current.style.left = event.pageX - containerLeft + elementRef.current.scrollLeft + 'px';
@@ -579,9 +581,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         resizeHelperRef.current.style.display = 'none';
         resizeColumn.current = null;
         resizeColumnElement.current = null;
-
-        elementRef.current.style.removeProperty('user-select');
-
+        elementRef.current.setAttribute('data-p-unselectable-text', 'true');
+        destroyBeforeResizeStyleElement();
         unbindColumnResizeEvents();
     };
 
@@ -791,6 +792,17 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         }
     };
 
+    const createBeforeResizeStyleElement = () => {
+        beforeResizeStyleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
+        let innerHTML = `
+[data-pc-name="datatable"][${attributeSelector.current}] {
+    user-select:none;
+}
+        `;
+
+        beforeResizeStyleElement.current.innerHTML = innerHTML;
+    };
+
     const createStyleElement = () => {
         styleElement.current = DomHandler.createInlineStyle((context && context.nonce) || PrimeReact.nonce, context && context.styleContainer);
     };
@@ -844,6 +856,10 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         styleElement.current = DomHandler.removeInlineStyle(styleElement.current);
     };
 
+    const destroyBeforeResizeStyleElement = () => {
+        beforeResizeStyleElement.current = DomHandler.removeInlineStyle(beforeResizeStyleElement.current);
+    };
+
     const onPageChange = (e) => {
         clearEditingMetaData();
 
@@ -1469,6 +1485,7 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         unbindColumnResizeEvents();
         destroyStyleElement();
         destroyResponsiveStyle();
+        destroyBeforeResizeStyleElement();
     });
 
     React.useImperativeHandle(ref, () => ({