@ionic/react 8.8.19-dev.11786730389.1a1927bf → 8.8.19-dev.11786832241.150538c7

package/dist/index.js

@@ -1084,6 +1084,13 @@ const NON_BOOLEAN_FALSE_ATTRIBUTES = new Set(['draggable', 'translate', 'spell-c
  * can be removed once React 18 support is dropped.
  */
 const isStaleFalseBooleanAttribute = (attribute) => !attribute.startsWith('aria-') && !attribute.startsWith('data-') && !NON_BOOLEAN_FALSE_ATTRIBUTES.has(attribute);
+/**
+ * Assigning `undefined` or `null` to a reflected prop like `id` writes the stringified value, so
+ * the element ends up with `id="undefined"` or `id="null"`. Only native properties are cleaned up
+ * here: a nullish component prop still has to reach the component, and Stencil clears the
+ * attribute for props declared `reflect: true`.
+ */
+const isNativeElementProperty = (name) => name in HTMLElement.prototype;
 const attachProps = (node, newProps, oldProps = {}) => {
     // some test frameworks don't render DOM elements, so we test here to make sure we are dealing with DOM first
     if (node instanceof Element) {
@@ -1109,12 +1116,19 @@ const attachProps = (node, newProps, oldProps = {}) => {
                 }
             }
             else {
-                node[name] = newProps[name];
-                const propType = typeof newProps[name];
+                const value = newProps[name];
+                node[name] = value;
+                if ((value === undefined || value === null) && isNativeElementProperty(name)) {
+                    // Remove both spellings: the property reflects `accesskey`, and dash-casing writes `access-key`.
+                    node.removeAttribute(name);
+                    node.removeAttribute(camelToDashCase(name));
+                    return;
+                }
+                const propType = typeof value;
                 if (propType === 'string') {
-                    node.setAttribute(camelToDashCase(name), newProps[name]);
+                    node.setAttribute(camelToDashCase(name), value);
                 }
-                else if (newProps[name] === false) {
+                else if (value === false) {
                     const attribute = camelToDashCase(name);
                     if (isStaleFalseBooleanAttribute(attribute)) {
                         node.removeAttribute(attribute);