[joy-ui][Input][FormControl][Select] Example component use from docs cause console error

[zprobinson]

Steps to reproduce

Link to live example: (required)
https://github.com/zprobinson/muijoy-nested-formcontrol

Steps:

1. Clone repository
2. npm install
3. npm run dev
4. Open to localhost:5173 and look at console

Current behavior

I am using an example in the Mui Joy documentation for the Input component and receiving an error in the console.

I am using this example.

The FormControl component apparently does not allow for nested controls as children. This is mutually exclusive with the documentation (and also my expectation) which demonstrates the ability to use decorators to create complex inputs such as an input/select combination for currency denomination.

Expected behavior

I expect to be able to copy examples from documentation and not receive errors at run time.
The example uses a Stack instead of a FormControl as the parent element. This is likely due to the error I have above. But this is kind of a tricky and unintentionally deceptive nuance. I expect to use complex form controls I design/compose inside of a form element. Inside of that form element, for all of my form controls I expect to use the FormControl component for consistency of spacing/layout/style.

I expect the form suite of components (including Form Control) to be able to support decorated children/input which allow me to capture more complex form entry needs.

Context

I have a quantity and a quantity unit of measure field in the form of my application.

Instead of 2 separate fields, the documentation implies a great solution of a combined input/select. This keeps the user experience great because the two pieces of data are tightly correlated, they should be filled out/displayed in the same location.

Your environment

npx @mui/envinfo

  Browser:
    Firefox 124.0 (64-bit)
    Edge (current-ish version, a coworker brought up the issue to me initially) (64-bit)

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 20.11.1 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.0 - C:\Program Files\nodejs\npm.CMD
    pnpm: 8.6.12 - ~\AppData\Local\pnpm\pnpm.EXE
  Browsers:
    Chrome: Not Found
    Edge: Chromium (122.0.2365.92)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4
    @emotion/styled: ^11.11.0 => 11.11.0
    @mui/base:  5.0.0-beta.40
    @mui/core-downloads-tracker:  5.15.14
    @mui/joy: ^5.0.0-beta.32 => 5.0.0-beta.32
    @mui/private-theming:  5.15.14
    @mui/styled-engine:  5.15.14
    @mui/system:  5.15.14
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @types/react: ^18.2.66 => 18.2.67
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.4.3

Search keywords: joy joyui joy-ui input form control select nest decorator documentation example

[siriwatknp]

Thanks for reporting the issue! Joy UI development is temporarily on hold as the maintainers focus on the next two major releases of Material UI