fix: use Prop instead of State to fix form bindings

nl-design-system · Aug 15, 2021 · 5ce11d7 · 5ce11d7
1 parent e3450da
commit 5ce11d7
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 7 deletions.
diff --git a/components/checkbox/stencil.tsx b/components/checkbox/stencil.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { Component, Event, EventEmitter, Prop, State, h } from "@stencil/core";
+import { Component, Event, EventEmitter, Prop, h } from "@stencil/core";
 import clsx from "clsx";
 
 @Component({
@@ -14,8 +14,8 @@ import clsx from "clsx";
 export class Checkbox {
   @Prop({ reflect: true }) disabled: boolean = false;
   @Prop({ attribute: "readonly", reflect: true }) readOnly: boolean = false;
-  @State() checked: boolean = false;
-  @State() value: string = "";
+  @Prop() checked: boolean = false;
+  @Prop() value: string = "";
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;

diff --git a/components/form-field-textbox/stencil.tsx b/components/form-field-textbox/stencil.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { Component, Event, EventEmitter, Prop, State, h } from "@stencil/core";
+import { Component, Event, EventEmitter, Prop, h } from "@stencil/core";
 import clsx from "clsx";
 
 @Component({
@@ -16,7 +16,7 @@ export class FormFieldTextbox {
   @Prop({ reflect: true }) invalid: boolean = false;
   @Prop({ attribute: "readonly", reflect: true }) readOnly: boolean = false;
   @Prop() placeholder: string = "";
-  @State() value: string = "";
+  @Prop() value: string = "";
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;

diff --git a/components/textbox/stencil.tsx b/components/textbox/stencil.tsx
@@ -3,7 +3,7 @@
  * Copyright (c) 2021 Robbert Broersma
  */
 
-import { Component, Event, EventEmitter, Prop, State, h } from "@stencil/core";
+import { Component, Event, EventEmitter, Prop, h } from "@stencil/core";
 import clsx from "clsx";
 
 @Component({
@@ -16,7 +16,7 @@ export class Textbox {
   @Prop({ reflect: true }) invalid: boolean = false;
   @Prop({ attribute: "readonly", reflect: true }) readOnly: boolean = false;
   @Prop() placeholder: string = "";
-  @State() value: string = "";
+  @Prop() value: string = "";
   @Event() utrechtBlur: EventEmitter;
   @Event() utrechtChange: EventEmitter;
   @Event() utrechtFocus: EventEmitter;