Apply element enable/disable to on_click/on_change events

[thetableman]

When an element is enabled or disabled this affects the web ui only, it's fairly easy for a user to overcome this by adjusting the html using a browsers inspect tool.

Obviously it's best practice to follow up a ui disable with some back-end validation, however, it would be useful if the enable/disable affected whether a on_click or on_change fired. This could be an additional method or parameter.

For example:

button = ui.button('Click Me', on_click=lambda: ui.notify('Clicked'))
button.disable(disable_events=True) #could default to False so as not to impact current practice
button.set_visibility(False, disable_events=False)

or

button = ui.button('Click Me', on_click=lambda: ui.notify('Clicked'), on_disable_events=True, on_visibility_events=True)
button.disable() #would disable on_click also
button.set_visibility(False) 

This would reduce code to validate after a disable in simple cases and truly 'disable' an element.

[falkoschindler]

Thanks for the proposal, @thetableman!
We are, however, not convinced that this kind of check needs to be implemented in NiceGUI. It increases code and API complexity quite a bit without any advantages for the "normal" user. If security against malicious attacks is an issue, you might want to add certain checks in the user code.
But maybe there are other opinions on this matter?

[thetableman]

@falkoschindler, it's not that I'm particularly concerned about security or malicious attacks, it's just best practice to apply additional controls to ensure a user can't execute a process or access a page by working around changes to UI elements like visibility and disable. Any user who plans to utilise NiceGUI in production with public access would be foolish to rely purely on hiding a button to prevent a form being executed or a page being accessible, they would be wise to follow up with extra logic to ensure the associated function doesn't run at all.

So I do respectfully disagree - a "normal" user would definitely find disabling a button/toggle/etc callback useful. Regardless, I appreciate your consideration of my suggestion and understand that not all ideas can be implemented.

[falkoschindler]

@thetableman You're starting to convince us! 😉

I talked to ChatGPT for a second opinion, and it absolutely confirms your point. If we find a neat place to implement this server-side validation, we might improve the overall robustness, integrity and security of NiceGUI applications.

We should probably activate the validation by default and allow the user to opt-out if needed. I could imaging to add a check somewhere central like in handle_event in events.py. If the sender is a DisableableElement it can read something like an ignore_events_when_disabled attribute. And if it derives from Visibility (every Element does), there could be an attribute ignore_events_when_invisible. This way there would be no need for additional initializer or method parameters.

[thetableman]

Thanks, @falkoschindler. I think this would be a really useful addition that cuts back doubling-up on validation code.

[falkoschindler]

Just for reference, here is an example how one can inject a click event on a disabled button:

b = ui.button('Click me', on_click=lambda: ui.label('You did it!'))
ui.switch('Enable').bind_value_to(b, 'enabled')
ui.button('Inject click', on_click=lambda: ui.run_javascript(f'getElement({b.id}).$emit("click")', respond=False))

[falkoschindler]

I just created PR #1030. What do you think, @thetableman?

[falkoschindler]

Has been released in version 1.2.21.