Carbon: Datepicker angular component doesn't expanded in IE

[ChenCheress]

What package(s) are you using?

"carbon-components": "10.5.1",
"carbon-components-angular": "3.14.5"

Detailed description

Describe in detail the issue you're having.

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)">

1. We have 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

• Screenshots or code
  Screen shot in IE11:
  
  Screenshot in IE11 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.

[asudoh]

Hi 👋 have you reproduced the same problem with vanilla JS or React, or did Carbon Angular team investigate it and determined it's a non-Angular-specific issue? Otherwise, could you enter the issue at https://github.com/IBM/carbon-components-angular? Thanks!

[tw15egan]

Reference: https://github.com/IBM/carbon-components-angular/issues/716

[asudoh]

Tried https://the-carbon-components.netlify.com/?nav=date-picker and the date picker dropdown seems to be working fine with IE11. @tw15egan Did you see otherwise...? Thanks!

[tw15egan]

You're right, I just tested it as well and I'm not seeing any issues. Closing for now

[ChenCheress]

@tw15egan @asudoh
Hi guys, I reproduce it by putting the datepicker in an ibm tab like the codes I have pasted above, it still has problems when it embeded in ibm-tab. So please reopen it again and help to check, thank you !

<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>

Notes datepicker is in app-profile component.

[asudoh]

This particular issue being closed doesn't necessary mean your problem has been fixed. Here's carbon-components repo which hosts the style and vanilla/React variants. Your problem may be specific to the Angular variant. So would you want to continue the discussion at https://github.com/IBM/carbon-components-angular/issues/716?