@keydown doesn't work with vgform:input

[bmheenan]

Describe the bug
I'm trying to create a small form where the user enters values into different fields, and can hit enter while focusing on any of them and have that data submit. It seems the way to do this would be something like:

• use vgform: components to bind their values to fields of the component and make them easy to access and easy to clear on submit
• add @keydown to point to a function that checks to see if the key was enter, and if so, submit. (Other options exist here, but they all take the form of using an @event on the vgform: component.

But this doesn't compile: vgcomp.keydown undefined (type *vgform.Input has no field or method keydown)

Software Versions
Vugu version: 0.3.3
Go version: 1.15.2
Browser and version: Testing on Chrome 86, though don't think it's applicable here

To Reproduce

<vgform:Input
    class="name"
    type="text"
    :Value='vgform.StringPtr{&c.Name}'
    @keydown='c.Keydown(event)'></vgform:Input>

func (c *Component) Keydown(e vugu.DOMEvent) {	
    if e.PropString("key") == "Enter" {
        // get all the bound values and submit to server, then clear them
    }
}

Expected behavior
This should compile. Keydown(e) should effectively do nothing until the enter key is pressed. When the user enters text into "name", c.Name should be updated to reflect it. When the user presses enter, the code at the comment is executed.

Thanks!

[bmheenan]

I should also point out that it's possible to use @keydown in the above code if you substitute out the <vgform:Input> for a regular old <input>. But if you do that, the values of the inputs aren't bound to anything easily accessible when you want to submit to the server

[bmheenan]

In case anyone else comes across this, the workaround that worked for me was to use github.com/vugu/vugu/js to read the current values from the input fields I needed:

import "github.com/vugu/vugu/js"

func (c *Component) getField(id string) string {
    jsDoc := js.Global().Get("document")
    if !jsDoc.Truthy() {
        return ""
    }
    f := jsDoc.Call("getElementById", id)
    if !f.Truthy() {
        return ""
    }
    return f.Get("value").String()
}

[bradleypeabody]

Yeah, this has to do with the fact that @eventName= means different things for components vs regular HTML elements. The design of the vgform package is still in flux and I'm not sure yet whether it makes sense to, and if so how, add support for all of the possible events to vgform:Input.

For now, your workaround seems okay or you might want to consider just using a regular <input tag - to which you can attach whatever events you need and capturing the change to the value is as simple as setting up a handler for @change=. As you can see from here https://github.com/vugu/vugu/blob/master/vgform/input.go#L19 the implementation is trivial.

I plan to do some more experimentation with forms soon and I'm sure better patterns will emerge from this.

[bmheenan]

Yup, I'm using the workaround above with a regular <input> tag. It's working without issue

[owenwaller]

See #250

We need to make a decision on what if anything needs to change in the vgforms package for a v1.0.