I am facing a major issue with css transitions and Angular 4. The problem arises when using an external library that includes an input counter feature. Despite knowing that no additional styling is being applied to the wrapped input, the application has a set style for inputs:
input {
&[type="text"],
&[type="password"],
&[type="email"] {
border-radius: 4px;
border: 1px solid $grey-color;
padding: 0.5rem 1rem;
outline: none;
width: 100%;
transition-property: all;
transition-duration: 300ms;
font-size: inherit;
}
}
Within the HTML template:
<input-counter
type="text"
placeholder="Name"
[maxlength]="nameMaxLength"
[(ngModel)]="name">
</input-counter>
The <input-counter> component template includes:
<style>
.input-counter-group {
display: block;
position: relative;
}
.input-counter-group span {
color: #b0b0b0;
font-size: 10px;
}
.input-counter-group .text-input-counter {
position: absolute;
line-height: 10px;
right: 0;
bottom: -13px;
}
</style>
<div class="input-counter-group">
<input
[id]="id"
[type]="type"
[ngClass]="className"
[name]="name"
[placeholder]="placeholder"
[maxlength]="maxlength"
[disabled]="disabled"
[pattern]="pattern"
[required]="required"
[readonly]="readonly"
[(ngModel)]="value"
(focus)="onFocus()"
(blur)="onBlur()">
<span *ngIf="enabled" class="text-input-counter">
<span *ngIf="displayMinLength()">{{ minlength }} characters at least required: </span>{{ counter }}<span *ngIf="displayMaxLength()">/{{ maxlength }}</span>
</span>
</div>
The issue arises upon loading the <input-counter> component, triggering a css transition on the input as if it had been initialized with the defined properties, contrary to the intended hover effect on the border color.
The root cause of this behavior was traced back to the plugin codemirror being loaded conditionally with ngIf, unknowingly affecting the input style and resulting in undesired rendering. To resolve this, I utilized [hidden] to effectively hide the element and rectify the issue.