Floating UI doesn't use the latest version of the callbacks from each render

[LoganDark]

Floating UI doesn't use the latest version of the callbacks from each render

[atomiks]

I was considering adding it as a second argument (like a dependency array), but the types were a bit annoying and I didn't think it was a major enough issue to add in, but I might try to look into it again

[atomiks]

Is the issue the same on 0.26.13?

[LoganDark]

yes it looks like it (put =0.26.13 in package.json and reinstalled, confirmed 0.26.13 is installed, restarted server and retested and same issue). my render function logs the values of these variables, THEN the callbacks are called and they print the old values, so it seems floating UI is keeping around a reference to an old callback from an old render instead of using the most recent one

[atomiks]

Okay, .14 had a somewhat major refactor that I was curious was causing the problem. But if it's happening in the old version I'm skeptical it's this library's issue. useEffectEvent (the function you posted) is used internally where necessary, and the lint rules are enabled to ensure useCallbacks have fresh values during rendering.

Without a reproduction it's hard to debug - if you can, try to find some time to make a new CodeSandbox that reproduces the issue!

[LoganDark]

I have time, it's just all of codesandbox's buttons are disabled for some reason?

like, it literally just won't let me

[atomiks]

CodeSandbox's recent changes have been weird, try to create a brand new Sandbox entirely

[LoganDark]

how?

[LoganDark]

oh, it wants me to sign in, let me try that

[LoganDark]

here you go

to reproduce:

• click the "add 10" button
• the tooltip does nothing
• click remount
• woah

[atomiks]

So this is an edge case where state values aren't fresh inside functions of middleware. Refs can be fresh, but they're also not reactive.

To keep using state, which is both reactive and fresh, you need to inform Floating UI about the value changing:

const sizeMiddleware = size({
  apply({ elements }) {
    elements.floating.style.height = `${state}px`;
  },
});

const reactiveSize = {
  ...sizeMiddleware,
  options: {
    ...sizeMiddleware.options,
    deps: [state],
  }
};

useFloating({
  middleware: [reactiveSize]
})

https://codesandbox.io/p/sandbox/floating-ui-react-dom-template-forked-vmtmz4?file=%2Fsrc%2FApp.js%3A22%2C1

Docs: https://floating-ui.com/docs/useFloating#option-reactivity

[LoganDark]

ok, thank you! that looks exactly like what I am running into

[LoganDark]

yep I can confirm even just

 			size({
 				apply({availableHeight, elements}) {
 					console.log('extraLeftPadding = %o, extraRightPadding = %o', extraLeftPadding, extraRightPadding)
 					elements.floating.style.width = `${elements.reference.getBoundingClientRect().width - leftPadding - rightPadding + 2 * unit}px`
 					elements.floating.style.maxHeight = `${Math.max(availableHeight, 20 * unit)}px` // 4 items
 				},
+				deps: [extraLeftPadding, extraRightPadding, unit]
 			}),

immediately fixes the issue

wonder if you should make this deps an official optional field so that typescript stops complaining at me

it'd probably be SUPER helpful for discoverability as well