Add event handling to input field and text area components

- Add events that wrap vugu.DOMEvent
- Add event example for the input field component
- Rename handleChange to handleInput
- Forward any oninput, onkeydown, onkeypress or onkeyup events to event listeners

.vscode/settings.json

@@ -5,6 +5,8 @@
         "datetime",
         "domrender",
         "Fullscreen",
+        "keypress",
+        "keyup",
         "ldflags",
         "Segoe",
         "simplehttp",

components/input/events.go

@@ -2,6 +2,101 @@ package input
 
 import "github.com/vugu/vugu"
 
+// A mirror of some DOM events described here:
+// https://www.w3schools.com/tags/ref_eventattributes.asp
+
+// TODO: Find a better way to expose DOM events from HTML elements inside D3vugu-components
+
+type ChangeEvent struct {
+	vugu.DOMEvent
+}
+
+// ChangeHandler is the interface for things that can handle ChangeEvent.
+type ChangeHandler interface {
+	ChangeHandle(event ChangeEvent)
+}
+
+// ChangeFunc implements ChangeHandler as a function.
+type ChangeFunc func(event ChangeEvent)
+
+// ChangeHandle implements the ChangeHandler interface.
+func (f ChangeFunc) ChangeHandle(event ChangeEvent) { f(event) }
+
+// assert ChangeFunc implements ChangeHandler.
+var _ ChangeHandler = ChangeFunc(nil)
+
+type InputEvent struct {
+	vugu.DOMEvent
+}
+
+// InputHandler is the interface for things that can handle InputEvent.
+type InputHandler interface {
+	InputHandle(event InputEvent)
+}
+
+// InputFunc implements InputHandler as a function.
+type InputFunc func(event InputEvent)
+
+// InputHandle implements the InputHandler interface.
+func (f InputFunc) InputHandle(event InputEvent) { f(event) }
+
+// assert InputFunc implements InputHandler.
+var _ InputHandler = InputFunc(nil)
+
+type KeyDownEvent struct {
+	vugu.DOMEvent
+}
+
+// KeyDownHandler is the interface for things that can handle KeyDownEvent.
+type KeyDownHandler interface {
+	KeyDownHandle(event KeyDownEvent)
+}
+
+// KeyDownFunc implements KeyDownHandler as a function.
+type KeyDownFunc func(event KeyDownEvent)
+
+// KeyDownHandle implements the KeyDownHandler interface.
+func (f KeyDownFunc) KeyDownHandle(event KeyDownEvent) { f(event) }
+
+// assert KeyDownFunc implements KeyDownHandler.
+var _ KeyDownHandler = KeyDownFunc(nil)
+
+type KeyPressEvent struct {
+	vugu.DOMEvent
+}
+
+// KeyPressHandler is the interface for things that can handle KeyPressEvent.
+type KeyPressHandler interface {
+	KeyPressHandle(event KeyPressEvent)
+}
+
+// KeyPressFunc implements KeyPressHandler as a function.
+type KeyPressFunc func(event KeyPressEvent)
+
+// KeyPressHandle implements the KeyPressHandler interface.
+func (f KeyPressFunc) KeyPressHandle(event KeyPressEvent) { f(event) }
+
+// assert KeyPressFunc implements KeyPressHandler.
+var _ KeyPressHandler = KeyPressFunc(nil)
+
+type KeyUpEvent struct {
+	vugu.DOMEvent
+}
+
+// KeyUpHandler is the interface for things that can handle KeyUpEvent.
+type KeyUpHandler interface {
+	KeyUpHandle(event KeyUpEvent)
+}
+
+// KeyUpFunc implements KeyUpHandler as a function.
+type KeyUpFunc func(event KeyUpEvent)
+
+// KeyUpHandle implements the KeyUpHandler interface.
+func (f KeyUpFunc) KeyUpHandle(event KeyUpEvent) { f(event) }
+
+// assert KeyUpFunc implements KeyUpHandler.
+var _ KeyUpHandler = KeyUpFunc(nil)
+
 type ClickEvent struct {
 	vugu.DOMEvent
 }

