[DatePicker] Provide ability to add css className to DatePicker Dialog for Selenium WebDriver Testing

[ghost]

Versions

• Material-UI: 0.15.4
• React: 15.3.2
• Browser: Any

Description

We have a large scale, in-house react application we would like to incorporate the DatePicker into. However, the <DatePicker /> component does not provide a way to assign a className to the Picker's Dialog Component, nor it's Calendar Component. This means there is no reliable way to locate a specific <DatePicker />'s associated Calendar to automate our integration tests using Capybara & Selenium WebDriver.

In the code below, there is a [data-reactroot] attribute assigned to the outermost div (where styling is applied by material-ui.) If we could assign a className to this element, perhaps along the lines of <DatePicker containerClassName="" />, that would provide a hook for the webdriver to find, so we could automate the UI events from there. Ideally, we'd like to be able to differentiate between the dialog component and the calendar component, since the Input component already receives the className assigned to <DatePicker />.

Possibilities:

<DatePicker containerClassName="" />
<DatePicker dialogClassName="" calendarClassName="" />

Or, alternatively, make the id required for <DatePicker /> and provide constructed id's on the dialog and calendar's container elements.

<DatePicker id="myDatePicker" />
<DatePicker.Input id="myDatePicker_Input" />
<DatePicker.Dialog id="myDatePicker_Dialog" />
<DatePicker.Calendar id="myDatePicker_Calendar />

Below is the output in the DOM of the rendered dialog and calendar components when you have clicked on a <DatePicker /> component. I haven't expanded everything, just enough to illustrate the point.

Images & references

[chrouzz]

Any solution for this problem?

[adepatie]

Second this issue, running into this same problem right now.

[Quas94]

Also would like this feature.

[aljones15]

add a testId prop or something else navigating your project in selenium is extremely taxing

[oliviertassinari]

Closing for #4787

[nitte93]

This issue it closed? But, I tried passing dialogClassName and containerClassName to the Datepicker component, and unfortunately none of them gets applied. The document also doesn't talk much about these two props. How do I pass a classname to datepicker's dialog component. Any help would be appreciated.

[oliviertassinari]

@nitte93 The issue was closed because it won't land in v0.x.

[nitte93]

@oliviertassinari it's not there in the materialui@next's too. The recommended components for datepicker on the picker page doesn't supprt passing a dialogContainerClassname.Is there any plans on that, If required I can create a PR, if not! Is there any recommended way to pass classname to datepicker dialog.

[Reshad-A]

There is no solution as of yet. However there is a workaround to pass a css class name to popup/dialog container. Pass an img tag for rightArrowIcon props of datepicker with onload function to call its parent and inject css class.

<DatePicker
   disableToolbar={true}
   variant="inline"  
   inputVariant="outlined"  
   rightArrowIcon={<img src="/images/chevron-right_1.svg" id="datepicker-arrow-right" onLoad={injectTheme}/>}   
leftArrowIcon={<img src="/images/chevron-right_1.svg" style={{transform:"rotate(180deg)"}}/>} 
....
....
....
/>

const injectTheme=()=>{
let node = document.getElementById("datepicker-arrow-right").parentNode.parentNode.parentNode.parentNode.parentNode.parentElement;
    node.classList.add("Css-Class-Name"); 
}

[huykon]

anyone have solution for this? it's so bad if I can not add a container class

[oliviertassinari]

@huykon This issue is very old. If you can reproduce the issue with v5, please open a new issue.