ReactiveHTML multiple callbacks not working

[xavArtley]

When multiple callbacks are in a reactiveHTML only the last one is called

MRE:

import param
import panel as pn
from panel.reactive import ReactiveHTML

raw_css = """

.svg_button {
  border: solid 1px rgba(0,0,0,0);
  transition-duration: 0.5s;
  font-weight: 1000;
  border-radius: 10px;
}

.svg_button:hover {
  border: solid 1px lightgray;
  transition-duration: 0.1s;
  cursor: pointer;
}

.svg_button:active {
  background-color: #555555;
  color: white;
  transition-duration: 0.1s;
}
"""
pn.extension(raw_css=[raw_css])

class ButtonTest(ReactiveHTML):
    
    clicks_validate = param.Integer(default=0, constant=True)
    
    clicks_return = param.Integer(default=0, constant=True)    
        
    _html = """
        <div style="display: flex; flex-direction: column-reverse; background: white; background-repeat: no-repeat; background-size: cover; background-position: center;">
            <div style="display: flex; height: 50%">
                <div class="svg_button" id="buttonhome-validate" onclick="${_button_validate_click}">
                    <img style="width:100%; height:100%" src="https://static.thenounproject.com/png/29929-200.png"></img>
                </div>
                <div class="svg_button" id="buttonhome-return" onclick="${_button_return_click}">
                    <img style="width:100%; height:100%" src="https://static.thenounproject.com/png/3804491-200.png"></img>
                </div>
            </div>
        </div>        
    """
    
    def _button_validate_click(self, event):
        print(event)
        with param.edit_constant(self):
            self.clicks_validate += 1
    
    def _button_return_click(self, event):
        with param.edit_constant(self):
            self.clicks_return += 1
            
b = ButtonTest(width=100)
pn.Row(b, b.param.clicks_validate, b.param.clicks_return)

[xavArtley]

Using dom_events is ok:

class ButtonTest(ReactiveHTML):
    
    clicks_validate = param.Integer(default=0, constant=True)
    
    clicks_return = param.Integer(default=0, constant=True)
    
    _dom_events = {'buttonhome_validate': ['click'], 'buttonhome_return': ['click']}
    
    _html = """
        <div style="display: flex; flex-direction: column-reverse; background: white; background-repeat: no-repeat; background-size: cover; background-position: center;">
            <div style="display: flex; height: 50%">
                <div class="svg_button" id="buttonhome_validate">
                    <img style="width:100%; height:100%" src="https://static.thenounproject.com/png/29929-200.png"></img>
                </div>
                <div class="svg_button" id="buttonhome_return">
                    <img style="width:100%; height:100%" src="https://static.thenounproject.com/png/3804491-200.png"></img>
                </div>
            </div>
        </div>        
    """
    
    def _buttonhome_validate_click(self, event):
        with param.edit_constant(self):
            self.clicks_validate += 1
    
    def _buttonhome_return_click(self, event):
        with param.edit_constant(self):
            self.clicks_return += 1
            
b = ButtonTest(width=100)
pn.Row(b, b.param.clicks_validate, b.param.clicks_return)

[philippjfr]

Will look into it. Have you done much with ReactiveHTML? I'm probably going to change some of the API (although the main change is probably just going to be renaming _html to _template.

[xavArtley]

I have done a small app for a 3 axes controller, but I'm just at the begining: