Floating label is not yet on top of the inputbox when prefilled by Chrome

[zouterover]

On Chrome Version 94.0.4606.81 (Official Build) (arm64) inputboxes are prefilled, however the floating label is not yet on top of the box (see first image). As soon as I click the page the label does float on top (second image).

Expected behavior: When input boxes are prefilled the label should be on top.

I checked Safari and Firefox and there this is not an issue.

Used code:

  <div className="field mt-6">
      <span className="p-float-label p-input-icon-right">
          <i className="pi pi-envelope"/>
          <Controller name="email" control={control}
                      rules={{
                          required: 'Email is verplicht.',
                          pattern: {
                              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
                              message: 'Email is ongeldig.'
                          }
                      }}
                      render={({field, fieldState}) => (
                          <InputText id={field.name} {...field}
                                     className={classNames({'p-invalid': fieldState.invalid})}/>
                      )}/>
          <label htmlFor="email"
                 className={classNames({'p-error': !!errors.email})}>E-mailadres</label>
      </span>
      {getFormErrorMessage('email')}
  </div>

[melloware]

I actually think this might be a Chrome issue where when it fills out an AutoComplete form it doesn't register any event on the Input box for the placeholder code to be triggered by.

See this Stack Overflow answer: https://stackoverflow.com/a/11710295/502366