Why called function pop up at top of the page

Question

I am trying to call a download button after text input is done. The problem is, download button always pop up at top of text input button.

my code:

import os
import streamlit as st

filelist = []
for root, dirs, files in os.walk("/home/lungsang/Desktop/levelpack-UI/content/A0/1 docx-raw"):
    for file in files:
        filename = os.path.join(root, file)
        filelist.append(filename)
with st.expander("📁 1 docx-raw"):
    st.write(filelist)


def proc():
    for file in filename:
        if st.session.text_key == file:
            st.download_button('Download file', data=file)


if __name__ == '__main__':
    st.text_input('Please insert the name of file to be download', on_change=proc, key='text_key')

In below image: download button came up on text input button. I need it below:)

Answer 1

I don't know why to choose to take that approach, but you could have written like: By the way why did you initialize text_input without using it? Do you want to do something with the user input in text_input ?

def proc():
    with open("/home/Ubuntu/levelpack-UI/content/A0/1 docx-raw/A0.01-vocab.docx", "rb") as file:
    if st.text_input('Please insert the name of file to be download', key='text_key'):
        st.download_button('Download file', data=file)


if __name__ == '__main__':
    proc()