fix: fix bug on select-option render (#635)

* fix: fix select-option render * test: remove .only
brisa-build · Nov 17, 2024 · 294eba7 · 294eba7
1 parent bbcf202
commit 294eba7
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 4 deletions.
diff --git a/packages/brisa/src/utils/brisa-element/index.test.ts b/packages/brisa/src/utils/brisa-element/index.test.ts
@@ -4370,6 +4370,37 @@ describe('utils', () => {
       expect(idComponent?.shadowRoot?.innerHTML).toBe('1234-543-4234-5425-123');
     });
 
+    it('should not select the last option by default when using appendChild in a loop', async () => {
+      const options = ['Option 1', 'Option 2', 'Option 3'];
+
+      const Component = () => {
+        return [
+          'select',
+          {},
+          () => options.map((option) => ['option', { value: option }, option]),
+        ];
+      };
+
+      customElements.define('select-component', brisaElement(Component));
+      document.body.innerHTML = '<select-component />';
+
+      const selectComponent = document.querySelector(
+        'select-component',
+      ) as HTMLElement;
+      const select = selectComponent.shadowRoot?.querySelector(
+        'select',
+      ) as HTMLSelectElement;
+      const optionsElements = Array.from(select.options);
+
+      expect(optionsElements[0].textContent).toBe('Option 1');
+      expect(optionsElements[1].textContent).toBe('Option 2');
+      expect(optionsElements[2].textContent).toBe('Option 3');
+
+      expect(optionsElements[0].selected).toBeTrue();
+      expect(optionsElements[1].selected).toBeFalse();
+      expect(optionsElements[2].selected).toBeFalse();
+    });
+
     it('should be generate multi useId when data-id does not exists', () => {
       spyOn(crypto, 'randomUUID').mockImplementationOnce(
         () => '1234-543-4234-5425-123',

diff --git a/packages/brisa/src/utils/brisa-element/index.ts b/packages/brisa/src/utils/brisa-element/index.ts
@@ -343,9 +343,7 @@ export default function brisaElement(
                 const isDangerHTML = (child as any)?.[0] === HTML;
 
                 if (isDangerHTML || isReactiveArray(child)) {
-                  const tempContainer = el.isConnected
-                    ? (createElement(CONTEXT) as any)
-                    : el;
+                  const tempContainer = createElement(CONTEXT) as any;
 
                   // Reactive injected danger HTML via dangerHTML() helper
                   if (isDangerHTML) {

diff --git a/packages/brisa/src/utils/get-client-code-in-page/index.test.ts b/packages/brisa/src/utils/get-client-code-in-page/index.test.ts
@@ -22,7 +22,7 @@ const i18nCode = 2799;
 const brisaSize = 5720; // TODO: Reduce this size :/
 const webComponents = 1107;
 const unsuspenseSize = 213;
-const rpcSize = 2500; // TODO: Reduce this size
+const rpcSize = 2509; // TODO: Reduce this size
 const lazyRPCSize = 4105; // TODO: Reduce this size
 // lazyRPC is loaded after user interaction (action, link),
 // so it's not included in the initial size