Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Console warning while using allowEmpty with a SelectInput in a form #2147

Closed
ssavajols opened this issue Aug 9, 2018 · 2 comments
Closed

Console warning while using allowEmpty with a SelectInput in a form #2147

ssavajols opened this issue Aug 9, 2018 · 2 comments
Labels
bug good first issue

Comments

@ssavajols
Copy link

What you were expecting:
Expecting to allow empty value with a SelectInput in a form.

What happened instead:
Got warning from console :

Steps to reproduce:
Create a form with a ReferenceInput, add allowEmpty prop and use a SelectInput inside it.

Related code:

        <ReferenceInput
          source="marque_id"
          reference="Marque"
          allowEmpty={true}
          className={classes.reduced}
        >
          <SelectInput optionText="libelle" />
        </ReferenceInput>

Other information:
The use of empty string value instead of null value for the empty option, seems to make our application working properly.

Environment

  • React-admin version: 2.1.5
  • React version: 16.3.1
  • Browser: Chrome
  • Stack trace (in case of a JS error):
index.js:2178 Warning: Failed prop type: The prop `value` is marked as required in `SelectInput`, but its value is `null`.
    in SelectInput (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by TextField)
    in Select (created by WithStyles(Select))
    in WithStyles(Select) (created by TextField)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by SelectInput)
    in SelectInput (created by WithStyles(SelectInput))
    in WithStyles(SelectInput) (created by TranslatedComponent(WithStyles(SelectInput)))
    in TranslatedComponent(WithStyles(SelectInput)) (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in ReferenceInputView (created by ReferenceInputController)
    in ReferenceInputController (created by Connect(ReferenceInputController))
    in Connect(ReferenceInputController) (created by TranslatedComponent(Connect(ReferenceInputController)))
    in TranslatedComponent(Connect(ReferenceInputController)) (created by ReferenceInput)
    in ReferenceInput (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by FormGroup)
    in div (created by FormGroup)
    in FormGroup (created by WithStyles(FormGroup))
    in WithStyles(FormGroup) (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleForm)
    in div (created by SimpleForm)
    in form (created by SimpleForm)
    in SimpleForm (created by WithStyles(SimpleForm))
    in WithStyles(SimpleForm) (created by Form(WithStyles(SimpleForm)))
    in Form(WithStyles(SimpleForm)) (created by Connect(Form(WithStyles(SimpleForm))))
    in Connect(Form(WithStyles(SimpleForm))) (created by ReduxForm)
    in ReduxForm (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by ImageEditView)
    in div (created by EditView)
    in EditView (created by EditController)
    in EditController (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by Edit)
    in Edit (created by ImageEditView)
    in ImageEditView (created by WithStyles(ImageEditView))
    in WithStyles(ImageEditView) (created by WithPermissions)
    in WithPermissions (created by Connect(WithPermissions))
    in Connect(WithPermissions) (created by getContext(Connect(WithPermissions)))
    in getContext(Connect(WithPermissions)) (created by Route)
    in Route (created by MediathequeComponent)
    in Switch (created by MediathequeComponent)
    in MuiThemeProvider (created by MediathequeComponent)
    in MediathequeComponent (created by WithStyles(MediathequeComponent))
    in WithStyles(MediathequeComponent) (created by TranslatedComponent(WithStyles(MediathequeComponent)))
    in TranslatedComponent(WithStyles(MediathequeComponent)) (created by SubAppWrapper)
    in SubAppWrapper (created by IframeMediatheque)
    in IframeMediatheque (created by Route)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Connect(CoreAdminRouter))
    in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
    in getContext(Connect(CoreAdminRouter)) (created by Route)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by CoreAdmin)
    in TranslationProvider (created by withContext(TranslationProvider))
    in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
    in Connect(withContext(TranslationProvider)) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (created by App)
    in App
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
checkPropTypes @ checkPropTypes.js:52
validatePropTypes @ react.development.js:1233
createElementWithValidation @ react.development.js:1321
render @ Input.js:520
finishClassComponent @ react-dom.development.js:8389
updateClassComponent @ react-dom.development.js:8357
beginWork @ react-dom.development.js:8982
performUnitOfWork @ react-dom.development.js:11814
workLoop @ react-dom.development.js:11843
renderRoot @ react-dom.development.js:11874
performWorkOnRoot @ react-dom.development.js:12449
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
interactiveUpdates @ react-dom.development.js:12597
interactiveUpdates @ react-dom.development.js:1958
dispatchInteractiveEvent @ react-dom.development.js:4259
index.js:2178 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components.
    in input (created by SelectInput)
    in div (created by SelectInput)
    in SelectInput (created by Input)
    in div (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by TextField)
    in Select (created by WithStyles(Select))
    in WithStyles(Select) (created by TextField)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by SelectInput)
    in SelectInput (created by WithStyles(SelectInput))
    in WithStyles(SelectInput) (created by TranslatedComponent(WithStyles(SelectInput)))
    in TranslatedComponent(WithStyles(SelectInput)) (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in ReferenceInputView (created by ReferenceInputController)
    in ReferenceInputController (created by Connect(ReferenceInputController))
    in Connect(ReferenceInputController) (created by TranslatedComponent(Connect(ReferenceInputController)))
    in TranslatedComponent(Connect(ReferenceInputController)) (created by ReferenceInput)
    in ReferenceInput (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by FormGroup)
    in div (created by FormGroup)
    in FormGroup (created by WithStyles(FormGroup))
    in WithStyles(FormGroup) (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleForm)
    in div (created by SimpleForm)
    in form (created by SimpleForm)
    in SimpleForm (created by WithStyles(SimpleForm))
    in WithStyles(SimpleForm) (created by Form(WithStyles(SimpleForm)))
    in Form(WithStyles(SimpleForm)) (created by Connect(Form(WithStyles(SimpleForm))))
    in Connect(Form(WithStyles(SimpleForm))) (created by ReduxForm)
    in ReduxForm (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by ImageEditView)
    in div (created by EditView)
    in EditView (created by EditController)
    in EditController (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by Edit)
    in Edit (created by ImageEditView)
    in ImageEditView (created by WithStyles(ImageEditView))
    in WithStyles(ImageEditView) (created by WithPermissions)
    in WithPermissions (created by Connect(WithPermissions))
    in Connect(WithPermissions) (created by getContext(Connect(WithPermissions)))
    in getContext(Connect(WithPermissions)) (created by Route)
    in Route (created by MediathequeComponent)
    in Switch (created by MediathequeComponent)
    in MuiThemeProvider (created by MediathequeComponent)
    in MediathequeComponent (created by WithStyles(MediathequeComponent))
    in WithStyles(MediathequeComponent) (created by TranslatedComponent(WithStyles(MediathequeComponent)))
    in TranslatedComponent(WithStyles(MediathequeComponent)) (created by SubAppWrapper)
    in SubAppWrapper (created by IframeMediatheque)
    in IframeMediatheque (created by Route)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Connect(CoreAdminRouter))
    in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
    in getContext(Connect(CoreAdminRouter)) (created by Route)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by CoreAdmin)
    in TranslationProvider (created by withContext(TranslationProvider))
    in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
    in Connect(withContext(TranslationProvider)) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (created by App)
    in App
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
validateProperties$1 @ react-dom.development.js:14463
validatePropertiesInDevelopment @ react-dom.development.js:14669
diffProperties$1 @ react-dom.development.js:15008
prepareUpdate @ react-dom.development.js:16251
completeWork @ react-dom.development.js:9341
completeUnitOfWork @ react-dom.development.js:11671
performUnitOfWork @ react-dom.development.js:11831
workLoop @ react-dom.development.js:11843
renderRoot @ react-dom.development.js:11874
performWorkOnRoot @ react-dom.development.js:12449
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
interactiveUpdates @ react-dom.development.js:12597
interactiveUpdates @ react-dom.development.js:1958
dispatchInteractiveEvent @ react-dom.development.js:4259
index.js:2178 Warning: A component is changing a controlled input of type hidden to be uncontrolled. Input elements should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components
    in input (created by SelectInput)
    in div (created by SelectInput)
    in SelectInput (created by Input)
    in div (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by TextField)
    in Select (created by WithStyles(Select))
    in WithStyles(Select) (created by TextField)
    in div (created by FormControl)
    in FormControl (created by WithStyles(FormControl))
    in WithStyles(FormControl) (created by TextField)
    in TextField (created by SelectInput)
    in SelectInput (created by WithStyles(SelectInput))
    in WithStyles(SelectInput) (created by TranslatedComponent(WithStyles(SelectInput)))
    in TranslatedComponent(WithStyles(SelectInput)) (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in ReferenceInputView (created by ReferenceInputController)
    in ReferenceInputController (created by Connect(ReferenceInputController))
    in Connect(ReferenceInputController) (created by TranslatedComponent(Connect(ReferenceInputController)))
    in TranslatedComponent(Connect(ReferenceInputController)) (created by ReferenceInput)
    in ReferenceInput (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by ConnectedField)
    in ConnectedField (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by FormField)
    in FormField (created by Connect(FormField))
    in Connect(FormField) (created by WithFormField)
    in WithFormField (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by FormGroup)
    in div (created by FormGroup)
    in FormGroup (created by WithStyles(FormGroup))
    in WithStyles(FormGroup) (created by ImageEditView)
    in div (created by FormInput)
    in FormInput (created by WithStyles(FormInput))
    in WithStyles(FormInput) (created by SimpleForm)
    in div (created by SimpleForm)
    in form (created by SimpleForm)
    in SimpleForm (created by WithStyles(SimpleForm))
    in WithStyles(SimpleForm) (created by Form(WithStyles(SimpleForm)))
    in Form(WithStyles(SimpleForm)) (created by Connect(Form(WithStyles(SimpleForm))))
    in Connect(Form(WithStyles(SimpleForm))) (created by ReduxForm)
    in ReduxForm (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by ImageEditView)
    in div (created by EditView)
    in EditView (created by EditController)
    in EditController (created by TranslatedComponent(undefined))
    in TranslatedComponent(undefined) (created by Connect(TranslatedComponent(undefined)))
    in Connect(TranslatedComponent(undefined)) (created by Edit)
    in Edit (created by ImageEditView)
    in ImageEditView (created by WithStyles(ImageEditView))
    in WithStyles(ImageEditView) (created by WithPermissions)
    in WithPermissions (created by Connect(WithPermissions))
    in Connect(WithPermissions) (created by getContext(Connect(WithPermissions)))
    in getContext(Connect(WithPermissions)) (created by Route)
    in Route (created by MediathequeComponent)
    in Switch (created by MediathequeComponent)
    in MuiThemeProvider (created by MediathequeComponent)
    in MediathequeComponent (created by WithStyles(MediathequeComponent))
    in WithStyles(MediathequeComponent) (created by TranslatedComponent(WithStyles(MediathequeComponent)))
    in TranslatedComponent(WithStyles(MediathequeComponent)) (created by SubAppWrapper)
    in SubAppWrapper (created by IframeMediatheque)
    in IframeMediatheque (created by Route)
    in Route (created by CoreAdminRouter)
    in Switch (created by CoreAdminRouter)
    in div (created by CoreAdminRouter)
    in CoreAdminRouter (created by Connect(CoreAdminRouter))
    in Connect(CoreAdminRouter) (created by getContext(Connect(CoreAdminRouter)))
    in getContext(Connect(CoreAdminRouter)) (created by Route)
    in Route (created by CoreAdmin)
    in Switch (created by CoreAdmin)
    in Router (created by ConnectedRouter)
    in ConnectedRouter (created by CoreAdmin)
    in TranslationProvider (created by withContext(TranslationProvider))
    in withContext(TranslationProvider) (created by Connect(withContext(TranslationProvider)))
    in Connect(withContext(TranslationProvider)) (created by CoreAdmin)
    in Provider (created by CoreAdmin)
    in CoreAdmin (created by withContext(CoreAdmin))
    in withContext(CoreAdmin) (created by App)
    in App
__stack_frame_overlay_proxy_console__ @ index.js:2178
printWarning @ warning.js:33
warning @ warning.js:57
updateWrapper @ react-dom.development.js:2866
updateProperties$1 @ react-dom.development.js:15191
commitUpdate @ react-dom.development.js:16289
commitWork @ react-dom.development.js:10354
commitAllHostEffects @ react-dom.development.js:11408
callCallback @ react-dom.development.js:100
invokeGuardedCallbackDev @ react-dom.development.js:138
invokeGuardedCallback @ react-dom.development.js:187
commitRoot @ react-dom.development.js:11559
completeRoot @ react-dom.development.js:12502
performWorkOnRoot @ react-dom.development.js:12452
performWork @ react-dom.development.js:12370
performSyncWork @ react-dom.development.js:12347
interactiveUpdates @ react-dom.development.js:12597
interactiveUpdates @ react-dom.development.js:1958
dispatchInteractiveEvent @ react-dom.development.js:4259
@fzaninotto fzaninotto added the bug label Aug 24, 2018
@fzaninotto
Copy link
Member

Bug confirmed

@djhi djhi mentioned this issue Aug 28, 2018
Merged
djhi added a commit that referenced this issue Aug 28, 2018
@djhi
[RFR] Fix SelectInput empty value
993e866 
Fixes #2147
@edy
Copy link
Contributor

edy commented Jan 17, 2019

Well, this "bug" introduced a bug in our application which expects a null, not an empty string

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug good first issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@edy @fzaninotto @Kmaschta @ssavajols