Unresponsive action-button in repeating section

I have been staring at this for hours now. Can anyone see why this button trigger isn't responsive?

I have the following piece in the sheet

<fieldset class="repeating_add-drives">
    <div class="drives-list-item">
        <input type="hidden" name="attr_add-drive-key" value="" />
        <span class="drive-name" name="attr_add-drive-title"></span>
        <span class="drive-rule" name="attr_add-drive-rule"></span>
        <button class="add-drive" type="action" name="act_add-the-drive">Add</button>
    </div>
</fieldset>

And this in the worker code

on("clicked:repeating_add-drives:add-the-drive", function(ev) {
	console.log(ev);
});

I get nothing in the console.

Notably, if I do

on("clicked:add-the-drive", function(ev) {
	console.log(ev);
});

I get a response in the console, but the event information doesn't contain the "repeating section"-information I'm looking for anymore.

What if you use eventInfo instead of ev?
ie

on("clicked:add-the-drive", function(eventInfo) {
	console.log(eventInfo);
});

Vince, that shouldn't make a difference.

Action buttons can be very finicky in repeating sections especially. I'd remove all the hyphens and see what happens.

<fieldset class="repeating_adddrives">
    <div class="drives-list-item">
        <input type="hidden" name="attr_add-drive-key" value="" />
        <span class="drive-name" name="attr_add-drive-title"></span>
        <span class="drive-rule" name="attr_add-drive-rule"></span>
        <button class="add-drive" type="action" name="act_addthedrive">Add</button>
    </div>
</fieldset>

on("clicked:repeating_adddrives:addthedrive", function(ev) {
	console.log(ev);
});

I'm not saying keep it like that, but see if that works properly.

Note: its a good idea to avoid hyphens in attribute or button names - they require special handling in various places in sheet workers. I'd normally suggest replacing them with underscores, but you can't have a seocnd underscore in repeating section names.

Also do you fiddle with position in the CSS?

I did a quick test and this "worked" for me. Well, at least it posted something. lol

<h3>Add Drives</h3>
<fieldset class="repeating_add-drives">
    <div class="drives-list-item">
        <input type="hidden" name="attr_add-drive-key" value="" />
        <span class="drive-name" name="attr_add-drive-title"></span>
        <span class="drive-rule" name="attr_add-drive-rule"></span>
        <button class="add-drive" type="action" name="act_add-the-drive">Add</button>
    </div>
</fieldset>

<script type="text/worker">
    
    on("clicked:repeating_add-drives:add-the-drive", function(eventInfo) {
	    console.log(eventInfo);
    });
</script>

Weird, I tried your unmodified code, with just the first sheet worker, and I do see something in console:

Object { sourceAttribute: "repeating_add-drives_-MydzQTkJUYeWl5bNz4H_add-the-drive", sourceType: undefined, triggerName: "clicked:repeating_add-drives_-mydzqtkjuyewl5bnz4h_add-the-drive", htmlAttributes: {…} }
​htmlAttributes: Object { class: "sheet-add-drive", type: "action", name: "act_add-the-drive", … }​​
    class: "sheet-add-drive"​​
    name: "act_add-the-drive"​​
    tagName: "button"​​
    type: "action"

It seems to be working. Though as said before, I'd recommend removing those hyphens.

Sniped by Vince with same result :)

Agree that there seems to be LOTS of gotcha's with repeating sections, action buttons, tables, css, hyphens, underscores, case, etc. ;-P

vÍnce said:

Agree that there seems to be LOTS of gotcha's with repeating sections, action buttons, tables, css, hyphens, underscores, case, etc. ;-P

True, and it's made worse by the fact that the rules are different in different places (you can name attributes one way, repeating sections another, variables in workers another, attribute names on the event line in workers have to be in lower case, and maybe more I'm forgetting).

But there is a simple set of rules that work in all situations. Whenever naming anything at all, follow these rules and you'll never have a problem related to names:

• Name must be all lower case.
• You can use letters, numbers, and underscore - never use any other character.
• Always start names with a letter - don't use numbers or underscore.

So fred123_7 is fine, but 1Fred-33 is not.

There's one addition rule: when naming repeating sections, do not use underscores. In other words:

• Repeating section names start with repeating_ - follow the same rules as above, but don't use any more underscores.

Use this naming convention, and your names will be valid wherever you name things.

There might be a caveat - I have a recollection that action button names don't like underscores, so maybe avoid them there just as with repeating sections.

The problem is most likely your CSS Mikkel. Action buttons in repeating sections use the document order to determine which repeating row they belong to when they get clicked. If an element inside the .repitem containing the button, or the button itself, have a position property applied to them the button is taken out of the document order. This then dissociates the action button from the listener.

So, given your html, if you have CSS like:

.drives-list-item{
  position:relative;
}

OR

button{
  position:relative;
}

The action button won't work.

I keep hoping that Roll20 will fix this, but it's been an issue for a while.

The other thing that will cause an action button in a repeating section to not work is to include underscores in the button's name (other than the act_ part of course); so action button names should be in kebob-case.

Thank you for all the responses!

As Scott predicted, I was using CSS position in the reapeating section. Removing that fixed the problem.

I would never have guessed that this was the issue!

You aren't alone in that. When I first found this I spent like 3 weeks trying to figure out what the heck was going on. And, even now that I know it, I tend to forget it when I start a new project and spend an hour or two wondering what I screwed up in my JS to handle the click events.

Yeah that one caught me out, too. Luckily, I found an old post of Scott's that identified the issue. When I thanked him for saving me hours of frustration, he said "what post?" :)

Also....

Scott C. said:

Action buttons in repeating sections use the document order to determine which repeating row they belong to when they get clicked. If an element inside the .repitem containing the button, or the button itself, have a position property applied to them the button is taken out of the document order.

What do you mean here, Scott? CSS can't modify the DOM tree, nor does changing 'position' affect querySelector. Which document order do you mean?

Agreed that it shouldn't, but that's the way that it was explained to me by one of the devs. Not sure if they meamt the page flow instead of the order, but regardless it causes the issue.

Remember that a repeating section isnt created in an author's code - roll20 does that in the backend, converting our code into what is a repeating section on the published character sheet. That has to alter the DOM, and hwoever it's done, action buttons "position" within that DOM can be altered.

Remember also that action buttons were added later, after all other code, so there must have been something about the way they were coded to work in repeating sections is just not quite right. It's not the only place that action buttons don't work quite right in repeating sections.