Search Unity

  1. Megacity Metro Demo now available. Download now.
    Dismiss Notice
  2. Unity support for visionOS is now available. Learn more in our blog post.
    Dismiss Notice

TextMesh Pro TextMeshPro issues with input field

Discussion in 'UGUI & TextMesh Pro' started by Micito, Jun 5, 2018.

  1. Micito

    Micito

    Joined:
    Dec 5, 2014
    Posts:
    16
    Hi everyone,

    First of all, let me say that text mesh pro is a great asset, it makes working with text in unity a lot simpler and easier. Having said that we have encountered some issues with input fields and we were wondering is there a way to overcome them.

    Issue #1: Inner caret position (string position) of input field is positioned after all tags

    InputField, in which RichTextEditing is disabled, positions caret in string after all tags which causes entered
    text to be of the following style, instead of previous.

    Consider following text in TMP input field:
    "ThisIsExampleText"

    If you position caret in front of 'E' character of "Example" and you start typing, you would expect the font NOT to be bold, but in TMP input fields font will be bold. Same goes as if you position in front of 'T' of "Text", user expects new text to be bold, but it is actually regular.
    As far as I can say, this happens because of input field's inner caret (stringPosition) being positioned after all tags, instead of before.

    Example:

    1.Consider following text in input field
    2.Position in front of the red text and start typing
    upload_2018-6-5_11-36-27.png

    Is there a way to remedy this?

    Issue #2: Selection in TMP InputField is not working correctly when it is rotated

    If you create input field, and enable it to be multiline, add long text to it and rotate it (~45 degrees), selection will not work correctly. Also RectMask2D is not working as well.

    upload_2018-6-5_11-21-27.png

    Issue #3: Indented lines will not get "unindented" once they are merged with previous line

    When user positions in front of second line (which is indented by 20px with indent tag), and presses backspace, that line is merged with previous line. But the indentation tag remains, and it is positioned over existing text.

    upload_2018-6-5_11-51-5.png

    Is there way to remove indentation tag?

    Issue #4: Sprite tag can be deleted even though RichTextEditing is disabled

    If sprite is added in input field, and user positions after it, he is able to start deleting tag by pressing backspace, even though RichTextEditing is disabled.

    upload_2018-6-5_11-56-17.png

    Is it possible to at least make it so that whole sprite is deleted? Or is it possible to make it unable to be deleted?


    I have created a demo project on this issues. You can download it here:
    https://drive.google.com/open?id=16F4ajDwpk_2S5AuEkyxV0gJAzl5eCX6_

    Thank you in advance
     
    Last edited: Jun 8, 2018
    awsapps and Roywise like this.
  2. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    I have submitted a bugreport for Issue #2 before, Unity's QA has been able to reproduce it in multiple Unity version including the 2018.2 version and it has resulted in a IssueTracker entry. Sadly they have not been able to give me an ETA on when we can expect a fix. You can vote on the Issue here: https://issuetracker.unity3d.com/is...extmesh-pro-inputfield-is-working-incorrectly (The issue does not mention that the RectMask2D breaks as well.)

    In our case the product we're producing heavily depends on the "Text Editor" functionality. The bugs above in combination with an earlier bug that we've found in UWP Builds (the main Platform we're targetting) with Touch devices connected (https://forum.unity.com/threads/tex...g-correctly-in-uwp-build.528566/#post-3484279) makes our product unreleasable in it's current state.

    @Stephan_B Could you have a look? Or can you give us a ETA?
     
    Last edited: Jun 6, 2018
  3. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    I'll try taking a look at these tomorrow.

    I should be able to address item 1, 3, and 4 in a relative short term.

    Item 2 is a bigger issue. I should be able to address the selection part but the 2D RectMask doesn't support rotation so that will be a much harder issue to address.
     
    Roywise likes this.
  4. Micito

    Micito

    Joined:
    Dec 5, 2014
    Posts:
    16
    Hi Stephan,

    Thanks for a quick response, I have found 2 more issues, and have added them to the demo project.

    Link: https://drive.google.com/open?id=16F4ajDwpk_2S5AuEkyxV0gJAzl5eCX6_

    Issue #5: Input fields' text remain visible when input field is inside RectMask2D

    upload_2018-6-8_8-57-55.png

    This is ScrollView with RectMask2D (used only to move input field out of the view) with 2 input fields inside. The one on the left has text typed into it, the one on the right has Placeholder text displayed (it's empty). When scroll view is scrolled down, input fields go outside of rect mask, and while they are partly inside mask, everything works fine.
    upload_2018-6-8_9-1-31.png
    Ignore incorect masking, we are using rect mask instead of sprite mask here, and it's not really important.

    But once whole input field leaves RectMask2D, text suddenly becomes visible.
    upload_2018-6-8_9-4-31.png

    This might not have anything to do with TMP, but with masks.

    Issue #6: Getting preferred size doesn't include spaces at the end or start of text

    When we get preferred size of TMP's text it doesn't include empty space characters at the ends, so it is impossible to make input field that will correctly size to it's content.
    Example: Here we have input field (simplified for sake of displaying the issue). There is a script attached on it which sets size of input field to preferred size of text contents inside. When user types something, it increases automatically, but if the last characters are space (' ') characters, the width will not increase, instead text will start scrolling and as soon as non-empty character is added the width automatically increases (same for height).

    upload_2018-6-8_9-14-6.png
     

    Attached Files:

    Last edited: Jun 14, 2018
    Roywise likes this.
  5. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    Are the issues in this thread being recognised? Do we need to create a bugreport or maybe seperate bugreports for the various issues? What is the next step to get these issues fixed as fast as possible?
     
  6. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    I am monitoring this thread which includes good feedback. I just need to find the time to get around to these items.
     
  7. SketchWork

    SketchWork

    Joined:
    Jul 6, 2012
    Posts:
    254
    We are experiencing issue #5 too. When an TMP Input Field leaves the RectMask2D area the text suddenly appears. The input field graphic does not, just the TextMeshPro text.
     
  8. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    See the following post for a solution to #5.
     
  9. SketchWork

    SketchWork

    Joined:
    Jul 6, 2012
    Posts:
    254
    Yes thank you, that seems to fix my issue. Will you be doing a proper fix any time soon as it is a bit annoying having to go into debug to sort the issue out each time?
     
  10. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    This fix will be included in the next release of the TMP UPM package.
     
    Roywise and SketchWork like this.
  11. SketchWork

    SketchWork

    Joined:
    Jul 6, 2012
    Posts:
    254
    Thanks buddy :)
     
  12. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    Nice! That's one down.
     
  13. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    I have just noticed that one of the issues talked about in this thread has been put on "By Design" and I'm assuming that means it'll not be fixed. So that makes me really curious why? @Stephan_B

    Could it be that the Bugreport was misinterpreted because it states "rotating" instead of "rotated"? I mean, the selection is completely wrong, that can't be by design.
     
    Last edited: Aug 8, 2018
  14. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    The issue is related to the 2D Rect Mask which doesn't support rotation. So this is a design limitation of the 2D Rect Mask.

    Having said that, I certainly want to find some solution / alternative for TMP users but this has to be addressed by the UI team.

    With regards to rotated selection, I will take another look at that.

    P.S. Although I haven't had time to provide feedback on these items, they are on my list of stuff to address. Keep the feedback coming, it is greatly appreciated and feel free to poke / re-post to remind me as you have done today.
     
    Roywise likes this.
  15. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    Thanks for the reply, I really appreciate the explanation.
     
  16. fherbst

    fherbst

    Joined:
    Jun 24, 2012
    Posts:
    802
    Got another InputField issue that I think belongs to this list here. It feels like I must be doing something wrong, but for me text editing isn't possible once the text begins scrolling. When looking at the RectTransforms, it seems the InputField Input Caret RectTransform is moving upwards along with the ScrollView, causing me not to be able to select/edit text in the lower parts (and also not use the mouse wheel to scroll). What's going on here? Am I missing something?

    upload_2018-8-23_21-42-53.png
    (selected objecct is "TMP InputField (Content) Input Caret")
     
    naviln likes this.
  17. Airship

    Airship

    Joined:
    Sep 10, 2011
    Posts:
    260
  18. Micito

    Micito

    Joined:
    Dec 5, 2014
    Posts:
    16
    I found one more issue. Validation is not working. Even the default example validator (TMP_DigitValidator) is not working.

    upload_2018-9-5_11-43-46.png

    The thing is, it actually goes through the code correctly, and the code returns valid character, but for some reason it's not added in the input field.

    Interestingly TMP_InputField.onValidateInput is working, so it's a workaround
     
  19. Airship

    Airship

    Joined:
    Sep 10, 2011
    Posts:
    260
    Yeah, I noticed that as well. I ended up getting by with just Regex validation which worked.
     
  20. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    Those implementations were sort of experimental with regards to the TMP_DigitValidator types. See the following post on the TMP user forum which might prove useful.
     
  21. arboyer

    arboyer

    Joined:
    Dec 18, 2017
    Posts:
    2
    Hi everyone !
    I have another issue to report.
    I am trying to create a TMPro Inputfield from script and not from Unity Editor. I created each GameObjects as the editor does (TextMeshPro - InputField, Text Area, Placeholder, and Text) with the correct MonoBehaviours and hierarchy.
    Thing is the GameObject "TextMeshPro - InputField Input Caret" is never created during the execution and we can not see caret and selection when inputfield is selected. I tried to create it myseflf but I can not link it to the TMP_InputField behaviour.

    Edit : I am using Unity 5.6.6f2, and Text Mesh Pro 1.2.2

    Here is my own component Start method which create an InputField :
    Code (CSharp):
    1.  private void Start()
    2.    {
    3.       RectTransform inputFieldTransform = gameObject.GetComponent<RectTransform>();
    4.  
    5.       Image image = gameObject.AddComponent<Image>();
    6.       image.color = Color.white;
    7.       image.raycastTarget = true;
    8.       image.type = Image.Type.Sliced;
    9.       image.fillCenter = true;
    10.  
    11.       TMP_InputField inputField = gameObject.AddComponent<TMP_InputField>();
    12.  
    13.       GameObject textAreaObject = new GameObject("Text Area");
    14.       RectTransform textAreaTransform = textAreaObject.AddComponent<RectTransform>();
    15.       textAreaTransform.anchorMin = new Vector2(0, 0);
    16.       textAreaTransform.anchorMax = new Vector2(1, 1);
    17.       textAreaTransform.pivot = new Vector2(0.5f, 0.5f);
    18.       textAreaTransform.sizeDelta = new Vector2(0, 0);
    19.       textAreaObject.AddComponent<RectMask2D>();
    20.       textAreaTransform.SetParent(inputFieldTransform, false);
    21.  
    22.       GameObject placeholderObject = new GameObject("Placeholder");
    23.       RectTransform placeholderTransform = placeholderObject.AddComponent<RectTransform>();
    24.  
    25.       TextMeshProUGUI placeholderText = placeholderObject.AddComponent<TextMeshProUGUI>();
    26.       placeholderText.text = "Enter text...";
    27.       placeholderText.fontSize = 40;
    28.       placeholderText.alignment = TextAlignmentOptions.TopLeft;
    29.       placeholderText.color = Color.grey;
    30.  
    31.       placeholderTransform.anchorMin = new Vector2(0, 0);
    32.       placeholderTransform.anchorMax = new Vector2(1, 1);
    33.       placeholderTransform.pivot = new Vector2(0.5f, 0.5f);
    34.       placeholderTransform.sizeDelta = new Vector2(0, 0);
    35.       placeholderTransform.SetParent(textAreaTransform, false);
    36.  
    37.       GameObject textObject = new GameObject("Text");
    38.       RectTransform textTransform = textObject.AddComponent<RectTransform>();
    39.  
    40.       TextMeshProUGUI textText = textObject.AddComponent<TextMeshProUGUI>();
    41.       textText.text = "Enter text...";
    42.       textText.fontSize = 40;
    43.       textText.alignment = TextAlignmentOptions.TopLeft;
    44.       textText.color = Color.black;
    45.  
    46.       textTransform.anchorMin = new Vector2(0, 0);
    47.       textTransform.anchorMax = new Vector2(1, 1);
    48.       textTransform.pivot = new Vector2(0.5f, 0.5f);
    49.       textTransform.sizeDelta = new Vector2(0, 0);
    50.       textTransform.SetParent(textAreaTransform, false);
    51.  
    52.       inputField.interactable = true;
    53.       inputField.transition = Selectable.Transition.ColorTint;
    54.       inputField.targetGraphic = image;
    55.       inputField.textViewport = textAreaTransform;
    56.       inputField.textComponent = textText;
    57.       inputField.placeholder = placeholderText;
    58.       inputField.fontAsset = Resources.Load<TMP_FontAsset>("Fonts & Materials/LiberationSans SDF");
    59.  
    60.       //GameObject caret = new GameObject("TextMeshPro - InputField Input Caret");
    61.       //caret.transform.SetParent(textAreaObject.transform, false);
    62.       //caret.AddComponent<TMP_SelectionCaret>();
    63.       //caret.AddComponent<LayoutElement>().ignoreLayout = true;
    64.    }
    Am I missing something ?
    Thank you all,
    Arthur
     
    Last edited: Sep 26, 2018
  22. Micito

    Micito

    Joined:
    Dec 5, 2014
    Posts:
    16
    I think the easier approach is to create it in editor (right click in hierarchy) and then make a prefab out of it. Then, just instantiate that prefab in runtime. You can add that prefab in resources folder, and then acess it through code via Resources.Load<TMP_InputField>("Prefab_path")
     
  23. arboyer

    arboyer

    Joined:
    Dec 18, 2017
    Posts:
    2
    Thank you for your reply, but in my project I really can't instantiate a prefab. I tried your solution in a little project and works fine, but I can't do that in my own project where all my gameObjects and Monobehaviour are instantiated from script.
     
  24. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    The release notes for the Unity version 2019.1.0a11 contains this line "Universal Windows Platform: Fix InputField text selection so it works on Windows 10 touch-enabled devices (1002834)" and links to THIS issue in the IssueTracker.

    So we were super excited and tried it out but apparently it's only fixed in the Unity Inputfield, not in the TextMesh Pro Inputfield. Do you know if this fix is coming to TextMesh Pro, @Stephan_B ?

    Anyway, I'm going to create a new bugreport with a new repro-project because these are things that are important for our project. As I probably mentioned before a big part of our application is the Text Editor.
     
  25. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    This is only valid for 2019.1. Try the following changes in the TMP_InputField.cs

    Add the following private field around line 292
    Code (csharp):
    1.  
    2. private bool m_TouchKeyboardAllowsInPlaceEditing = false;
    3.  

    Make the following change in the following function around line 1075.
    Code (csharp):
    1.  
    2. private bool InPlaceEditing()
    3. {
    4.      return !TouchScreenKeyboard.isSupported || m_TouchKeyboardAllowsInPlaceEditing;
    5. }
    6.  
    Modify the function ActivateInputFieldInternal() around line 3214.

    Code (csharp):
    1.  
    2. private void ActivateInputFieldInternal()
    3. {
    4.     if (EventSystem.current == null)
    5.         return;
    6.     if (EventSystem.current.currentSelectedGameObject != gameObject)
    7.         EventSystem.current.SetSelectedGameObject(gameObject);
    8.     if (TouchScreenKeyboard.isSupported)
    9.     {
    10.         if (Input.touchSupported)
    11.         {
    12.             TouchScreenKeyboard.hideInput = shouldHideMobileInput;
    13.         }
    14.  
    15.         // Revise the following two sections of code
    16.         m_Keyboard = (inputType == InputType.Password) ?
    17.             TouchScreenKeyboard.Open(m_Text, keyboardType, false, multiLine, true, false, "", characterLimit) :
    18.             TouchScreenKeyboard.Open(m_Text, keyboardType, inputType == InputType.AutoCorrect, multiLine, false, false, "", characterLimit);
    19.  
    20.         // Cache the value of isInPlaceEditingAllowed, because on UWP this involves calling into native code
    21.         // The value only needs to be updated once when the TouchKeyboard is opened.
    22.         m_TouchKeyboardAllowsInPlaceEditing = TouchScreenKeyboard.isInPlaceEditingAllowed;
    23.        
    24.         // Mimics OnFocus but as mobile doesn't properly support select all
    25.         // just set it to the end of the text (where it would move when typing starts)
    26.         MoveTextEnd(false);
    27.     }
    28.     else
    29.     {
    30.         Input.imeCompositionMode = IMECompositionMode.On;
    31.         OnFocus();
    32.     }
    33.     //m_StringPosition = m_StringSelectPosition = 0;
    34.     //m_CaretPosition = m_CaretSelectPosition = 0;
    35.     m_AllowInput = true;
    36.     m_OriginalText = text;
    37.     m_WasCanceled = false;
    38.     SetCaretVisible();
    39.     UpdateLabel();
    40. }
    41.  
    Let me know if this works as expected on your end.
     
  26. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    @Stephan_B, I have implemented the code you suggested. This makes it possible to insert text on the caret position but only when I move the caret by using the Arrow-keys on the keyboard. Clicking the inputfield does nothing, the caret stays at the end of the line.

    I made a bugreport yesterday which includes a repro-project and an UWP build, do you have access to those? The case number is 1108599.
     
  27. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    I'll try taking a look at the bug report tomorrow.

    If you have time, I would be curious to know if this works as expected on the target device when using the UI Input Field as opposed to the TMP Input Field.
     
  28. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    The Unity Inputfield works as expected. Clicking within a line moves the caret to that position and typing text inserts it at that position. Thanks for your time. I really appreciate it.
     
  29. Roywise

    Roywise

    Joined:
    Jun 1, 2017
    Posts:
    68
    @Stephan_B have you had any time to check out the bugreport?
     
  30. Stephan_B

    Stephan_B

    Joined:
    Feb 26, 2017
    Posts:
    6,595
    I am currently working on the Input Field and should be able to look into this later today / tonight.
     
    Roywise likes this.
  31. naviln

    naviln

    Joined:
    Oct 18, 2016
    Posts:
    32
    I'm having this exact same issue. Only the initial text is selectable/scrollable etc, once you add some new text which pushes content down, you can't select or edit anything outside that initial box.

    Is there any workaround that anyone knows of? Or am I doing something wrong?

    Hi @Stephan_B,

    Just checking if this one on your radar

    Cheers and thanks for all the awesome work on TMP
     
    fherbst likes this.
  32. checkman

    checkman

    Joined:
    Aug 30, 2017
    Posts:
    1
    Disable the GameObject that you attached the TMP_InputField component to (this.gameObject in your example), and the re-enable it after all of the script have been attached.

    My guess is that it needs everything to be present before executing. Disabling the GameObject disables all the scripts attached to it.

    It does cause another problem: the entered text will not be visible if "too much" text is entered. At least in my case.

    I didn't test it with your code, but I have been doing something similar, and that worked for me.
     
  33. keystagefun

    keystagefun

    Joined:
    Feb 19, 2020
    Posts:
    33
    checkman's solution worked for me when creating a TMP Input Field from scratch in C#:

    Code (CSharp):
    1. go_input.SetActive(false);
    2. go_input.SetActive(true);
    Caret now shows up fine. Thanks - saved me a lot of hassle!
     
  34. EnamulIslamJisan

    EnamulIslamJisan

    Joined:
    Oct 11, 2018
    Posts:
    90

    Caret position is not changing on click pos instead it changes caret pos when i try to change it from keyboards additional input field even though mobile input is disabled
     
  35. Narnoleth

    Narnoleth

    Joined:
    May 22, 2020
    Posts:
    1
    Have you tried to disable "OnFocus - Select All"? I've tested it, sometimes it isn't taking it as a 'click', but as a drag as if you're selecting the text..
     
  36. EnamulIslamJisan

    EnamulIslamJisan

    Joined:
    Oct 11, 2018
    Posts:
    90
    no need anymore my project got canceled anyway :)
     
  37. ina

    ina

    Joined:
    Nov 15, 2010
    Posts:
    1,080
    Hey just wondering what the latest in in-place select cursor and copy/paste is for touch / mobile
     
  38. Karrzun

    Karrzun

    Joined:
    Oct 26, 2017
    Posts:
    123
    Hi everyone,

    I've stumbled upon a minor nitpick and the closest I can come to an explanation is issue #1 described in this post.
    In my project I've designed a user interface which includes a TMP_InputField. When the user has entered at least one character, everything is fine. Unfortunately, while the InputField is still empty the caret is too big and spans beyond the line.

    TMP_InputFieldCaret_User.PNG
    TMP_InputFieldCaret_Placeholder.PNG


    I'm using Unity 2020.1.14 with TMP version 3.0.6. The text settings are identical for placeholder and normal text (except for the placeholder being italic). Is it possible the caret tries to match the last character and since it can't find one in the empty InputField, it defaults to something doesn't match the text settings? If so, how can I fix that?

    Thank you in advance!


    Kind regards,

    Karrzun
     
    ina likes this.
  39. JaksaGR

    JaksaGR

    Joined:
    Aug 31, 2020
    Posts:
    3
    Bumping this up.
    Having the same issue, looking for a way to solve it through anchoring but cant find a way.
    @Stephan_B, anyone?

    Edit: figured this out thanks to my collegue.
    Just put content size fitter on the most inner text component, veritcal fit - preferred size. This will make it's rect transform always include all the text, and since caret's rect transform always mimics this components rect transform, the carret will always include all the text too.

    Edit2:
    My first proposed soulution does not work as expected : ).
    Luckily I found out there is an textMeshPro example for this, just import text mesh pro examples and find scrollable input text example, i think it was example 24 not sure.
    Use this, it works.
     
    Last edited: Sep 29, 2021
    naviln likes this.