Triggering Bubbled Component Events

[exapsy]

I want to report for a:

• Feature
• Bug

---

HTML components have a built-in function that lets you dispatch an event.

<input ref={(input) => this.input = input}/>
....
this.input.dispatchEvent (new Event(...));

As far as I searched, there isn't such feature in Semantic-UI components. Is there? Since I didn't find anything regarding such feature, I would suggest the creation of it.

---

For example, I want to trigger manually an event, but if I do it like this:

randomFunction(e) {
  this.inputChanged({target: {value: newValue}});
}

And I have a component in this shape:

<div onChange={this.divChanged.bind(this)}>
  <Input onChange={this.inputChanged.bind(this)/>
</div>

It's gonna be buggy. Parent components, in this case, div's onChange, won't be triggered because the bubbling event is not there.

And as far as I know we can't achieve bubbling in Semantic-UI-React, can we? Excuse me if I'm wrong.

[layershifter]

I really don't understand what you trying to do. There is a React way to handle changes of Input:

class Example extends React.Component {
  state = { value: '' }
  
  handleChange = (e, { value }) => {
    // call any other actions
    this.setState({ value })
  }

  render() {
    const { value } = this.state

    return <Input onChange={this.handleChange} value={value} />
  }
}

I don't see neither the logic, nor the value in your proposal now. Please make a valid code example where we will can see the usefulness of your proposal.

[exapsy]

You didn't understand what I described.

What you do is to Handle User Input Changes. What I want to do is to Handle Programmatically Input Changes. And when you change a Component's properties programmatically, events are not naturally called.

So if you're gonna change the input manually/programmatically:
this.setState({value: 'hi guys, want a lemonade?'});
The onChange() event is not gonna be called. And if you call it manually, then there's not gonna be any bubble.

Naturally, there is a function called dispatchEvent() in which you dispatch a Event object where you can even select bubble property to be true, so if you're gonna call onChange() then all the parent components are gonna trigger their onChange event as well.

PS
Forgive me if I'm being rude or anything but ... Can you explain to me why the culture in Git Issues is to close the Issue before it being solved? I mean you didn't even understand my issue right there because I was clearly talking about Bubbling and Programmatically changing input and you talked about User Changing the Input, two fundamentally different things.
Sorry again if I'm being inappropriate, but it's a thing I just don't understand why you do it in Git Issues. I mean isn't the objective of Issues to Solve the issues instead of just ... closing them before even you let the person who initially made the issue to reply first? I mean you may have even misunderstood him because of your failure or his failure.

[layershifter]

You didn't understand what I described.

And I still don't understand your practical need in this. dispatchEvent() is part of DOM API, it's foreign to React which tries keep away from the real DOM tree.

If it is so necessary, then use findDOMNode(). You will receive a DOM node and then you can call dispatchEvent(). You can also wait for innerRef prop, it will be shipped in #1879, it will always return a DOM node.

Can you explain to me why the culture in Git Issues is to close the Issue before it being solved?

I don't see issue there, there is a workaround with findDOMNode if there is real need. You still didn't show me a practical example in React.

I mean you didn't even understand my issue right there because I was clearly talking about Bubbling and Programmatically changing input and you talked about User Changing the Input, two fundamentally different things.

It's one thing, React offers a one-way data flow, anything another is bad solution in most cases.

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

The code above would never have gone through my code review because there is a direct DOM manipulation. It's the antipattern, possible you don't need React at all?

[exapsy]

Possible you don't need React at all

... you know you're saying that because you're pissed right? And I can see it as well. Because there is not really any point of saying such thing for a productive discussion. Obviously, I have my reasons for using React and that's none of anyone's concerns.
But I'm really sorry if anything that I said, pissed you off. Pardon me, I'll drink a beer for you :).

The code above would never have gone through my code review because there is a direct DOM manipulation.

This code obviously is code just to present my point fast. Not to demonstrate to anyone my coding skills.

Obviously, behind this, I'm changing the component's state/or redux or whatever in your preference, which state is input's value, instead of changing directly the components property. But for the sake of simplicity, I've gone the short way of changing directly the Components value property.
But, if I change the state programmatically, then onChange is not gonna be triggered.
And if it's not gonna be triggered, then I have to call it manually.
And if I have to call it manually, then there is no Bubble property to be true, so the parent components will not trigger onChange event.

Like in this example:

<li onChange={this.listChanged.bind(this)>
  <input value={this.state.value} onChange={this.inputChanged.bind(this)/>
</li>

// This function is called from someone, and is placed in same component as input
myFunction() {
  this.setState = { value: 'i m new Valueeeeee :D' };
}

Well, when myFunction is called, state's value variable is changed. When value is changed, input's value changes too. BUT onChange is not triggered. So let's trigger it manually,

myFunction() {
  this.setState = { value: 'i m new Valueeeeee :D' };
  this.inputChanged();
}

now it's triggered (without event or data though) but we have one problem, no bubble effect, therefore listChanged() is not triggered. Which at least in my case, should. Because I want my component to react like User changed it.

[rajjeet]

Having similar issue. My situation is that I'm building a number picker to feed into the control of the Semantic UI's Form field. After changing the internal state of my control using onKeyDown(), the value of input changes but the onChange is not fired. I need it to fire in order to pass the data to the parent component, which originally supplies the onChange function. Reminder that onChange callback has (event, data).