@@ -207,19 +207,36 @@ export default function plotComponentFactory(Plotly) {
207207 syncEventHandlers ( ) {
208208 eventNames . forEach ( eventName => {
209209 const prop = this . props [ 'on' + eventName ] ;
210- const hasHandler = Boolean ( this . handlers [ eventName ] ) ;
210+ const handler = this . handlers [ eventName ] ;
211+ const hasHandler = Boolean ( handler ) ;
211212
212213 if ( prop && ! hasHandler ) {
213- this . handlers [ eventName ] = prop ;
214- this . el . on ( 'plotly_' + eventName . toLowerCase ( ) , this . handlers [ eventName ] ) ;
214+ this . addEventHandler ( eventName , prop ) ;
215215 } else if ( ! prop && hasHandler ) {
216216 // Needs to be removed:
217- this . el . removeListener ( 'plotly_' + eventName . toLowerCase ( ) , this . handlers [ eventName ] ) ;
218- delete this . handlers [ eventName ] ;
217+ this . removeHandler ( eventName ) ;
218+ } else if ( prop && hasHandler && prop !== handler ) {
219+ // replace the handler
220+ this . removeHandler ( eventName ) ;
221+ this . addEventHandler ( eventName , prop ) ;
219222 }
220223 } ) ;
221224 }
222225
226+ addEventHandler ( eventName , prop ) {
227+ this . handlers [ eventName ] = prop ;
228+ this . el . on ( this . getPlotlyEventName ( eventName ) , this . handlers [ eventName ] ) ;
229+ }
230+ 231+ removeEventHandler ( eventName ) {
232+ this . el . removeListener ( this . getPlotlyEventName ( eventName ) , this . handlers [ eventName ] ) ;
233+ delete this . handlers [ eventName ] ;
234+ }
235+ 236+ getPlotlyEventName ( eventName ) {
237+ return 'plotly_' + eventName . toLowerCase ( ) ;
238+ }
239+ 223240 render ( ) {
224241 return (
225242 < div
0 commit comments