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

Hooks: useImperativeHandle is preventing the default behaviour of useRef hook #2893

Closed
Syuks opened this issue May 14, 2022 · 3 comments · Fixed by #3043
Closed

Hooks: useImperativeHandle is preventing the default behaviour of useRef hook #2893

Syuks opened this issue May 14, 2022 · 3 comments · Fixed by #3043
Assignees
Labels
Type: Bug Issue contains a defect related to a specific component.
Milestone

Comments

@Syuks
Copy link

Syuks commented May 14, 2022

Describe the bug

Since the transition from Class components to Hook based components, the access to the methods of a component has been handled with the useImperativeHandle hook. Example 1, Example 2, etc.

This hook, instead of adding methods to the ref of components, has been replacing the ref completly, blocking the default behaivour of the useRef hook, accesing the dom element. In V7 we would also get access to the component props which gives the developer a lot of flexibility and useful state data.

This issue needs two codesandboxes (SEE CONSOLE LOG):

V7: https://codesandbox.io/s/exciting-sound-6xncl2?file=/src/demo/AutoCompleteDemo.js

V8: https://codesandbox.io/s/nervous-shtern-fyhs9h?file=/src/demo/AutoCompleteDemo.js

Reproducer

https://codesandbox.io/s/nervous-shtern-fyhs9h?file=/src/demo/AutoCompleteDemo.js

image

PrimeReact version

8.1.0

React version

18.x

Language

ALL

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

  1. Create an Autocomplete component.
  2. Create a const with useRef hook.
  3. Assign the const to the ref value of the Autocomplete component.
  4. Console log the ref.current with a useEffect hook.
  5. See no DOM element nor props.

Expected behavior

When using a useRef hook and assigning the ref to a component, I expect to get access to the dom element (and its props, having used primereact V7).

@Syuks Syuks added the Type: Bug Issue contains a defect related to a specific component. label May 14, 2022
@melloware melloware added this to the 8.2.0 milestone May 15, 2022
@melloware melloware changed the title useImperativeHandle is preventing the default behaviour of useRef hook Hooks: useImperativeHandle is preventing the default behaviour of useRef hook May 15, 2022
@Maykin-99
Copy link

Maykin-99 commented May 24, 2022

In V7 we would also get access to the component props which gives the developer a lot of flexibility and useful state data.

Not only data but we also got access to useful methods like processedData in DataTable that allowed to easily extend PrimeReact functionality without forking the whole project.

So it would be nice if you'd expose all these methods also with useImperativeHandle

@melloware
Copy link
Member

I am wondering if imperativeHandle is needed at all. Everything I am reading is you only use that if you need to pass methods to another ref.

@mertsincan mertsincan added the Status: Discussion Issue or pull request needs to be discussed by Core Team label Jul 6, 2022
@mertsincan mertsincan modified the milestones: 8.2.0, 9.0.0 Jul 6, 2022
melloware added a commit to melloware/primereact that referenced this issue Jul 7, 2022
@melloware
Copy link
Member

melloware commented Jul 7, 2022

OK I just upgraded 7.2.1 to 8.2.0 and I ran into this same issue. I was using DataTable properties through the REF and now I can't access anything.

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
4 participants