Synchronized Text Areas

[pierrelouisbescond]

Hi Streamliters!

I’d like to find a way to have two text areas synchronized, meaning that each time a new letter is typed in the first one, the second text area is updated as well.

The code below updates the second text area based on the first one but only after pressing “CTRL+Enter” or exiting the first text area. I’d like to have updates when the user types new information in the first text area.

I tried to use “on_change” with a callback function but all my tests failed

Is there any way to achieve this?

Steps to reproduce

Code snippet:

import streamlit as st

initial_text = st.text_area("Initial text",
                            value="I should be synchronised with my twin 😥",
                            height=50,
                            label_visibility="hidden")

final_text = st.text_area("Final text",
                          value=initial_text.upper(),
                          height=50,
                          label_visibility="hidden")

Thanks!

PS: Obviously, the function I am trying to solve is not to get the upper case of a text. I’ve just focused on the core of the issue I am facing

[Charly_Wargnier]

Thanks for your question, Pierre!

I don’t think there’s any workaround for this, although there might be a cool hack or a custom component that I’m not aware of!

Best,
Charly

[Goyo]

You need a custom component for that. There is already one implementing a textinput-like widget that reacts to every keystroke.

[Charly_Wargnier]

Thanks for reminding me about this one, @Goyo!