components/input/field.go

@@ -20,6 +20,11 @@ type Field struct {
 	Type string // Overrides the type of the input component.
 
 	err error // Current error caused by any invalid input.
+
+	Input    InputHandler    // External handler that is called upon an event.
+	KeyDown  KeyDownHandler  // External handler that is called upon an event.
+	KeyPress KeyPressHandler // External handler that is called upon an event.
+	KeyUp    KeyUpHandler    // External handler that is called upon an event.
 }
 
 func (c *Field) content() string {
@@ -42,10 +47,32 @@ func (c *Field) inputType() string {
 	return ""
 }
 
-func (c *Field) handleChange(event vugu.DOMEvent) {
+func (c *Field) handleInput(event vugu.DOMEvent) {
 	val := event.PropString("target", "value")
 
 	if c.Bind != nil {
 		c.err = c.Bind.SetStringValue(val)
 	}
+
+	if c.Input != nil {
+		c.Input.InputHandle(InputEvent{event})
+	}
+}
+
+func (c *Field) handleKeyDown(event vugu.DOMEvent) {
+	if c.KeyDown != nil {
+		c.KeyDown.KeyDownHandle(KeyDownEvent{event})
+	}
+}
+
+func (c *Field) handleKeyPress(event vugu.DOMEvent) {
+	if c.KeyPress != nil {
+		c.KeyPress.KeyPressHandle(KeyPressEvent{event})
+	}
+}
+
+func (c *Field) handleKeyUp(event vugu.DOMEvent) {
+	if c.KeyUp != nil {
+		c.KeyUp.KeyUpHandle(KeyUpEvent{event})
+	}
 }

components/input/field.vugu

@@ -1,5 +1,5 @@
 <div vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1684925699 d3c-button-borderless"}'>
-	<input :id="c.ID" :type="c.inputType()" :value="c.content()" @input="c.handleChange(event)">
+	<input :id="c.ID" :type="c.inputType()" :value="c.content()" @input="c.handleInput(event)" @keydown="c.handleKeyDown(event)" @keypress="c.handleKeyPress(event)" @keyup="c.handleKeyUp(event)">
 	<vg-comp expr="c.DefaultSlot"></vg-comp>
 	<div class="d3c-1684925699-error d3c-color-critical" vg-if="c.err != nil"></div>
 </div>

components/input/field_gen.go

@@ -37,7 +37,22 @@ func (c *Field) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		vgn.AddAttrInterface("value", c.content())
 		vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
 			EventType:	"input",
-			Func:		func(event vugu.DOMEvent) { c.handleChange(event) },
+			Func:		func(event vugu.DOMEvent) { c.handleInput(event) },
+			// TODO: implement capture, etc. mostly need to decide syntax
+		})
+		vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+			EventType:	"keydown",
+			Func:		func(event vugu.DOMEvent) { c.handleKeyDown(event) },
+			// TODO: implement capture, etc. mostly need to decide syntax
+		})
+		vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+			EventType:	"keypress",
+			Func:		func(event vugu.DOMEvent) { c.handleKeyPress(event) },
+			// TODO: implement capture, etc. mostly need to decide syntax
+		})
+		vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+			EventType:	"keyup",
+			Func:		func(event vugu.DOMEvent) { c.handleKeyUp(event) },
 			// TODO: implement capture, etc. mostly need to decide syntax
 		})
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}

components/input/text-area.go

