Some props are not properly passing to the renderInput component

[cyclops26]

Not sure if this is be design, but there are some props: className, fullWidth (tested thus far) on the Picker level do not pass into ...props for the renderInput. Based on the alpha 6 change log, it seemed as if the intended function was for the props of the parent Picker to pass into the renderInput component. Therefore the <div class="MuiFormControl-root MuiTextField-root" data-mui-test="keyboard-date-input"> element is not modified with your className or MuiFormControl-fullWidth class additions unless you put the className or fullWidth props directly on your renderInput component; TextField, etc.

If this is not the case, and it is intended for styling props etc. to be placed directly on the renderInput component, feel free to close this as it may just be a matter of documentation/documentation clarification before this version sees GA.

Thanks!

Environment

Tech	Version
@material-ui/pickers	4.0.0-alpha.7
material-ui	4.9.14
TypeScript	3.5.1
React	16.8.6
Browser	Chrome: 81.0.4044.138
Peer library	"@date-io/date-fns": "1.3.13" , "@date-io/dayjs": "2.5.1", "@date-io/luxon": "2.5.1"

Steps to reproduce

Does Not Work

<TimePicker
                renderInput={ props =>
                  <TextField
                    { ...props }
                    error={formStore.enteredTimeError !== null}
                  />
                }
                disableMaskedInput
                disableOpenPicker
                id="time-picker--enteredTime"
                label="Time entered"
                value={formStore.enteredTime}
                onChange={enteredTime =>
                    formStore.update(enteredTime)
                }
                fullWidth
                className='myClassName'
                helperText={formStore.enteredTimeError}
/>

Working

<TimePicker
                renderInput={ props =>
                  <TextField
                    { ...props }
                    fullWidth
                    className='myClassName'
                    error={formStore.enteredTimeError !== null}
                  />
                }
                disableMaskedInput
                disableOpenPicker
                id="time-picker--enteredTime"
                label="Time entered"
                value={formStore.enteredTime}
                onChange={enteredTime =>
                    formStore.update(enteredTime)
                }
                helperText={formStore.enteredTimeError}
/>

Expected behavior

With className or fullWidth prop on either the Picker component or the renderInput component
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth myClassName" data-mui-test="keyboard-date-input">

Actual behavior

With className or fullWidth prop on the Picker component
<div class="MuiFormControl-root MuiTextField-root" data-mui-test="keyboard-date-input">

With className or fullWidth prop on the renderInput component
<div class="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth myClassName" data-mui-test="keyboard-date-input">

[oliviertassinari]

@cyclops26 These extra props are not supposed to be forwarded anywhere. Actually, we have been discussing with @dmtrKovalenko about using the exactProp() helper to warn in your case.

[cyclops26]

Thanks @oliviertassinari I was suspecting that was the case the more I dug into it. The warning sounds like a good idea as it may also save trying to accommodate/update a list in the documentation in regard to what is and is not forwardable.