gr.Sketchpad() cannot be cleared twice or more times in the event of a button click

[youngxz]

Describe the bug

gr.Image() can be cleared twice or mor times in the event of a button click, the code:
input_image = gr.Image()
def clear_image():
return None
submit_btn.click(fn=clear_image, outputs=input_image)

gr.Sketchpad() cannot be cleared twice or mor times in the event of a button click, the code:
input_sketchpad=gr.Sketchpad()
def clear_sketchpad():
return None
submit_btn.click(fn=clear_sketchpad, outputs=input_sketchpad)

Then, i used the JS code to fix it, but it doesn't work, the code:
js = """
<script>
function clearCanvas(sketchpadId) {
console.log('clearCanvas called with id:', sketchpadId);
var canvasContainer = document.querySelector(#${sketchpadId});
if (canvasContainer) {
var canvas = canvasContainer.querySelector('.svelte-1h72pol canvas');
if (canvas) {
var ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
} else {
console.log('Canvas element not found');
}
} else {
console.log('Canvas container not found');
}
}
window.clearCanvas = clearCanvas;
</script>
"""
gr.HTML(js_code)
button.click(js="(sketchpad_id) => { window.clearCanvas(sketchpad_id); return []; }")

And, i find another same problem which is input_image can be cleared twice or mor times , but input_sketchpad cannot be cleared twice or mor times when use ClearButton, the code:
input_image = gr.Image()
input_sketchpad=gr.Sketchpad()
clear_btn = gr.ClearButton([*input_image, input_sketchpad])

Have you searched existing issues? 🔎

• I have searched and found no existing issues

Reproduction

import gradio as gr


input_sketchpad=gr.Sketchpad()
def clear_sketchpad():
    return None
submit_btn.click(fn=clear_sketchpad, outputs=input_sketchpad)

Screenshot

No response

Logs

No response

System Info

Gradio 5.5.0

Severity

Blocking usage of gradio