Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DataTable: Column resize is not working properly. #4471

Closed
dmacannuco opened this issue Jun 1, 2023 · 14 comments · Fixed by #4616
Closed

DataTable: Column resize is not working properly. #4471

dmacannuco opened this issue Jun 1, 2023 · 14 comments · Fixed by #4616
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@dmacannuco
Copy link

dmacannuco commented Jun 1, 2023

Describe the bug

The resize of the columns of the DataTable component is not working correctly when we have updated to the latest version of the 9.5.0 primereact library.

The error is the same as the example on the official documentation page (https://primereact.org/datatable/)

The error is reproduced in both columnResizeMode.

The most curious thing is that if we try to run the code in the sandbox, in both cases, it seems to work correctly in a simplified project.

However, the same thing happens in our project as is happening in the examples on the documentation website.

Reproducer

No response

PrimeReact version

9.5.0

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

@dmacannuco dmacannuco added the Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible label Jun 1, 2023
@dmacannuco dmacannuco changed the title Component: Title [DataTable]: Column resize not working properly. Jun 1, 2023
@dmacannuco dmacannuco changed the title [DataTable]: Column resize not working properly. [DataTable]: Column resize is not working properly. Jun 1, 2023
@melloware melloware added Type: Bug Issue contains a defect related to a specific component. and removed Status: Needs Triage Issue will be reviewed by Core Team and a relevant label will be added as soon as possible labels Jun 1, 2023
@melloware melloware changed the title [DataTable]: Column resize is not working properly. DataTable: Column resize is not working properly. Jun 1, 2023
@melloware
Copy link
Member

melloware commented Jun 1, 2023

Agreed that is weird as its working in StackBlitz: https://stackblitz.com/edit/react-11cbe3?file=src%2FApp.js

cc @shuklabhisekh

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 1, 2023

Yes so this is the same thing happening in my app. So in dev mode in nextjs this does not have an issue and works properly but in production mode it seems something happens maybe during the optimization process that breaks the behavior of the resize.

I haven't been able to debug this further.

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 1, 2023

@dmacannuco what was the previous version you were at before you upgraded?

@melloware
Copy link
Member

@bu3alwa this probably has to do with REact 18 Strict mode. Using the PR Showcase just change next.config.js to..

reactStrictMode: false, //process.env.NODE_ENV === 'production' ? false : true,

And I bet you see the same behavior now as production mode. That will help narrow down the issue to improper hook usage.

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 1, 2023

This issue might be a bit on my lower priority for next week but Ill check the week after and let you know what I can find.

@dmacannuco
Copy link
Author

@dmacannuco what was the previous version you were at before you upgraded?

The version from which we have updated has been from 8.3.0.
In our case, we have the same problem in both development and production mode.

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 6, 2023

ok I know whats causing it but I don't know where its happening and why. So on the div wrapper for a datatable on html attribute shows up pr_id_1 as a unique identifier for a datatable. The css that gets added when resizing also references that same id. But on first load that is missing. If you trigger a refresh with HMR you'll see it show up.

I am unsure where in the code that is set so if you can let me know I can debug further.

@shuklabhisekh
Copy link
Contributor

Hey @bu3alwa, I've already fixed it and created a PR(#4410) for this issue. It has been approved by @melloware but waiting to get approved by other reviewers and get merged. You can check it and test it you want.

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 6, 2023

I think yours would run into the same issue. On load the attribute is missing.

attributeSelector.current = UniqueComponentId();

This is where the id is generated but I have to check how its passed to the prop. Ill check more tomorrow

Edit

#4211

This is possibly where it started when it was switched from state to ref. Unsure though.

@bu3alwa
Copy link
Contributor

bu3alwa commented Jul 6, 2023

ok, this was bothering me so

    useUpdateEffect(() => {
        elementRef.current.setAttribute(attributeSelector.current, '');
    }
    , [attributeSelector.current])

This would be a fix but I dunno if it has any sideeffects.

@melloware do you think this is safe to add? or would that break anything else?

@melloware
Copy link
Member

Let me look at this. I thought you couldn't have a Hook listen on a ref.current? Refs don't trigger re-renders right?

@melloware
Copy link
Member

OK fixed submitted for this issue. It had to do with mounting the component properly.

@melloware
Copy link
Member

Fixed in 9.6.2 if you want to give it a try

@dmacannuco
Copy link
Author

I just tested it and everything seems to work fine.
Thanks for everything.
Regards.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Type: Bug Issue contains a defect related to a specific component.
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants