Bug: Label of text_input displays blank if text has ')' in the initial characters

Bug in the text_input widget

If β€˜)’ is one of the initial characters in a text_input widget label, the label does not display; however, if the same β€˜)’ exsits later within the label, it displays correctly.

Code snippet:

import streamlit as st

sc1, sc2, sc3 = st.columns(3)

lbltxt1 = "1 Procedure followed"
lbltxt2 = "1) Procedure followed"
lbltxt3 = "1 Procedure followed (all steps)"

sc1.text_input(label=lbltxt1, key='t1')
sc2.text_input(label=lbltxt2, key='t2')
sc3.text_input(label=lbltxt3, key='t3')

Output Screenshot

In the Code snippet & image above:

  1. The 1st text_input widget displays correctly, as it does not contain any β€˜)’
  2. The 2nd text_input widget does not display because it has the β€˜)’ character in position 2 of the label
  3. The 3rd text_input widget displays correctly, even though it has the β€˜)’ character at the end of the label

Debug info

  • Streamlit version: 1.16.0
  • Python version: 3.9.5
  • Operating System: Windows 10
  • Browser: Tried on Edge & Brave

Cheers

That is a numbered list item in markdown, which apparently labels don’t support. You will have the same issue with a dot "1. Procedure followed". Use a backslash to avoid parsing it that way:

lbltxt2 = "1\) Procedure followed"
1 Like

Thanks @Goyo, you are perfectly right. Didnt expect it to be so, though.

Cheers

Thank you both for your feedback! We’ve realized that we did not document the behavior of the label param when it is passed unsupported Markdown elements such as ordered lists in this case.

I’ve submitted a PR to document that behavior:

Unsupported elements such as blockquotes, un/ordered lists, etc, are not rendered on the frontend. To display unsupported Markdown elements as literal characters in labels, they need to be backslash-escaped.

E.g. Users may want to use > as the label for st.button . Passing label=">" results in no label being displayed, as the > is interpreted as Markdown’s blockquote character. The solution is to backslash escape: label="\>" .

2 Likes