FloatingLabel Text Overlap with Component Value

Environment

Description

The FloatingLabel text overlap with the component value.

Cause

The floating animation will not work when the value of the input control is set programmatically. Instead the floating label and the component value will overlap.

In general, the FloatingLabel relies on handling valueChange and focus events. But neither is triggered when the value is changed programmatically.

Solution

To workaround this issue, you can utilize any of the following approaches:

• Use Angular forms by utilizing the ngModel or the formControl binding.
• Manually focus the component after the value is updated.

The following example demonstrate how to update and focus the MultiSelect component programmatically.