@@ -10,6 +10,11 @@ type TextArea struct {
 	AttrMap vugu.AttrMap
 
 	Bind ValueBinder
+
+	Input    InputHandler    // External handler that is called upon an event.
+	KeyDown  KeyDownHandler  // External handler that is called upon an event.
+	KeyPress KeyPressHandler // External handler that is called upon an event.
+	KeyUp    KeyUpHandler    // External handler that is called upon an event.
 }
 
 func (c *TextArea) content() string {
@@ -20,10 +25,32 @@ func (c *TextArea) content() string {
 	return ""
 }
 
-func (c *TextArea) handleChange(event vugu.DOMEvent) {
+func (c *TextArea) handleInput(event vugu.DOMEvent) {
 	val := event.PropString("target", "value")
 
 	if c.Bind != nil {
 		c.Bind.SetStringValue(val) // TODO: Error is omitted, we should show it
 	}
+
+	if c.Input != nil {
+		c.Input.InputHandle(InputEvent{event})
+	}
+}
+
+func (c *TextArea) handleKeyDown(event vugu.DOMEvent) {
+	if c.KeyDown != nil {
+		c.KeyDown.KeyDownHandle(KeyDownEvent{event})
+	}
+}
+
+func (c *TextArea) handleKeyPress(event vugu.DOMEvent) {
+	if c.KeyPress != nil {
+		c.KeyPress.KeyPressHandle(KeyPressEvent{event})
+	}
+}
+
+func (c *TextArea) handleKeyUp(event vugu.DOMEvent) {
+	if c.KeyUp != nil {
+		c.KeyUp.KeyUpHandle(KeyUpEvent{event})
+	}
 }

components/input/text-area.vugu

@@ -1,4 +1,4 @@
-<textarea vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1687815676"}' vg-content="c.content()" @input="c.handleChange(event)"></textarea>
+<textarea vg-attr='utils.AttributesAppend{AttrMap: c.AttrMap, Classes: "d3c-1687815676"}' vg-content="c.content()" @input="c.handleInput(event)" @keydown="c.handleKeyDown(event)" @keypress="c.handleKeyPress(event)" @keyup="c.handleKeyUp(event)"></textarea>
 
 <style>
 </style>

components/input/text-area_gen.go

@@ -28,7 +28,22 @@ func (c *TextArea) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 	vgn.SetInnerHTML(c.content())
 	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
 		EventType:	"input",
-		Func:		func(event vugu.DOMEvent) { c.handleChange(event) },
+		Func:		func(event vugu.DOMEvent) { c.handleInput(event) },
+		// TODO: implement capture, etc. mostly need to decide syntax
+	})
+	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+		EventType:	"keydown",
+		Func:		func(event vugu.DOMEvent) { c.handleKeyDown(event) },
+		// TODO: implement capture, etc. mostly need to decide syntax
+	})
+	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+		EventType:	"keypress",
+		Func:		func(event vugu.DOMEvent) { c.handleKeyPress(event) },
+		// TODO: implement capture, etc. mostly need to decide syntax
+	})
+	vgn.DOMEventHandlerSpecList = append(vgn.DOMEventHandlerSpecList, vugu.DOMEventHandlerSpec{
+		EventType:	"keyup",
+		Func:		func(event vugu.DOMEvent) { c.handleKeyUp(event) },
 		// TODO: implement capture, etc. mostly need to decide syntax
 	})
 	vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Data: "style", Attr: []vugu.VGAttribute(nil)}

page-input.go

