Unexpected behaviors with RadMaskedTextInput

2 posts, 0 answers
  1. Salman Anwar
    Salman Anwar avatar
    4 posts
    Member since:
    Jun 2010

    Posted 24 Oct Link to this post

     We are in the process of upgrading the version of Telerik we are using in our app.  We are currently using 2013.3.1316.  We have encapsulated RadMaskedTextBox in a control that allows us to create a masked field.  The creation is done in code, but a simple case example in xaml would look like
     
            <telerik:RadMaskedTextBox Mask="(000) 000-0000" MaskType="Standard" Placeholder=" " SelectionOnFocus="SelectAll" />

    We are upgrading to 2017.3.1018.  Using the RadMaskedTextInput I've tried reproducing the above as follows:

            <telerik:RadMaskedTextInput Mask="(###) ###-####"  Placeholder=" " SelectionOnFocus="SelectAll" TextMode="MaskedText" SectionsNavigationMode="None" IsLastPositionEditable="False"  InputBehavior="Insert"  />

    With the RadMaskedTextBox implementation, we were accustomed to seeing the following behaviors.
    - Tab in to the empty field
    - Type "1234567890"
    - The value in the field appears as "(123) 456-7890"
    - Tab out of the field and back into the field.
    - Upon entering the field, the entire content of the field is selected
    - Type "1"
    - The value in the field appears as "(1  )    -    "
    - Continute typing "234567890"
    - The value in the field appears as "(123) 456-7890"

    With the RadMaskedTextInput, we are seeing the following behaviors:

    Issue 1:
    - Tab in to the empty field
    - Type "1234"
    - We'd expect the value in the field to appear as "(123) 4  -    "
    - Instead, the value in the field appears as "(123)    -    "
    - Also, note, when you type the 3, the cursor is positioned to the right of the 3 and when you type 4, the cursor moves one position to the right.
    - Type "567890"
    - The value in the field appears as "(123) 567-890 "
    --This is unexpected.  If the phone number the user is entering is "(123) 456-7890", the 4 is not showing up.
    --Note:  If the placeholder is "_" instead of " ", this doesn't happen.

    Issue 2: 
    - Tab in to the empty field
    - Type "123 4567890"  (Notice the space to get past the issue described above"
    - The value in the field appears as "(123) 456-7890"
    - Tab out of the field and back into the field.
    - Upon entering the field, the entire content of the field is selected
    - Type "1"
    -- I'm expecting the value of the field to be "(1  )    -    "
    -- Instead the value is "(123) 456-7890", though the selection highlight has changed so that the "1" is no longer highlighted.
    - Type "2"
    - Now the field value is what I would expect - "(12 )    -    ", but it should have cleared out on the first keystroke.


    Issue 3: 
    - Tab in to the empty field
    - Type "123 4567890"  (Notice the space to get past the issue described above"
    - The value in the field appears as "(123) 456-7890"
    - Tab out of the field and back into the field.
    - Upon entering the field, the entire content of the field is selected
    - Type "9"
    -- I'm expecting the value of the field to be "(9  )    -    "
    -- Instead the value is "(923) 456-7890", though the selection highlight has changed so that the "1" is no longer highlighted.
    - Type "8"
    - Unlike with Issue 2 above, the remaining text doesn't clear out.  Instead the following occurs:
    - The value appears as "(982)3456-7890"
    - The selection highlight is removed.
    -At ths point, if I clear the field the value appears as "(   )3   -    "
    -That "3" is stuck and there is no way to clear it.

  2. Petar Mladenov
    Admin
    Petar Mladenov avatar
    2997 posts

    Posted 26 Oct Link to this post

    Hi Salman,

    I hope I will address the upgrading issues with the following tips:
      
    - you have hit issues based on the fact the Placeholder is space and also there is such one in the Mask. So parsing issues arise internally and there is no mechanism to easy differ a mask space symbol from placeholder at some editing point. To workaround this you can use breaking space for the placeholder:

      Placeholder="&#160;" 

    - Selecting All then typing does not clear the whole text by design, it does clear it when the Mask is empty (no-mask, Mask=""). To turn this on you can use the following code:
    <telerik:RadMaskedTextInput Mask="(###) ###-####" 
                                           Width="300"                                       
                                           Placeholder=" "
                                            
                                       SelectionOnFocus="SelectAll"
                                       TextMode="MaskedText"
                                       SectionsNavigationMode="None"
                                       IsLastPositionEditable="False" 
                                       InputBehavior="Insert"  x:Name="maskedInput" PreviewKeyDown="MaskedInput_PreviewKeyDown"/>
     
     private void MaskedInput_PreviewKeyDown(object sender, KeyEventArgs e)
           {
               if ("0123456789".Contains(e.Key.ToString()) && this.maskedInput.SelectionLength == this.maskedInput.Text.Length)
               {
                   this.maskedInput.ClearCommand.Execute(null);
               }
           }

    Please let us know if these changes fit well in your scenario and if you need any further assistance. Thank you in advance.

    Regards,
    Petar Mladenov
    Progress Telerik
    Want to extend the target reach of your WPF applications, leveraging iOS, Android, and UWP? Try UI for Xamarin, a suite of polished and feature-rich components for the Xamarin framework, which allow you to write beautiful native mobile apps using a single shared C# codebase.
Back to Top