When using a custom TextField component, properties to not filter down to the component.

I am working on 2.2.4 of npm

I am trying to create a custom Material-UI input component that incorporates all the different input controls as well as custom theme and styling. When trying to apply the pickers, everything works fine for the standard pickers, but when I try to use an inline picker, the props that are supposed to filter down to the text field are being omitted from the properties.

1. I created a component that extends Input. Call it InputEx.

2. This component expects a few custom properties, let’s say “backColor” is one.

3. In my primary components render, I do this: component = <DatePicker backColor="#ff00ff" TextFieldComponent={InputEx} {...AllOtherNormalProps}/>

4. When I render “component” my InputEx recieves the backColor property normally and everything is good.

5. If I switch it up and use an inline component instead, the backColor property is not passed to the InputEx component. component = <InlineDatePicker backColor="#ff00ff" TextFieldComponent={InputEx} {...AllOtherNormalProps}/>

Now, I have gone through the source code and I can’t figure out what is going on exactly, as it looks like it should be doing exactly what it should. However, when I go through the node_modules code, I find this:

node_modules\material-ui-pickers\DatePicker\DatePickerInline.js line 39 (near the end of the line with the definition of the other variable)

other = __rest(props, [ "allowKeyboardControl", "animateYearScrolling", "disableFuture", "disablePast", "format", "forwardedRef", "labelFunc", "leftArrowIcon", "maxDate", "minDate", "initialFocusedDate", "onChange", "openToYearSelection", "renderDay", "rightArrowIcon", "shouldDisableDate", "value", "autoOk", "onlyCalendar", "views", "openTo" ]);

Now, I am not an expert and I could be very very wrong here, but it looks like the “other” variant that should be populated with all the, well, other properties to be passed to the text field component are being limited to those specific properties listed, and as such, any property not in the list is omitted. But I can’t figure out how to fix this in the primary typeScript source.

I am kind of stuck. Any idea how I can get an inline component to pass the custom properties to the text field component?

PS: I have been going through the “next” branch and I can see there are quite a few changes being done, so this issue may not actually be an issue anymore. But if anyone can drop a line as to how to fix this for the current version, That’ll be great.

[dave-educode]

I have a my input component in a wrapper which is then passed into the datepicker which is then wrapped in a styled component. I need to filter the custom props before I pass them into the material-ui input or I get errors in the console about properties and I was filtering my custom props on the wrong wrapper. Basically, I glorified typo. I’m apologize for bringing it up here.

[mmlumba]

@dave-educode what was the problem you mentioned in your latest comment? I’m experiencing this similar issue and would like some insight