Position of the selected image in the gallery still remains in the selected state when the gallery is updated

[MicroGuitar]

Describe the bug

Hello!

I encountered a problem while using Gradio. When I select an image in the gallery, such as the first one (with an index of 0), after I update the gallery (e.g., applying some filtering measures to filter out some images), the first image in the new gallery (with an index of 0) still remains in the selected state, preventing me from triggering the select event by clicking on this image.

I have searched for related issues in the GitHub project's issues, and I found that others have encountered the same problem as me. After referring to the solution #5478 , I found that the code still has some bugs that cannot meet the requirement.

I run the code you provide(just replaced the images):

import gradio as gr

im1 = "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
im2 = "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80"

def select_fn(data: gr.SelectData):
    return data.index, data.value

with gr.Blocks() as demo:
    g = gr.Gallery([im1]*2)
    b = gr.Button()
    t = gr.Textbox()

    b.click(lambda : gr.Gallery([im2]*2), None, g)
    g.select(select_fn, None, t)

demo.launch()

At first time, I selected the first image of im1 (with index 0), and clicked the 'Run' button. And then the gallery changed, and the selected state was clear (that's what I want). Then, I selected the first image of im2, and clicked the 'Run' button. This time, the first image in the gallery still remains selected after the update. It seems that the selected state is only cleared when the gallery is updated for the first time, and it won't clear the selected state if the gallery is updated a second time. For the project I am currently developing, I hope to clear the selected state so that it won't affect the triggering of the select event for images at the same position later on. It would be best if there could be a flag to control whether to retain the selected state.

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

Here, I provide the debug code I used. You can use button 'im1' or 'im2' to update the gallery.

import gradio as gr

im1 = "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=387&q=80"
im2 = "https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80"

with gr.Blocks() as demo:
    with gr.Row():
      b = gr.Button("im1")
      b2 = gr.Button("im2")  
    g = gr.Gallery([im1]*3, columns=5, allow_preview=False)

    b.click(lambda : gr.Gallery([im1]*3), None, g)
    b2.click(lambda : gr.Gallery([im2]*3), None, g)

demo.launch()

Screenshot

Logs

No response

System Info

python - 3.8.16
gradio - 3.50.0

Severity

Blocking usage of gradio

[freddyaboulton]

Hmm this is actually the intended behavior @MicroGuitar #3061

[MicroGuitar]

Hmm this is actually the intended behavior @MicroGuitar #3061

Thank you for your response. Yes, I have also noticed that someone has raised this issue before, but since the position remains selected, I am unable to trigger my function. Would it be possible to add a flag to enable or disable this feature? In fact, what I want is to clear the selected state.

[SureMaker0]

You can modify the code as follows to solve this issue:

b.click(lambda: [[im1] * 3, gr.Gallery(selected_index=None)], None, [g, g])
b2.click(lambda: [[im2] * 3, gr.Gallery(selected_index=0)], None, [g, g])

[freddyaboulton]

Going to close this as @SureMaker0 's solution is the correct approach here. I don't think we should change the current behavior or add a parameter to the API.