[joy-ui][Input][FormControl][Select] Example component use from docs cause console error #41599
Labels
component: FormControl
The React component
component: input
This is the name of the generic UI component, not the React module!
component: select
This is the name of the generic UI component, not the React module!
package: joy-ui
Specific to @mui/joy
status: waiting for maintainer
These issues haven't been looked at yet by a maintainer
Steps to reproduce
Link to live example: (required)
https://github.com/zprobinson/muijoy-nested-formcontrol
Steps:
npm install
npm run dev
localhost:5173
and look at consoleCurrent behavior
I am using an example in the
Mui Joy
documentation for theInput
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 aFormControl
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 aform
element. Inside of that form element, for all of my form controls I expect to use theFormControl
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
Search keywords: joy joyui joy-ui input form control select nest decorator documentation example
The text was updated successfully, but these errors were encountered: