My float label is not behaving as planned, already tried on different input focus but no success

Issue

so i'm using primeng's autocomplete and made a dropdown (single selector) and i can't seem to figure out to which input i need to focus on (or better said which is the right one) to move my label up (float label) since it isn't moving at all, it is staying

This is the html of my single selector:

  <div class="ui-float-label">
        <div class="ui-fluid">
            <p-autoComplete id="inputDropDown"
                            [suggestions]="selectionResults"
                            (completeMethod)="search($event)"
                            field="label"
                            [(ngModel)]="valueOfSingleSelection"
                            [minLength]="1"
                            [dropdown]="true"
                            [disabled]="!selectorProperties.enabled"
                            required
                            (onBlur)="setRequiredOnBlur()">

                <ng-template let-value pTemplate="selectedItem">
                    {{value.label}}
                </ng-template>
                <ng-template let-value pTemplate="item">
                    <div class="ui-helper-clearfix p-grid">
                        <div class="templateText p-col-12">{{ value.label }}</div>
                    </div>
                </ng-template>
            </p-autoComplete>
            <label for="inputDropDown" class="LapsFloatLabel">{{this.selectorProperties.labelMls}}</label>
        </div>
    </div>

And this is the scss:

  .LapsFloatLabel {
    font-size: $font-size-text-infos;
    color: $text-color-black;
    font-family: $font-style;
    position: absolute;
    pointer-events:none;
    top: 5px;
    left: 0;
    opacity:1;
    padding: 0 2px;
    -webkit-transition: 0.2s ease-in-out;
    transition: 0.2s ease-in-out;
  }

.ui-fluid {
  input:focus {
    .LapsFloatLabel {
      top: -15px;
    }
  }

And i thought that i just need to set a focus on the ui-autocomplete-input to move it up but i had no success with it

Solution

PrimeNg does provide floating labels for all components. You can use the following syntax:

<span class="ui-float-label">
        <p-autoComplete [(ngModel)]="country" inputId="float-input" [suggestions]="filteredCountriesSingle" (completeMethod)="filterCountrySingle($event)" field="name" [size]="30"
            [minLength]="1"></p-autoComplete>
        <label for="float-input">Username</label>
</span>

See https://github.com/primefaces/primeng/issues/4319

Answered By - StyrianDev