0

Having an Input from semantic-ui-react changed when the User writes something, does fire onChange and any parent component that includes the Input fires onChange as well. A process called bubble .... right?

Example

<li onChange={this.onListChange}>
  <Input onChange={this.onInputChange}/>
</li>

Any change made in the Input, fires onInputChange() and onListChange() together one after another.

Although, when Input.value/text/content is changed dynamically, Input.onChange() is not called at all. So you have to call the onChange() function manually.

setFoo() {
  this.input.value = 'foo';
  this.inputChange();
}

But the problem here is, that when we call inputChange we don't get as e.target the component Input, nor data has anything to do with it, and the most important ... :

No Bubbling effect.

Which means that onListChange() will not be fired.

Question:

How can I achieve a proper bugless bubbled onChange() on Semantic-UI-React?

Apostolis Anastasiou
  • 81
  • 1
  • 10
  • Isn't that what you want to do? Call `inputChange` manually whenever the list is changed? – fungusanthrax Oct 12 '17 at 15:04
  • Yes, but doing it that way means that you won't have bubble event to the parent components. I'm really surprised I have to say. 3 Answers till now, 2 of them were deleted because didn't work. This answer will probably be deleted too because it doesn't work too. Did an Issue in Github, no one can answer this question? – Apostolis Anastasiou Oct 12 '17 at 20:13
  • I don't quite understand what you're even asking. If you want the parent component to change when a change happens in a child component simply pass an onChange function to the child. – fungusanthrax Oct 12 '17 at 20:23

1 Answers1

0

Not exactly sure about semantic-ui-react because I've never used it, but this in theory should work (it works for a normal input):

setFoo() {
    this.input.value = 'foo';
    const event = new Event('input', { bubbles: true });
    this.input.dispatchEvent(event);
}
Raul Rene
  • 10,014
  • 9
  • 53
  • 75
  • This answer doesn't work for `Semantic-UI-React` unfortunately. dispatchEvent is not a function of its components. – Apostolis Anastasiou Oct 12 '17 at 20:11
  • @ApostolisAnastasiou Can you post the code rendering the `Input` elem? How are you storing the `this.input` reference to it? Nevertheless, I'm not quite sure why you want the `onChange` to fire dynamically. If the value is changed programatically, you know that it's changed and can handle the change somewhere else. The input was intentionally build to respond to user interaction – Raul Rene Oct 12 '17 at 21:29