diff --git a/packages/brisa/src/utils/client-build-plugin/integration.test.tsx b/packages/brisa/src/utils/client-build-plugin/integration.test.tsx
index 46ba5213f..cdec83fc2 100644
--- a/packages/brisa/src/utils/client-build-plugin/integration.test.tsx
+++ b/packages/brisa/src/utils/client-build-plugin/integration.test.tsx
@@ -6322,6 +6322,149 @@ describe('integration', () => {
expect(testComponent?.shadowRoot?.innerHTML).toBe('last number = 10');
});
+ it('should not duplicate "Open" button after change state + change prop signal #686', async () => {
+ const code = `
+ export default async function Chat({ foo, bar }, { state }) {
+ const message = state(false);
+
+ return (
+
+ {foo ? (
+ <>
+
+ U
+
+ {foo} {bar}
+
+
+ {message.value ? (
+
+ Opened
+
+ ) : (
+
+ Closed
+
+ )}
+
+
+ (message.value = !message.value)}
+ >
+ Open
+
+
+
Foo
+
Bar
+
+ >
+ ) : (
+
+ Foo
+
+ )}
+
+ );
+ }
+ `;
+
+ defineBrisaWebComponent(code, 'src/web-components/chat-example.tsx');
+
+ document.body.innerHTML = ' ';
+ await Bun.sleep(0);
+
+ const chatExample = document.querySelector('chat-example') as HTMLElement;
+ const button = chatExample.shadowRoot!.querySelector('button') as HTMLButtonElement;
+
+ expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+ normalizeHTML(`
+
+
+ U
+
+ bar baz
+
+
+
+ Closed
+
+
+
+ Open
+
+
+ Foo
+
+
+ Bar
+
+
+
+ `),
+ );
+
+ button.click();
+ await Bun.sleep(0);
+
+ expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+ normalizeHTML(`
+
+
+ U
+
+ bar baz
+
+
+
+ Opened
+
+
+
+ Open
+
+
+ Foo
+
+
+ Bar
+
+
+
+ `),
+ );
+
+ chatExample.setAttribute('foo', 'baz');
+ await Bun.sleep(0);
+
+ expect(normalizeHTML(chatExample.shadowRoot!.innerHTML)).toBe(
+ normalizeHTML(`
+
+
+ U
+
+ baz baz
+
+
+
+ Opened
+
+
+
+ Open
+
+
+ Foo
+
+
+ Bar
+
+
+
+ `),
+ );
+ });
+
// TODO: This test should work after this happydom feat about ElementInternals
// https://github.com/capricorn86/happy-dom/issues/1419
it.todo('it should work associating a form to the custom element', () => {