Container double showing periodically

Using Streamlit
1

Summary

I am using click_detector and containers and get a duplicate of click_detector after clicking the first time.

Steps to reproduce

Code snippet:

import streamlit as st
import pandas as pd
from st_click_detector import click_detector
from time import sleep

def empty():
    placeholder.empty()
    sleep(0.01)

placeholder = st.empty()
content = """<p><a href='#' id='Link 1'>First link</a></p>
<p><a href='#' id='Link 2'>Second link</a></p>
<a href='#' id='Image 1'><img width='20%' src='https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=200'></a>
<a href='#' id='Image 2'><img width='20%' src='https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=200'></a>
"""
empty()
with placeholder.container():
    clicked = click_detector(content, key='main')
    
if clicked == 'Image 1':
    st.header('Second')
    st.write('here')

elif clicked == 'Image 2':
    st.header('Third')
    st.write('here2')

If applicable, please provide the steps we should take to reproduce the error or specified behavior.

Expected behavior:

I would expect the images to stay at the top in the container and if either image 1 or image 2 is clicked, that the code within those if statements be shown

Actual behavior:

Sometimes I am seeing duplicated images, sometimes I only see one set of images. I am not clear on how it is duplicating, as I am clearing it before putting information in the container.

Debug info

  • Streamlit version: Streamlit, version 1.24.0
  • Python version: Python 3.7.8
  • OS version: Mac Ventura 13.4
  • Browser version: Google Chrome Version 114.0.5735.198

Requirements file

I was using Visual Studio Code to write the original code. But once I deployed it, I started experiencing bugs that I did not see in VSCode.

Links

2

Hey @celenaaponce, welcome to our community! :wave:

I’ve installed the click-detector library and tried a simple code snippet to make it work. I don’t seem to notice any duplication.

Recording 2023-07-19 at 11.50.55

Here’s the code I used:

import streamlit as st
from st_click_detector import click_detector

def render_content():
    content = """
    <a href='#' id='Image 1'><img width='20%' src='https://images.unsplash.com/photo-1565130838609-c3a86655db61?w=200'></a>
    <a href='#' id='Image 2'><img width='20%' src='https://images.unsplash.com/photo-1565372195458-9de0b320ef04?w=200'></a>
    """
    
    clicked = click_detector(content, key='main')
    
    if clicked == 'Image 1':
        st.header('First')
        st.write('here')

    elif clicked == 'Image 2':
        st.header('Second')
        st.write('there')

render_content()

Maybe I’m oversimplifying the issue or misunderstanding it. Or maybe this simple workaround might just work fine. Either way, let me know - I’m here to help! :blush:

Best,
Charly

3

Maybe there’s something wrong w the way I’m running it. I just copied and pasted your code and am running it. I get double images.
Studio_Project_V1

4

Also I am only getting this issue when I deploy the app, not when I do it locally.

5

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.