@@ -3,10 +3,15 @@ package main
 import (
 	"time"
 
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/input"
+	"git.d3nexus.de/Dadido3/D3vugu-components/components/overlay"
+	"git.d3nexus.de/Dadido3/D3vugu-components/icons"
 	"github.com/vugu/vugu"
 )
 
 type PageInput struct {
+	overlay.OverlayContainerRef
+
 	button1Counter int  `vugu:"data"`
 	button4Bool    bool `vugu:"data"`
 
@@ -23,6 +28,7 @@ type PageInput struct {
 	inputField5Bool   bool      `vugu:"data"`
 	inputField6Bool   bool      `vugu:"data"`
 	inputField7Time   time.Time `vugu:"data"`
+	inputField8String string    `vugu:"data"`
 
 	dropdown1Slice []string `vugu:"data"`
 	dropdown1Index int      `vugu:"data"`
@@ -40,3 +46,16 @@ func (c *PageInput) Init(ctx vugu.InitCtx) {
 	c.tags1Slice = []string{"some", "tags"}
 	c.textArea1 = "This is some example text\n\nAnd some line-breaks."
 }
+
+func (c *PageInput) handleInputField8KeyDown(event input.KeyDownEvent) {
+	switch event.PropString("key") {
+	case "Enter":
+		c.AddToast(event.EventEnv(), &overlay.ToastSimple{
+			IconSlot:    &icons.LInputField{AttrMap: vugu.AttrMap{"style": "font-size: 2em;"}},
+			Message:     "You have entered: " + c.inputField8String,
+			SignalColor: "d3c-color-success",
+			Duration:    5 * time.Second,
+		})
+		event.PreventDefault()
+	}
+}

page-input.vugu

@@ -111,6 +111,9 @@
 		<label for="page-input-7">Some input field bound to a time.Time value</label>
 		<input:Field ID="page-input-7" :Bind="input.ValueBindAny{&c.inputField7Time}"></input:Field>
 		<span vg-content='fmt.Sprintf("Selected date and time is %v.", c.inputField7Time)'></span>
+		<p>Custom event handling:</p>
+		<label for="page-input-8">Press enter</label>
+		<input:Field ID="page-input-8" :Bind="input.ValueBindAny{&c.inputField8String}" @KeyDown="c.handleInputField8KeyDown(event)"></input:Field>
 
 		<h2>Drop-down</h2>
 		<label for="page-dropdown-1">Select a slice entry</label>

page-input_gen.go

@@ -33,7 +33,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 		vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t"}
 		vgparent.AppendChild(vgn)
 		{
-			vgcompKey := vugu.MakeCompKey(0x20AFF4661A9DBAD9^vgin.CurrentPositionHash(), vgiterkey)
+			vgcompKey := vugu.MakeCompKey(0xD91683A9B73577EE^vgin.CurrentPositionHash(), vgiterkey)
 			// ask BuildEnv for prior instance of this specific component
 			vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*layout.Container)
 			if vgcomp == nil {
@@ -64,7 +64,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Clickable components support the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x5A116BC94CF63768^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x5B30FCAD26739F63^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -91,7 +91,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: " event that handlers can be registered to with "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x7D75A607D172A648^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x6B9DB7F6B53653AE^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -119,7 +119,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x2A46D9C008E5DA2F^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xF288C6CA8AD20954^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -168,7 +168,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x4F8BA7FB451CC44^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x3B4A927BBE7A1799^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -200,7 +200,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xCBC9DEE03A1E26A2^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x90DA35C1900DEDC8^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -234,7 +234,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xD11A25C5F2E57764^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x4D711FE64E9739F8^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -269,7 +269,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xEB082BAAB0ABC376^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x765CC91E21B26780^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -286,7 +286,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						_ = vgparent
 
 						{
-							vgcompKey := vugu.MakeCompKey(0xE26F025C754B71B6^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x406B98FE10679DEC^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LDocument)
 							if vgcomp == nil {
@@ -332,7 +332,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "Use the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0xC6349A780706CB5^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x61B658093D9F2480^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -362,7 +362,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x25309BA5848CE09D^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x223C6A258C851839^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -397,7 +397,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x793CBD2C6ACD6913^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x262D746787D635F5^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -416,7 +416,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						_ = vgparent
 
 						{
-							vgcompKey := vugu.MakeCompKey(0xD464CB7D5C84AD3E^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x1D5E2D2D1DC8E22B^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 							if vgcomp == nil {
@@ -456,7 +456,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x56FF116DD1D87131^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x166575EBA57E5395^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -488,7 +488,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x3F74EE4F364D7546^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xE099A60747E10D04^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 					if vgcomp == nil {
@@ -526,7 +526,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xC890FBC405DDB382^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xD69BB61B7D6C0736^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -559,7 +559,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xB9542701212503E8^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x7C7203F10026D9CC^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.RadioButton)
 					if vgcomp == nil {
@@ -589,7 +589,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x741AC57AA9892A43^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xE8EB5D97D32EA36B^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.RadioButton)
 					if vgcomp == nil {
@@ -619,7 +619,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x78CF8ACFE66F1617^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x63BB4B42C419B5E0^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.RadioButton)
 					if vgcomp == nil {
@@ -654,7 +654,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x5853CD30A469B1B6^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x356F69A257F5FFAC^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -687,7 +687,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x91FA49391BE710A7^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x584A990787491C54^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.CheckBox)
 					if vgcomp == nil {
@@ -716,7 +716,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x2DD1CB1E7668F6C7^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x15E876772E1B60A5^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.CheckBox)
 					if vgcomp == nil {
@@ -757,7 +757,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "To make labels work correctly, you have to use the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0x7EFC7036A0CEA6D1^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0x8A395E3190C3BB17^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -787,7 +787,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x67B414215975FF17^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xDCC83ED7EF6D2B07^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.Code)
 					if vgcomp == nil {
@@ -825,7 +825,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x9D2D2B8EC44C2B85^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xBF2BED8C1A148BAA^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -858,7 +858,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x2BA6E1CD5B6EC3FE^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xF5BFE72E3641883A^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -891,7 +891,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x35E6F87C9A5DE838^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x1EE0EF214E2E7C18^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -924,7 +924,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x1EA9E22891F399BE^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xCF488DFDD87608E2^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -954,7 +954,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 					vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "For passwords you have to set the "}
 					vgparent.AppendChild(vgn)
 					{
-						vgcompKey := vugu.MakeCompKey(0xAA3855DFEC08E3AE^vgin.CurrentPositionHash(), vgiterkey)
+						vgcompKey := vugu.MakeCompKey(0xE03E10C30B31DCAE^vgin.CurrentPositionHash(), vgiterkey)
 						// ask BuildEnv for prior instance of this specific component
 						vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*view.CodeInline)
 						if vgcomp == nil {
@@ -989,7 +989,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x1925AA2267C74C87^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x28EFFF3CE273EF44^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -1023,7 +1023,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x200790365C99A354^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x756CB00237D8810^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -1044,7 +1044,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0xE80EA74D367F5D16^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0x4C793F71A9D72212^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -1065,7 +1065,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent.AppendChild(vgn)
 								if !c.inputField5Bool {
 									{
-										vgcompKey := vugu.MakeCompKey(0xA5DA8A9DBDB90700^vgin.CurrentPositionHash(), vgiterkey)
+										vgcompKey := vugu.MakeCompKey(0xDBC6A1964C3AAB4E^vgin.CurrentPositionHash(), vgiterkey)
 										// ask BuildEnv for prior instance of this specific component
 										vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LLockOpened)
 										if vgcomp == nil {
@@ -1085,7 +1085,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgparent.AppendChild(vgn)
 								if c.inputField5Bool {
 									{
-										vgcompKey := vugu.MakeCompKey(0xDD2A63E717759625^vgin.CurrentPositionHash(), vgiterkey)
+										vgcompKey := vugu.MakeCompKey(0xADC3EACF8D017D8^vgin.CurrentPositionHash(), vgiterkey)
 										// ask BuildEnv for prior instance of this specific component
 										vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LLockClosed)
 										if vgcomp == nil {
@@ -1112,7 +1112,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 						vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t"}
 						vgparent.AppendChild(vgn)
 						{
-							vgcompKey := vugu.MakeCompKey(0x1F20F757A0BF686B^vgin.CurrentPositionHash(), vgiterkey)
+							vgcompKey := vugu.MakeCompKey(0xAAE16992DDE3F2B4^vgin.CurrentPositionHash(), vgiterkey)
 							// ask BuildEnv for prior instance of this specific component
 							vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Button)
 							if vgcomp == nil {
@@ -1131,7 +1131,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 								vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t\t\t"}
 								vgparent.AppendChild(vgn)
 								{
-									vgcompKey := vugu.MakeCompKey(0x70D6A89A66CE9BBA^vgin.CurrentPositionHash(), vgiterkey)
+									vgcompKey := vugu.MakeCompKey(0xF4E25069180419AB^vgin.CurrentPositionHash(), vgiterkey)
 									// ask BuildEnv for prior instance of this specific component
 									vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*icons.LGlobe)
 									if vgcomp == nil {
@@ -1173,7 +1173,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xBF6D1D28C0C5977A^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x7C3A36DA5DCF3ED3^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
 					if vgcomp == nil {
@@ -1193,6 +1193,35 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "span", Attr: []vugu.VGAttribute(nil)}
 				vgparent.AppendChild(vgn)
 				vgn.SetInnerHTML(fmt.Sprintf("Selected date and time is %v.", c.inputField7Time))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "p", Attr: []vugu.VGAttribute(nil)}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Custom event handling:"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "label", Attr: []vugu.VGAttribute{{Namespace: "", Key: "for", Val: "page-input-8"}}}
+				vgparent.AppendChild(vgn)
+				vgn.SetInnerHTML(vugu.HTML("Press enter"))
+				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
+				vgparent.AppendChild(vgn)
+				{
+					vgcompKey := vugu.MakeCompKey(0xA262AF139BBC7695^vgin.CurrentPositionHash(), vgiterkey)
+					// ask BuildEnv for prior instance of this specific component
+					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Field)
+					if vgcomp == nil {
+						// create new one if needed
+						vgcomp = new(input.Field)
+						vgin.BuildEnv.WireComponent(vgcomp)
+					}
+					vgin.BuildEnv.UseComponent(vgcompKey, vgcomp)	// ensure we can use this in the cache next time around
+					vgcomp.Bind = input.ValueBindAny{&c.inputField8String}
+					vgcomp.ID = "page-input-8"
+					vgcomp.KeyDown = input.KeyDownFunc(func(event input.KeyDownEvent) { c.handleInputField8KeyDown(event) })
+					vgout.Components = append(vgout.Components, vgcomp)
+					vgn = &vugu.VGNode{Component: vgcomp}
+					vgparent.AppendChild(vgn)
+				}
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\n\t\t"}
 				vgparent.AppendChild(vgn)
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(3), Namespace: "", Data: "h2", Attr: []vugu.VGAttribute(nil)}
@@ -1206,7 +1235,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x454363DE2B487242^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0xA8B644EE4371B847^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Dropdown)
 					if vgcomp == nil {
@@ -1241,7 +1270,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0xD0C3C4E61B43E42F^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x13F92885BE084412^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.Tags)
 					if vgcomp == nil {
@@ -1265,7 +1294,7 @@ func (c *PageInput) Build(vgin *vugu.BuildIn) (vgout *vugu.BuildOut) {
 				vgn = &vugu.VGNode{Type: vugu.VGNodeType(1), Data: "\n\t\t"}
 				vgparent.AppendChild(vgn)
 				{
-					vgcompKey := vugu.MakeCompKey(0x8C06214DA250A7BD^vgin.CurrentPositionHash(), vgiterkey)
+					vgcompKey := vugu.MakeCompKey(0x3F5D3A7DED163940^vgin.CurrentPositionHash(), vgiterkey)
 					// ask BuildEnv for prior instance of this specific component
 					vgcomp, _ := vgin.BuildEnv.CachedComponent(vgcompKey).(*input.TextArea)
 					if vgcomp == nil {