Datepicker angular component doesn't expanded in IE
See original GitHub issueWhat 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)">
- We have 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
-
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.
Issue Analytics
- State:
- Created 4 years ago
- Comments:6 (5 by maintainers)
Top GitHub Comments
You’re right, I just tested it as well and I’m not seeing any issues. Closing for now
Reference: https://github.com/IBM/carbon-components-angular/issues/716