Goal: Trying to update whether a button is hidden and/or disabled. Part of the logic is on the button component. There is additional logic in a js script that runs on page load
Steps: I was trying to use a js script to change the visibility and enable/disable a component, but I realized that maybe the code wasn't working because the component already had visibility conditions.
Is there an order of priority based on where you make changes to a component? Ex. on the component itself vs using a script? This has been confusing for me, since there are certain characteristics you can change in multiple areas. Are there any best practices we should consider using to avoid these types of conflicts?
Great question. As far as I know, there is not any types of tiered priority for the state of components. Their state is a reflection of the most recently run bit of code that would change their state.
So the page load script should set the component, and then when additional logic(as part of a component) runs it will change the state.
What was the code that was not working? Did you have an event handler on the component that is meant to change either visibility or enable/disable it?
A helpful tool for understanding a components behavior can be seen in the component's state tab. At the bottom, it has "Controlled by" and "Depends on".
In terms of best practices, it is recommended to have the component's behavior planned out in terms of logic gates, where toggles are kept to fewer event handlers if possible. Using less buttons for on click event handlers will make it more straightforward for understanding what is causing changes to be applied to a component.
Hope this helps, and let me know if you can share a screen shot of the logic you are working on, me and the community might be able to provide tips and reproduce the logic
