Datepicker component doesn't expanded in IE
See original GitHub issueDetailed 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>
- There is a datepicker in app-profile component
- 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>
- 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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (4 by maintainers)
Yes, It’s
carbon-components-angular@3.15.1
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 😃