react-select2-wrapper icon indicating copy to clipboard operation
react-select2-wrapper copied to clipboard

Not triggering props.onChange initially and when props.value changes + Old props.onChange gets triggered

Open vivekmoosani opened this issue 9 years ago • 9 comments

  1. Is it possible to not trigger the props.onChange() when Select2 is rendered the very first time or when props.value() is explicitly changed ?

  2. When I update both the props.value & props.onChange(), it calls the previously set change handler. This seems to be because the setValue() call in componentWillReceiveProps() triggers the change event and the componentWillUpdate() lifecycle method updates the handlers. Is there a particular reason why we update value in componentWillReceiveProps() ? https://github.com/rkit/react-select2-wrapper/blob/master/src/components/Select2.js#L54-L58

vivekmoosani avatar Nov 23 '16 14:11 vivekmoosani

  1. I think no.

Triggered whenever an option is selected or removed. https://select2.github.io/options.html#events

  1. I will fix it soon

rkit avatar Nov 24 '16 04:11 rkit

Please, try a new pre-release 1.0.4-beta1

rkit avatar Nov 24 '16 09:11 rkit

Thanks Igor, I will test and update.

vivekmoosani avatar Nov 24 '16 13:11 vivekmoosani

Hi Igor, Thanks the change works for my use case. Just a comment though. Should not it be 'prevProps' that are passed to this.detachEventHandlers() in updSelect2(). With the existing code you now cannot detach the handlers by simply not setting the corresponding props (onChange, onSelect ..) https://github.com/rkit/react-select2-wrapper/blob/8f63613cac5ab1736b64429ea14ec02674282889/src/components/Select2.js#L96

Also on #1 from the issue, I understand the trigger('change') call in updateValue() is needed for the select2 UI to update but this would also call the onChange() callback parent react component passes which seems unnecessary. We could add this check See https://github.com/rkit/react-select2-wrapper/compare/master...vivekmoosani:master

vivekmoosani avatar Nov 25 '16 11:11 vivekmoosani

Should not it be 'prevProps' that are passed to this.detachEventHandlers() in updSelect2().

Oh, yes, you're right, but you mean nextProps instead of prevProps ? We should detach the previous events.

Is it possible to not trigger the props.onChange() when Select2 is rendered the very first time or when props.value() is explicitly changed

… but this would also call the onChange() callback parent react component passes which seems unnecessary. We could add this check See

Yes, now I understand. I agree this needs to be fixed.

rkit avatar Nov 27 '16 04:11 rkit

Should not it be 'prevProps' that are passed to this.detachEventHandlers() in updSelect2().

Oh, yes, you're right, but you mean nextProps instead of prevProps ?We should detach the previous events.

I meant prevProps. Say for the first render you passed <Select2 onChange={change1} onSelect={select1} /> but then then you update props so that you only pass onChange <Select2 onChange={change2} />

updSelect2(props) - if you do this.detachEventHandlers(props); where props are the nextProps from componentWillReceiveProps() it would detach change1 but not select1 as props.onSelect is undefined. So we should do this.detachEventHandlers(prevProps)

vivekmoosani avatar Nov 28 '16 08:11 vivekmoosani

Yes, I meant the same. Should be prevProps.

We should detach the previous events.

I will fix it soon. Thanks for the report.

rkit avatar Nov 28 '16 08:11 rkit

Please, try a new pre-release 1.0.4-beta2

rkit avatar Nov 30 '16 07:11 rkit

@rkit seems to work here, edit: seems to get callstack error though, investigating.. get change events in loop when I try to load the values (I use https://github.com/davidkpiano/react-redux-form )

edit2: seemed to be the regular dropdown in same form as my multiselect which went on a loop when new props triggered change event. I changed dropdown to using onSelect and multiselect to use onChange which seems to work. The const handlerChanged = e => prevProps[e[1]] !== props[e[1]]; check was always true for the dropdown when using onChange

unrelated note: onUnSelect seems to trigger react unknown prop warning

bovan avatar Jan 30 '17 08:01 bovan