question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Reactions:1
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

2reactions
dombavettacommented, Sep 18, 2020

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.

0reactions
peoraycommented, Dec 23, 2021

Closing this as it looks to be fixed (update in the next release). Feel free to reopen if this isn’t the case

Read more comments on GitHub >

github_iconTop Results From Across the Web

V-chip not issuing input event to parent - Stack Overflow
I suspect Vue not reacting to the first click due to using an array like this. You could wrap it in a function:...
Read more >
html input change event propagates out of wrapping component
When wrapping an html input in a component, without giving the component an explicit @Output change the html input's change event propagates out ......
Read more >
Inputs — Essentials ⚡️ FormKit — Vue Forms, Supercharged
Emitted when the component's setup is complete. This is the internal FormKitNode object at the heart of the input. Vue events.
Read more >
Vue custom input - DEV Community ‍ ‍
Most of us have faced it: build a custom input component. There are multiple reasons behind it but in general, it has custom...
Read more >
Inputs | Vue Formulate ⚡️ The easiest way to build forms ...
The label to display inside "add more" button on group and file[multiple] inputs. attributes, An object of non-prop attributes passed to the input...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found