Support events for each component

[prakhargupta1]

Duplicates

• [X] I have searched the existing issues

Latest version

• [X] I have tested the latest version

Summary 💡

1. Button Event: onClick (already there)

2. TextInput Event: Submit, Text change Use case: After entering text I would like to trigger a query irrespective of the input. I just want it to run everytime input is submitted or changed. There should not be need to press a button.

3. Image: Event: onClick

4. Select Event: Input value change

5. Data grid. For now we have Select row event, we can add others later.

~Actions:~ ~1. Trigger query~ ~2. Control components (set value, reset value, clear value, hide component, disable component)~ ~3. Navigate (to external URL, App, Page)~ ~4. Open Dialog box (modal/alert)~ ~5. Set temporary state~ ~6. Set local storage~ ~7. Copy to clipboard~ ~8. Show notification~ ~9. Execute a JS function/script~

Examples 🌈

https://docs.retool.com/docs/event-handlers

Motivation 🔦

No response

[bytasv]

Someone correct me if I'm wrong, but it seems that:

1. We do not support any events on TextInput, Image, Select, DataGrid - so it might make sense to either have a task to add event per each component individually or do it all in one go (I'm not sure how much effort that is)
2. The only place where we support some sort of event handling is Button with onClick binding. However IMO it feels a bit weird because it looks like it is expecting an expression (though I'm not sure what happens when expression is passed). We should probably create/tweak UI so we can pass code to be executed when event is triggered? I assume it's already working like that since I can trigger console logs, refetch query, etc... but using the same interface both for expression binding and "void" execution seems a little unintuitive - sounds like this could be another task?
3. We also don't have any interface where we can pass "predefined" code snippets by choosing them from some dropdown (kinda like retool does). I would imagine that's yet another quite big task 🤔
4. I don't think that we have following things right now in Toolpad - Dialog boxes, Notifications - so implementing those might be another 2 tasks?
5. re: Control components (set value, reset value, clear value, hide component, disable component) - I'd assume that this should be controlled by setting some value with button and then using binding on other components reacting to the value changes. So technically this should be possible via "custom JS code execution"?
6. Copy to clipboard - I think we should also be able to do this with custom JS code, we might just need to add support for copying to clipboard which might be standalone small task?
7. @prakhargupta1 Set temporary state and Set local storage what exactly these 2 should do? Could you give some examples?

[Janpot]

@bytasv

1. One task for all of them if it's just updating the property configuration in createComponent. Although I'm not sure about change event. what about debouncing, is that something users expect from a low-code tool?
2. "binding" onClick opens the action editor. one can write code here that is executed when the event fires, there's also a UI that allows for configuring a navigation action to another page. We can distinguish the action UI a bit more from the binding editor, feel free to propose anything.
3. If the action can be expressed in code, then a snippets manager shouldn't be too crazy to build. The hard part is making sure actions can be expressed in the form of code.
4. dialogs is a whole new thing that's going to need some UX thinking. Not sure why it's in this ticket as we have one open for a long time already https://github.com/mui/mui-toolpad/issues/79
5. "hide component, disable component" I don't see how this would not be conflicting with the existing binding system. "set value, reset value, clear value": maybe it's possible to implement this as textField.value = 'foo', but this will require some cleverness using Proxies (as we need to be able to intercept the assignment to update the page state). Very challenging task.
6. You can already do copy to clipboard by creating a page module, but we can build some convenience UI for this, if there's a demand, or a builtin function.
7. set temporary state, I assume allowing the user to define a controlled variable, that works in exactly the same way as a controlled property on a component, having this should be an alternative to the "hide component, disable component" from 5. local storage => same as 6.

[apedroferreira]

1. For sure the events should be separate from those actions at least. Whether these events should be split per component or not probably is just an issue of how to organize things, as they shouldn't be too difficult to add.
2. What if in the code editor for this kind of events users had to write a Javascript function with arguments and function body, would that make it be clearer how it works?

Some of the proposed actions also seem unclear or complicated to me, so it looks like probably each of them should have its own issue and discussion. Maybe some of them could be provided as code snippets for events? I assume we could support things like access to the localStorage API in the code for events, if they don't support it already.

[prakhargupta1]

Based on the comments, I have done the following changes to this task:

1. Keeping this task only for events.
2. Regarding actions, through bindings we are doing most of them. We have an old issue for dialogs and notifications action can wait.

In the further discussion, let's only focus on events. I had just added basic events for now, not sure if there exists a list of events for each component in MUI Core. But we need to see if more events for some components should be added to this task.