[Bug]: `CInput` @input event not emitted when wrapped inside `CInputGroup` component

[codebender828]

Describe the bug
When the CInput component is wrapped inside the CInputGroup the @input event is not emitted.

To Reproduce
Steps to reproduce the behavior:

1. Go to https://codesandbox.io/s/gifted-torvalds-c9nud?file=/src/App.vue
2. Type in first input. Logs are not shown in console.

Expected behavior
@input events should be emitted for inputs wrapped inside the CInputGroup component

[fugaku]

Any workaround while waiting for the bug resolved ?

[codebender828]

Hey @fugaku. At the moment I'm not really sure.

If it's urgent for your case, you could try using the native @input or @input.native events to get the input event and values.

Will take a look at this tomorrow since I have an idea on how this can be fixed.

[codebender828]

Hey @fugaku I'm currently working on this, and I'd like to see your current use case for listening to events so I can decide how to go forward with the fix for this. Is there something in particular you wanted to do?

[fugaku]

Hey @codebender828

Should I try to create a repo with my use case for you ?

[codebender828]

Yes. That would be helpful. 👍🏽

[dombavetta]

Hey guys, I ran into this as well during my development but forgot to record it to later create an issue. This problem is not only isolated to the input event, you will also experience this with others such as focus and blur. The .native workaround proposed by @codebender828 will work in the meantime, however, I would like to pose an additional workaround that I found myself using. Oddly enough you can successfully listen to the input event my attaching listener through the component instance's $on method.

mounted() {
    this.$refs.inputGroupInput.$on("input", this.handleInputFromVM);
}

I've forked @codebender828 codesandbox demonstrating this incase you were curious. Check out the sandbox here.

[codebender828]

Thanks for sharing, @dombavetta ! There's a couple of caveats with how functional components handle events for cloned children. So seeing how people are using these events is helpful. I was considering rewriting the CInputGroup to a stateful component, but was holding off for a bit.

[fpoliquin]

I've hit the same issue. I was trying to wrap the c-input-group to build a higher level search box component which needs to expose the "input" event.

[ajacquierbret]

Same here, I had to use a watcher on the v-model value in order to get an input event.