From 8f00377da9054c2311f88875f30be9f7f443cfd2 Mon Sep 17 00:00:00 2001
From: Robbert Broersma <mail@robbertbroersma.nl>
Date: Wed, 8 Sep 2021 14:30:00 +0200
Subject: [PATCH] fix: incorrect `:invalid` state in shadow DOM

Uncovered a bug where empty `pattern`, `min`, `max` and `autocomplete` were included in the shadow DOM.
---
 components/form-field-textbox/stencil.tsx | 8 ++++----
 components/textbox/stencil.tsx            | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/components/form-field-textbox/stencil.tsx b/components/form-field-textbox/stencil.tsx
index 995b9442213..e2a69cf006b 100644
--- a/components/form-field-textbox/stencil.tsx
+++ b/components/form-field-textbox/stencil.tsx
@@ -43,11 +43,11 @@ export class FormFieldTextbox {
             readOnly && "utrecht-textbox--readonly"
           )}
           type={type || "text"}
-          autoComplete={autoComplete}
+          autoComplete={autoComplete ? autoComplete : null}
           disabled={disabled}
-          min={min}
-          max={max}
-          pattern={pattern}
+          min={min ? min : null}
+          max={max ? max : null}
+          pattern={pattern ? pattern : null}
           placeholder={placeholder || null}
           readonly={readOnly}
           required={required}
diff --git a/components/textbox/stencil.tsx b/components/textbox/stencil.tsx
index 5bfdd8fab75..564cddda84b 100644
--- a/components/textbox/stencil.tsx
+++ b/components/textbox/stencil.tsx
@@ -41,11 +41,11 @@ export class Textbox {
           readOnly && "utrecht-textbox--readonly"
         )}
         type={type || "text"}
-        autoComplete={autoComplete}
+        autoComplete={autoComplete ? autoComplete : null}
         disabled={disabled}
-        min={min}
-        max={max}
-        pattern={pattern}
+        min={min ? min : null}
+        max={max ? max : null}
+        pattern={pattern ? pattern : null}
         placeholder={placeholder || null}
         readonly={readOnly}
         required={required}