[react-aria-components] Weird behavior on NumberField buttons

[Manuel-Manoury]

Hi 👋
I'm using react-aria-components as a base on which I develop my company's design system, and I'm currently scratching my head while using NumberField.
Everything works fine if I follow the documented usage, i.e. if I use Button from react-aria-component directly as a children of NumberField.
However, I have implemented a custom Button as a part of my design system (based on Button from react-aria-component), which is fairly simple :

const Button = ({
  variant = 'primary',
  size = 'medium',
  IconLeft = undefined,
  IconRight = undefined,
  className,
  children,
  ...props
}: ButtonProps) => {
  const isIconOnly = (IconLeft || IconRight) && !children;

  return (
    <BaseButton
      className={clsx({
        // props dependant styling
      })}
      {...props}
    >
      {IconLeft ? <IconLeft {...defaultIconProps} /> : null}
      {children}
      {IconRight ? <IconRight {...defaultIconProps} /> : null}
    </BaseButton>
  );
};

However, when I use this button, I lose some "automatic behavior" (such as setting the relevant button as disabled when the field value is equal to minValue / maxValue 🤔

As a result, I tried to create an intermediate component to rely on useContext(NumberFieldStateContext); to flag my buttons as disabled when needed, but by doing so I lose another "automatic behavior", namely the binding of the onPress handlers. They are available through the context mentioned before so it's ok, but I don't understand why those behavior can get "lost" depending on the fact that I add an abstraction layer or not 🤔

I tried removing the abstraction (my custom button as a direct child of NumberField) and adding forwardRef and useContextProps(props, ref, ButtonContext) along with useButton(props, ref) to my Button abstraction, without changes.

I feel like I'm missing something to understand how this work, can you help me figure out what I'm missing here ? Thanks 🙏

[snowystinger]

Maybe the 'slot' prop isn't making it through?

Otherwise, issues with context being lost are commonly indicative of multiple copies of our packages or accidentally loading two different types of modules from our packages, cjs + mjs or something along those lines.

[Manuel-Manoury]

As my custom button is extending (and forwarding) props from react-aria-component I think everything should be alright on this side 🤔
As I rely on workspaces, I might have several copies of the packages, I'll dig in this direction, thanks for the lead 🙏