Datepicker component doesn't expanded in IE

Detailed description

Describe in detail the issue you’re having. when I click a single datepicker input in IE11, it doesn’t show it’s datepicker panel. And it works well in chrome. Is this a feature request (new component, new icon), a bug, or a general issue? It should be a bug. Is this issue related to a specific component? Datepicker component What did you expect to happen? What happened instead? What would you like to see changed? For a single datepicker, when I click datepicker input in IE11, I expect to see a panel whick show dates, but it doesn’t appear, only the datepicker input was focusing. What browser are you working in? IE11 What version of the Carbon Design System are you using? “carbon-components”: “10.5.1”, “carbon-components-angular”: “3.14.5”, What offering/product do you work on? Any pressing ship or release dates we should be aware of? Project “Select For IBM”, It has a plan to go prod in September.

Steps to reproduce the issue

<ibm-date-picker [label]=“‘label’” [placeholder]=“‘placeholder’” [theme]=“‘dark’” [value]=“interviewDate” [disabled]=“false” [invalid]=“false” [invalidText]=“‘invalidText’” [dateFormat]=“‘m/d/Y’” (valueChange)=“valueChange($event)”> </ibm-date-picker>

1. There is a datepicker in app-profile component
2. And It’s a subcomponent in a tab component, like the following:

<ibm-tabs>
            <ibm-tab #setup heading="{{'REQDETAIL.TAB1' | translate}}" (selected)="onTabSelect(0)">
              <app-interview-setup></app-interview-setup>
            </ibm-tab>
            <ibm-tab #candidates heading="{{'REQDETAIL.TAB2' | translate}}" (selected)="onTabSelect(1)">
                <app-candidates-in-progress [role]="role" [candidatesTabSelected]="isSelectedCanidates"></app-candidates-in-progress>
                <app-profile (editPlanEmit)="activeFirstTab()" [allSkills]="allSkills"></app-profile>
            </ibm-tab>
        </ibm-tabs>

1. When I click the datepicker input, it doesn’t show datepicker select panel in IE11, but it’s normal in Chrome.

Additional information

Screen shot in IE11:

Screenshot in IE debug: The DIV element for class=“flatpickr-calendar animate open” does compute it’s position as the above picture, in Chrome, it has a style to show it’s position(Screenshot in Chrome console):

• Notes It also generates multiple DIV element for class=“flatpickr-calendar animate open” in IE11. The styles in IE is not the same with Chrome. When I resize the screen, the date-select panel will be shown.

[ChenCheress]

We’ll take some time to investigate further … Just want to confirm that you’re still experiencing this issue with carbon-components-angular@3.15.1?

Yes, It’s carbon-components-angular@3.15.1

[zvonimirfras]

Hey @ChenCheress, is this still relevant? Since it’s been a long time since the last update to this issue, I’ll close this. Please reopen if still needed and updating to the latest version of carbon-components-angular doesn’t fix it 😃