Controlled value is undefined when adding an "onChange" callback to a "dropdown" option

[bgirschig]

Hello!
I'm experiencing an issue with a dropdown control when I try to add a callback to it:

const { dogFood } = useControls({
  dogFood: {
    options: {
      "meat": "yay",
      "chocolate": "nay",
    },
    onChange: console.log,
  },
  something: True,
});

// "dogFood" is undefined

The callback is called at the correct time, but the value is not usable.

typescript compilation fails with the following error:

Property dogFood does not exist on type { something: boolean; }"

leva: 0.9.35
tsc: 5.4.5

By the way, thanks for the lib! It's really pretty and helpful.

[zaesur]

In fact, this is not a bug but intended.

Looking at this documentation, we can see that we need to add transient: false whenever we want to consume a value.

By default, if you create an input with an onChange callback, the transient value is set to true, meaning that you are not subscribed to the input value and cannot consume it.

If you add transient: false the example works without a problem:

const useHook = () => {
  const { dogFood } = useControls({
    dogFood: {
      options: {
        meat: "yay",
        chocolate: "nay",
      },
      onChange: console.log,
      transient: false,
    },
    something: true,
  });

  return dogFood;
};