Drop list selections using component libraries and conditional button state


I’ll explain what I’m trying to do and what the problem is I’m running into, then I will mention where bugs seem to exist. Hopefully this won’t be too long or seem full of anger but I’m SO FRUSTRATED by this tool not doing the simplest variable handling and interaction logic. It’s a list. With one button that needs to react to a variable count… like…

Use Case:
User wants to modify selected items in a list and then SAVE when finished modifying their selection. The SAVE button must only be available when there is a change to the original state of the list selections. SAVE being in a disabled state lets the user know that no changes have been made.

I am using a component library (Material 3 Kit) separate from the design file for the checkboxes, list items, and buttons. Because of this, these components are already setup with interactions to control states such as hover, pressed, disabled, and switching between selected and deselected, etc.

I have configured the interactions with variables and conditional logic so that when the user selects or deselects any given list item, there is a count that is incremented up or down and then using a conditional statement, the system checks to see if the currently selected count matches the starting count, and if not, the SAVE button will be enabled. If the values do match, the SAVE button will be disabled.

Since there are different variants (states) to the checkboxes, I cannot simply put these statements/logic on the base state of each checkbox, and so instead it seems I need to add them to the MOUSEUP trigger on the PRESSED state. Fair enough.

However, with everything setup in a way that SHOULD work, none of the logic follows what I’ve configured except the FIRST click interaction.

Regardless of any logic I add to the components, the checkboxes work as intended - as in, the states work properly, and they can be selected and deselected.

However, strangely, it seems that the checkboxes need to be set to the PRESSED state in the editor to work at all (and therefore would appear pressed when first shown to a user which is obviously not desired) and only the logic for going from SELECTED : PRESSED to DESELECTED : HOVER works correctly if that is the starting condition. As in, in this example, decrementing the values works, but incrementing does not…

This is clearly a bug to me because the system knows what to do in that first interaction when the state of the checkbox is PRESSED and will continue to work properly (albeit in only one direction). But if in the editor mode I select ENABLED as the starting state for the checkboxes (which is what is desired and normal for user testing) the system just seems to totally ignore the logic, even when it obviously detected the MOUSEUP action on the PRESSED state, since the variant change is detected just fine.

What I’ve discovered as I’ve written this as well is - if the CHANGE TO function runs before any other logic, the rest is just ignored, which makes absolutely no sense to me - so I have to remember which of these functions will break the code. I should not be able to add logic after a CHANGE TO command if this is the case. Also side note - it is SO hard to read what is setup for conditionals when the second variable is just hidden from view and I have to click into it to see it. Let me resize that window please!

AN ADDITIONAL BUG should be noted as well - when I load this demo in the Presenter view, the save button text does not load and just shows as a blank background. The list time text seems to change as well after the first click.

I’m guessing there is probably a work around for this by creating a variable for each checkmark but… the reason I am doing this is to create a filtering menu that I’d like to be able to emulate for user testing… so handling like 10 variables per filter group, when there’s like 8-10 of them at least… I’m just confused why this interaction pattern has not been considered when it is SO common. Axure has selection groups that can be assigned at least. But they’re terrible at styles, components, and variable management…

Anyone’s help is deeply appreciated…

Thanks for your time in advance

@Manring_Nicholas Hi! I’m actually going to get you connected with support via the email associated with your community profile, since this is very specific, and the community may not be the best place.

You should get a follow-up email soon.

Also: I removed the design file link + password, in addition to your dev mode link for privacy/security reasons.

Might we just delete this post then. If it’s not going to be resolved in the community forum I’d rather it not be here at all. Glad to have been reached out to via email. As a community user, I find it frustrating to discover that someone had the same issue, and the conversation was taken offline…

I suppose I could return to this with an answer once I’ve learned about a solution, if any. So maybe we wait until then…

I hear you – this wasn’t with the intention of taking this offline and away from visibility. This was more because ‌community mods aren’t really equipped to answer this in detail (we do try our best). There did seem to be very specific behaviors mentioned that pertained to your specific design. Also, to touch on the file removal from here: I always redact this information, because there can often be accidental content shares.

I’d be happy to go ahead and post any solution you and your support agent come to (in more general terms that will apply to the community more broadly).