Improve renderInput spreading experience
#1760
Conversation
|
This pull request is being automatically deployed with Vercel (learn more). 🔍 Inspect: https://vercel.com/mui-org/material-ui-pickers/3je15dl4t |
dmtrKovalenko
changed the title
renderInput spreading expreiencerenderInput spreading experience
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
Codecov Report
@@ Coverage Diff @@
## next #1760 +/- ##
=======================================
Coverage 90.70% 90.70%
=======================================
Files 77 77
Lines 2324 2324
Branches 439 439
=======================================
Hits 2108 2108
Misses 174 174
Partials 42 42
Continue to review full report at Codecov.
|
| alignItems: 'center', | ||
| }); | ||
|
|
||
| function CustomInput() { |
There was a problem hiding this comment.
?
export default function CustomInput()
| @@ -0,0 +1,28 @@ | |||
| import React, { useState } from 'react'; | |||
There was a problem hiding this comment.
?
import * as React from 'react';
| <TextField {...startProps} inputProps={{ 'data-mui-test': 'desktop-range-picker' }} /> | ||
| <TextField | ||
| {...startProps} | ||
| inputProps={{ ...startProps.inputProps, 'data-mui-test': 'desktop-range-picker' }} |
There was a problem hiding this comment.
Side question, should we use a label to differentiate the two inputs instead of data-mui-test? Like label="Start date" and label="End date"?
| #### Custom input component | ||
|
|
||
| We are providing default localized formats, but you can change this behaviour with `format` and `mask` props. | ||
| You can customize rendering input by `renderInput` prop. But make sure you will spread `ref` and `inputProps` correctly to the custom input component. |
There was a problem hiding this comment.
Maybe?
The `renderInput` prop allows you to customize the rendered input.
The first argument of this render prop contains props that you need to forward.
Pay specific attention to the `ref` and `inputProps` keys.
cc @mbrookes
There was a problem hiding this comment.
We must specify that props are https://material-ui.com/api/text-field/#textfield-api. Will refer this comment at #1761
There was a problem hiding this comment.
By the way the type of renderInput looks to awful
(props: any) => ReactElement<any, string | ... | (new (props: any) => Component<any, any, any>)> | null) | (new (props: any) => Component<...>Because of core TextField typings (mui/material-ui#20716)
There was a problem hiding this comment.
Would a similar approach to Autocomplete work?
export interface AutocompleteRenderInputParams {
id: string;
disabled: boolean;
InputLabelProps: object;
InputProps: {
ref: React.Ref<any>;
className: string;
startAdornment: React.ReactNode;
endAdornment: React.ReactNode;
};
inputProps: object;
}
/**
* Render the input.
*
* @param {object} params
* @returns {ReactNode}
*/
renderInput: (params: AutocompleteRenderInputParams) => React.ReactNode;| @@ -0,0 +1,28 @@ | |||
| import React, { useState } from 'react'; | |||
| import { styled } from '@material-ui/core'; | |||
There was a problem hiding this comment.
?
import { styled } from '@material-ui/core/styles';
This PR closes #1751 and closes #1758