Aria hooks and using {...rest} operator

[Agile-fox]

Hello 👋 ,
I'm trying to use aria hooks with spread {...rest} operator, without using it everything works without a problem. I tried to look for an answer but couldn't find anything related to that.

💥 Use case
When I start to use {...rest} anywhere in the return statement the console starts to give Errors about DOM. I wanted to use it to spread for example inline styles that user is passing for my component.
You can check it here quickly Codesandbox

It happens with usage of all aria hooks. In switch for example additionally onChange and isSelected stops working.
After removing {...rest} from return statement everything is back to normal.

🛠️ Fix
To solve those issues I just needed to deconstruct props which aria hooks are using while using spread {...rest} operator.
let { children, onPress, isDisabled, ...rest } = props;

❓ My question
If we are using spread {...rest} operator we should also deconstruct all of aria props or is there other/better way to handle that?

[reidbarber]

You don't want to spread all your component's props onto the element, because many props aren't valid DOM attributes like your error shows.

We have a filterDOMProps that can help with this:

import {filterDOMProps, mergeProps} from '@react-aria/utils';
...
let ref = useRef(null);
let { buttonProps } = useButton(props, ref);
let domProps = filterDOMProps(props);

<button {...mergeProps(buttonProps, domProps)}>
  ...
</button

And mergeProps is a utility that merges multiple props objects together, where event handlers are chained.

Also keep in mind that you can also pass anything you want down into the DOM element, after spreading the props returned by the react-aria hook.

[Agile-fox]

Thanks, this is what I needed 😄

[mryechkin]

@reidbarber that looks like a useful util - any reason why it's not documented in the docs?

[reidbarber]

@mryechkin not that I can think of. I'll bring it up with the team and see if it's something we'd want to document.