From 5c6dfa7a2f8ad2f4f176423fbf94ff9a59763f1d Mon Sep 17 00:00:00 2001
From: nevermore <kl.nevermore@gmail.com>
Date: Thu, 11 Jan 2024 11:25:36 +0800
Subject: [PATCH 1/2] fix: Datatable text will be selected when resized

---
 components/lib/datatable/DataTable.js | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 97b40c4b25..5b4263ecc5 100644
--- a/components/lib/datatable/DataTable.js
+++ b/components/lib/datatable/DataTable.js
@@ -518,8 +518,9 @@ export const DataTable = React.forwardRef((inProps, ref) => {
     const onColumnResize = (event) => {
         const containerLeft = DomHandler.getOffset(elementRef.current).left;
 
-        elementRef.current.setAttribute('data-p-unselectable-text', true);
-        !ptCallbacks.isUnstyled() && DomHandler.addClass(elementRef.current, 'p-unselectable-text');
+        DomHandler.addStyles(elementRef.current, {
+            userSelect: 'none'
+        });
         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';
@@ -578,8 +579,8 @@ export const DataTable = React.forwardRef((inProps, ref) => {
         resizeHelperRef.current.style.display = 'none';
         resizeColumn.current = null;
         resizeColumnElement.current = null;
-        elementRef.current.setAttribute('data-p-unselectable-text', 'true');
-        !ptCallbacks.isUnstyled() && DomHandler.removeClass(elementRef.current, 'p-unselectable-text');
+
+        elementRef.current.style.removeProperty('user-select');
 
         unbindColumnResizeEvents();
     };

From de0111cf7119872672fe10af3f4ae50807bd897d Mon Sep 17 00:00:00 2001
From: nevermore <kl.nevermore@gmail.com>
Date: Thu, 11 Jan 2024 14:35:46 +0800
Subject: [PATCH 2/2] fix: use inline style

---
 components/lib/datatable/DataTable.js | 29 +++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/components/lib/datatable/DataTable.js b/components/lib/datatable/DataTable.js
index 5b4263ecc5..f1dd60809b 100644
--- 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, () => ({