Blazor DateRangePicker FloatLabelType.Auto Bug

[Ahmet]

Hello,

I see an interesting bug with SFDateRangePicker when FloatLabelType is set to "FloatLabelType.Auto". 

When you open the DatePicker popup by clicking the calendar icon without clicking the text field before, the text field is distorted, as seen in the picture.
If you first click the text field, this bug does not occur despite how many times you open the calendar popup.

It doesn't happen with either FloatLabelType.Never or FloatLabelType.Always.

Additionally, you will also see that the SFDateRangePicker with FloatLabelType.Never has a higher baseline than the others, thus not aligning with them:

I have attached the example project.

Attachment: BlazorWebSfDateRangeBug_a1ec037c.zip

[Berly Christopher]

Hi Ahmet, 

  

Greetings from Syncfusion support. 

  

Issue 1: 

  

When you open the DatePicker popup by clicking the calendar icon without clicking the text field before, the text field is distorted, as seen in the picture. 

  

Response: 

  

We were able to reproduce the reported issue. So, we will validate and update the further details in two business days (7^th July 2021). 

  

Issue 2: 

  

Additionally, you will also see that the SFDateRangePicker with FloatLabelType.Never has a higher baseline than the others, thus not aligning with them. 

  

Response: 

  

We were able to reproduce the reported issue at our end. So, we will validate and update the further details in two business days (7^th July 2021). Until then, please use the below work around solution to get rid of the reported issue. 

  

<div class="form-row">     

    <div class="col-md-4"> 

        <SfDateRangePicker CssClass="e-custom" TValue="DateTime?" 

                           FloatLabelType="FloatLabelType.Never" 

                           Placeholder="Choose - Float Never"> 

        </SfDateRangePicker> 

    </div>     

</div> 

<style> 

    .e-custom.e-input-group, .e-custom.e-input-group.e-control-wrapper { 

        margin-top: 16px; 

    } 

</style> 

 

  

Modified sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorWebSfDateRangeBug1527073413  

  

Regards, 

Berly B.C 

[Berly Christopher]

Hi Ahmet, 

  

Thanks for the patience. 

  

Issue 1: 

  

When you open the DatePicker popup by clicking the calendar icon without clicking the text field before, the text field is distorted, as seen in the picture.  

  

Response: 

  

We have confirmed the reported issue as a bug at our end and this fix will be included in our weekly patch release which is expected to be rolled out on 20^th July 2021. We appreciate your patience until then. 

  

Please track the status of this issue from the below feedback link. 

  

Feedback: https://www.syncfusion.com/feedback/26739  

  

Issue 2: 

  

Additionally, you will also see that the SFDateRangePicker with FloatLabelType.Never has a higher baseline than the others, thus not aligning with them.  

  

Response: 

  

As we mentioned earlier, we suggest you to use the solution by CSS level in the application itself.  

  

Regards, 

Berly B.C 

[Ahmet]

Thanks a lot, looking forward to seeing the next version.

[Berly Christopher]

Hi Ahmet,

 

Thanks for your patience.   

 

We are glad to announce that fix for the issue “If floatLabelType auto then black border is applied in the DateRangePicker input element" has been rolled out in the weekly patch release 19.2.47. We request you to update the Nuget to latest version to get rid of this issue.   

                                                                                                     

 

Please find the release notes from the below link.   

 

Release notes: https://blazor.syncfusion.com/documentation/release-notes/19.2.47/?type=all#daterangepicker    

  

Please let us know if you need any further assistance on this.   

 

Feedback: https://www.syncfusion.com/feedback/26739/   

  

Regards,   

Berly B.C