Appropriate use of the new render prop?

[dmitrc]

With the addition of the new render prop, one of the core rules is:

Always render the expected element type (e.g. if <button> is expected, do not render an <a>). You will see a warning in development if a mismatch is detected.

What about the following use-case though, is this considered a fair use of this new abstraction? (cc @devongovett)

<AriaInput
  {...props}
  render={(inputProps) => (
    <span>
      <input {...inputProps} />
    </span>
  )}
/>

Eg for this input specifically, we'd still pass all of the props to the appropriate element, but be able wrap it in a container (eg since inputs are not containers, and so don't render ::before/::after pseudo-elements).

FWIW, this specific use case does not lead to the warning in development, despite the mismatch taking place technically (unless the rule refers more specifically to cases like spreading <button> props onto <a> and the like, rather than a more strict must always be the same).

---

One benefit of this new paradigm in relation to this example, is that I can use AriaInput's render props to style the container, which is something I couldn't do before:

<span>
   <AriaInput {...props} />   // <- render props are here, not above :(
</span>

...unless I dropped down to the hooks level and reimplemented the whole thing ground-up:

  [props, ref] = useContextProps(props, ref ?? null, InputContext);

  const { hoverProps, isHovered } = useHover(props);
  const { focusProps, isFocused, isFocusVisible } = useFocusRing({
    isTextInput: true,
    autoFocus: props.autoFocus,
  });

  const renderProps = {
    isFocused,
    isFocusVisible,
    isHovered,
    <...>
  };

<span>
   <input
      {...mergeProps(filterHoverProps(props), focusProps, hoverProps)}
      ref={ref}
     />
</span>

[devongovett]

You can do that sometimes. You just need to adhere to the ARIA spec for the component. Usually extra wrappers are ok if they have role="presentation" so that they don't affect the accessibility tree, and are generic elements like div/span and not something interactive. This is a little fuzzy so I would recommend running an accessibility checker like aXe to check.

What we mean by "Always render the expected element type" is that the dom props passed into render need to be attached to the expected element type. In your example, inputProps needs to be attached to an <input> element.

[dmitrc]

That makes perfect sense, thanks for the clarification!