Manually provide Ref

[klimashkin]

Hi! I'm trying to to use react-focus-lock with re-resizable and produce only one final div.
But re-resizable doesn't have ref forwarding, but provides resizable prop in its own instance that points to the final div.

I was trying to take this div, put into own artificial this.ref object and feed it to shards, like that:

<FocusLock className={modalClass} autoFocus={autoFocus}
           as={Resizable} shards={[this.ref]}
           lockProps={{
             minWidth: 400,
             minHeight: 200,
             ref: i => this.ref.current = i.resizable,
             defaultSize: {width: 'auto', height: 'auto'},
           }}>
    {children}
</FocusLock>

But it seems to be not working. Is there any other approach that might help?

[theKashey]

Shards and “the main node” are not equal - without the main one being explicitly set nothing would work.
How to solve (probably) - wrap Resizable in forwardRef, and “forward” i.resizable into provided ref.

Writing from the phone, could not guarantee the result

[klimashkin]

It seems to be working this way!

const ResizableWithRef = forwardRef((props, ref) =>
  <Resizable {...props} ref={i => i && ref(i.resizable)}/>
);

<FocusLock className={modalClass} autoFocus={autoFocus}
           as={ResizableWithRef} 
           lockProps={{
             minWidth: 400,
             minHeight: 200,
             defaultSize: {width: 'auto', height: 'auto'},
           }}>
  {children}
</FocusLock>

But I wish there was another one to avoid extra wrappers, like manually passing dom element to FocusLock

[theKashey]

Like useFocusLock hook. Technically it should be possible, but right now I have no time to work on it, as long as there are more important stuff to do in a limited free time, than removing one wrapper around a lock.

[theKashey]

Hey! Look like the next version is going to break this fix - ref would become RefObject, not callback.

[klimashkin]

You mean next version of re-resizable or focus-lock?

[theKashey]

of focus-lock. But I would provide a helper function to handle ref regardless of its implementation.

[theKashey]

@klimashkin - your case got documented as a use case for use-callback-ref
https://github.com/theKashey/use-callback-ref#usetransformref-to-replace-reactuseimperativehandle

import {useTransformRef} from 'use-callback-ref';

const ResizableWithRef = forwardRef((props, ref) =>
  <Resizable {...props} ref={useTransformRef(ref, i => i ? i.resizable : null)}/>
);

I am moving forward with #88, please update your transformer function as long as ref is no longer a function.

[klimashkin]

Since there is a workaround probably that is ok to close this issue