Unexpected behavior with SfMaskedTextBox with Placeholder and Clear Button

[Peter]

Hello,

I observed an unexpected behavior in the following scenario. Is this a planned behavior?

SfMaskedTextBox Component

FloatLabelType=Auto

Placeholder = "some text"

ShowClearButton = true

Mask=""

Observation:

In the <label> HTML element the e-label-bottom class is injected when the object is created.

When the textbox is active, e-label-top is injected and e-label-bottom is removed.

When the textbox is empty and inactive, e-label-bottom is injected and e-label-top is removed.

Scenario:

Activate the textbox.

Placeholder moves above the textbox...e-label-top injected

Type some text.

Click the clear button or backspace over the typed text.

Placeholder stays above the textbox...e-label-bottom injected

Deactivate the textbox...e-label-bottom is injected

Peter

[Deepak Ramakrishnan]

Hi Peter, 

 

Greetings from Syncfusion support. 

 

Yes it is the behavior of the blazor masked textbox component. You can also refer different FloatLabelType property usage under following documentation . Also we request you to provide the exact requirement in your end to proceed further. 

 

 

API documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html#Syncfusion_Blazor_Inputs_SfMaskedTextBox_FloatLabelType  

 

 

Thanks, 

Deepak R. 

 

[Peter]

Thank you for the prompt response. I accept that this is the planned behavior however the inconsistent usage of e-label-top and e-label-bottom makes it hard to correctly style the <label> element.

My code does some styling manipulation on the Placeholder based on whether it is being shown inside the textbox or above the textbox. This styling triggers off the e-label-top and e-label-bottom classes. This only applies to FloatLabelType = Auto. In Always mode e-label-top is always present. In None mode the <label> element isn't present.

The behavior I noted in the Scenario below results in the situation when e-label-bottom is injected in the <label> element when the Placeholder is shown above the textbox. The inconsistency just adds complexity to by custom styling efforts.

And, just to provide additional details...when the Scenario below is executed when a Mask is applied, the e-label-top class remains in the <label> element after entering text and clicking the clear button. This is the behavior I would expect regardless of the Mask property setting.

Thanks for your help.

Peter

[Ponmani Murugaiyan]

Hi Peter, 

Thanks for the update. 

We able to replicate the reported issue and currently we are validating in our end. We will update further details in 2 business days (November 29, 2021). We appreciate your patience until then. 

Regards, 

Ponmani M 

[Deepak Ramakrishnan]

Hi Peter, 

 

Thanks for your patience. 

 

We have considered the reported issue ““e-label-bottom” class not updated properly for input”  as a bug at our end and fix for this ,will be included in Vol-4 release to be rolled out on end of December. You can track the details regarding this defect with the below feedback link.  

 

 Feedback link : https://www.syncfusion.com/feedback/30756/-e-label-bottom-class-not-updated-properly-for-input  

 

 

We appreciate your patience until then. 

 

Thanks, 

Deepak R.