From 2c4a4c4d858346997c3d5e76c1bafb3e41593d06 Mon Sep 17 00:00:00 2001
From: Tomi Virkki <virkki@vaadin.com>
Date: Wed, 13 Dec 2023 14:37:12 +0200
Subject: [PATCH] fix: map falsy boolean properties as undefined

---
 src/utils/createComponent.ts | 18 ++++++++++++++++--
 test/Select.spec.tsx         | 27 ++++++++++++++++++++++++++-
 test/SideNav.spec.tsx        | 33 +++++++++++++++++++++++++++++++++
 3 files changed, 75 insertions(+), 3 deletions(-)
 create mode 100644 test/SideNav.spec.tsx

diff --git a/src/utils/createComponent.ts b/src/utils/createComponent.ts
index 3a86a5a6..f21f3409 100644
--- a/src/utils/createComponent.ts
+++ b/src/utils/createComponent.ts
@@ -4,7 +4,7 @@ import {
   type WebComponentProps as _WebComponentProps,
 } from '@lit-labs/react';
 import type { ThemePropertyMixinClass } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
-import type React from 'react';
+import React from 'react';
 import type { RefAttributes } from 'react';
 import type { ControllerMixinClass } from '@vaadin/component-base/src/controller-mixin.js';
 
@@ -81,7 +81,7 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}
 export function createComponent<I extends HTMLElement, E extends EventNames = {}>(options: Options<I, E>): any {
   const { elementClass } = options;
 
-  return _createComponent(
+  const component = _createComponent(
     '_properties' in elementClass
       ? {
           ...options,
@@ -98,4 +98,18 @@ export function createComponent<I extends HTMLElement, E extends EventNames = {}
         }
       : options,
   );
+
+  return React.forwardRef<typeof component, Parameters<typeof component>[0]>((props, ref) => {
+    // Map falsy boolean properties as `undefined` to avoid them from rendering with the
+    // value "false" in the attribute, for example `<vaadin-button hidden="false">`,
+    // which would actually evaluate as `hidden` being `true`.
+    const falsyBooleanProps = Object.entries(props).reduce((acc, [key, value]) => {
+      if (value === false) {
+        return { ...acc, [key]: undefined };
+      }
+      return acc;
+    }, {});
+
+    return React.createElement(component, { ...props, ...falsyBooleanProps, ref });
+  });
 }
diff --git a/test/Select.spec.tsx b/test/Select.spec.tsx
index bc08e310..b555ce8b 100644
--- a/test/Select.spec.tsx
+++ b/test/Select.spec.tsx
@@ -6,7 +6,7 @@ import chaiDom from 'chai-dom';
 import type { ReactElement } from 'react';
 import { ListBox } from '../src/ListBox.js';
 import { Item } from '../src/Item.js';
-import { Select } from '../src/Select.js';
+import { Select, SelectElement } from '../src/Select.js';
 import { findByQuerySelector } from './utils/findByQuerySelector.js';
 
 useChaiPlugin(chaiDom);
@@ -143,4 +143,29 @@ describe('Select', () => {
       await expect(findByQuerySelector('div[slot="prefix"]')).to.eventually.have.text('Value:');
     });
   });
+
+  describe('boolean property', () => {
+    const booleanProperties: Array<keyof typeof SelectElement.prototype & string> = [
+      'disabled',
+      'hidden',
+      'opened',
+      'draggable',
+    ];
+
+    booleanProperties.forEach((property) => {
+      describe(property, () => {
+        it(`should be true in the element if ${property} prop is true`, async () => {
+          render(<Select items={[{ label: 'foo', value: 'foo' }]} {...{ [property]: true }} />);
+          const select = await findByQuerySelector('vaadin-select');
+          expect(select[property]).to.be.ok;
+        });
+
+        it(`should be false in the element if ${property} prop is false`, async () => {
+          render(<Select items={[{ label: 'foo', value: 'foo' }]} {...{ [property]: false }} />);
+          const select = await findByQuerySelector('vaadin-select');
+          expect(select[property]).not.to.be.ok;
+        });
+      });
+    });
+  });
 });
diff --git a/test/SideNav.spec.tsx b/test/SideNav.spec.tsx
new file mode 100644
index 00000000..6efbd0b0
--- /dev/null
+++ b/test/SideNav.spec.tsx
@@ -0,0 +1,33 @@
+import { expect, use as useChaiPlugin } from '@esm-bundle/chai';
+import { render } from '@testing-library/react';
+import chaiDom from 'chai-dom';
+import { SideNav, SideNavElement } from '../src/SideNav.js';
+import { findByQuerySelector } from './utils/findByQuerySelector.js';
+
+useChaiPlugin(chaiDom);
+
+describe('SideNav', () => {
+  describe('boolean property', () => {
+    const booleanProperties: Array<keyof typeof SideNavElement.prototype & string> = [
+      'hidden',
+      'collapsed',
+      'draggable',
+    ];
+
+    booleanProperties.forEach((property) => {
+      describe(property, () => {
+        it(`should be true in the element if ${property} prop is true`, async () => {
+          render(<SideNav {...{ [property]: true }} />);
+          const sideNav = await findByQuerySelector('vaadin-side-nav');
+          expect(sideNav[property]).to.be.ok;
+        });
+
+        it(`should be false in the element if ${property} prop is false`, async () => {
+          render(<SideNav {...{ [property]: false }} />);
+          const sideNav = await findByQuerySelector('vaadin-side-nav');
+          expect(sideNav[property]).not.to.be.ok;
+        });
+      });
+    });
+  });
+});