chatbot orange border makes dropdown into it flash and flicker and chat border is above dropdown info

[pseudotensor]

Describe the bug

The chatbot border is above the dropdown, and when chatbot is streaming the dropdown is hard to use.

Wasn't like this with gradio 3.50.2

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import time

import gradio as gr

with gr.Blocks() as demo:
    with gr.Column():
        with gr.Accordion():
            image = gr.Image()
        with gr.Tabs():
            visible_models = gr.Dropdown([str(x) for x in list(range(0, 10))],
                                                             label="Visible Models",
                                                             value=str(0),
                                                             interactive=True,
                                                             multiselect=True,
                                                             visible=True,
                                                             filterable=False,
                                                             max_choices=4,
                                                             )
            with gr.Tab("Chat"):
                chatbot = gr.Chatbot()
                msg = gr.Textbox()
                clear = gr.Button("Clear")
            with gr.Tab("Other"):
                msg2 = gr.Textbox()

    def user(user_message, history):
        return "", history + [[user_message, None]]

    def bot(history):
        history[-1][1] = ''
        for msg in range(0, 10000):
            history[-1][1] += str(msg)
            if msg % 100 == 0:
                history[-1][1] += '\n'
            time.sleep(0.01)
            yield history

    msg.submit(user, [msg, chatbot], [msg, chatbot], queue=False).then(
        fn=bot, inputs=chatbot, outputs=chatbot, api_name='bot',
    )
    clear.click(lambda: None, None, chatbot, api_name='clear')

demo.queue()
demo.launch()

Screenshot

Logs

No response

System Info

gradio 4.17.0

It's not a critical bug, but UX/UI issue.  I don't have any way to work around it.

Severity

Blocking usage of gradio

[abidlabs]

The issue is just the orange border, right? Everything else is "ordered correctly"?

[pseudotensor]

Yes. I think that's the only problem. I'll check if multiple chatbots flash again with repro.

[pseudotensor]

Ya, I think my perception of flashing was just how the chatbot appears, but it's not a bug.

import time

import gradio as gr

with gr.Blocks() as demo:
    with gr.Column():
        with gr.Accordion():
            image = gr.Image()
        with gr.Tabs():
            visible_models = gr.Dropdown([str(x) for x in list(range(0, 10))],
                                                             label="Visible Models",
                                                             value=str(0),
                                                             interactive=True,
                                                             multiselect=True,
                                                             visible=True,
                                                             filterable=False,
                                                             max_choices=4,
                                                             )
            with gr.Tab("Chat"):
                with gr.Column():
                    with gr.Row():
                        chatbot1 = gr.Chatbot(visible=True)
                        chatbot2 = gr.Chatbot(visible=False)
                with gr.Column():
                    with gr.Row():
                        chatbot3 = gr.Chatbot(visible=False)
                        chatbot4 = gr.Chatbot(visible=False)
                with gr.Column():
                    with gr.Row():
                        chatbot5 = gr.Chatbot(visible=False)
                        chatbot6 = gr.Chatbot(visible=False)
                with gr.Column():
                    with gr.Row():
                        chatbot7 = gr.Chatbot(visible=False)
                        chatbot8 = gr.Chatbot(visible=False)
                with gr.Column():
                    with gr.Row():
                        chatbot9 = gr.Chatbot(visible=False)
                        chatbot10 = gr.Chatbot(visible=False)
                msg = gr.Textbox()
                clear = gr.Button("Clear")
            with gr.Tab("Other"):
                msg2 = gr.Textbox()

    def user(user_message, history):
        return "", history + [[user_message, None]]

    def bot(history):
        history[-1][1] = ''
        for msg in range(0, 10000):
            history[-1][1] += str(msg)
            if msg % 100 == 0:
                history[-1][1] += '\n'
            time.sleep(0.01)
            yield history

    def visible_models_func(visible_models1, num_models=10):
        return [gr.Chatbot(visible=str(x) in visible_models1) for x in range(num_models)]

    visible_models.change(fn=visible_models_func,
                          inputs=visible_models,
                          outputs=[chatbot1, chatbot2, chatbot3, chatbot4, chatbot5, chatbot6, chatbot7, chatbot8, chatbot9, chatbot10],
                          )

    msg.submit(user, [msg, chatbot1], [msg, chatbot1], queue=False).then(
        fn=bot, inputs=chatbot1, outputs=chatbot1, api_name='bot',
    )
    clear.click(lambda: None, None, chatbot1, api_name='clear')

demo.queue()
demo.launch()