Does anybody who uses the Custom AI component for text input run into issues with a ping pong effect when typing? I’ve been fighting this with a couple of components I’ve made, but I can’t seem to figure out how to instruct the AI to prevent the ping pong effect. I want the text to load when the component is rendered and I want it to save as I type, but it appears to be a two way communication between the text entry and the table column as I type, so I end up with the ping pong effect. My only fix for now is to instruct the AI to introduce a Save button, which works, but I’d prefer not to go that route.
What do you mean by ping pong effect? What is happening inside the application?
It’s an old effect that used to plaque glide in the early days. Hard to explain but if you search the forum you will find several old posts from when it used to be a problem.
Here is a video that shows what happens. As I type it’s reloading from the table column so typed characters get skipped. When I delete characters, it keep reloading with characters I already deleted. It’s mainly a problem if you type fast.
2 Likes
I’ve had a similar issue before in a Vue.js project. I was working on real-time saving with an API call, and the asynchronous call would finish while the user was still typing. This caused a sort of ping-pong effect, where things kept updating continuously. The solution for me was to use lodash.debounce to delay the API call until the user stopped typing.
I’m wondering if something similar is happening with your JavaScript rendering when you update p1. Every time something updates in the JavaScript column fields, the script re-runs, which might be causing the issue. A possible fix would be to create a helper table and add a button that copies the form data into the columns used by the JavaScript fields in your main table. This way, the JavaScript would only run once after the submit button is clicked, instead of constantly re-running with every update.
Well, I’m not using a javascript column. I’m basically recreating the same functionality of a javascript column with a custom component that runs the javascript, but with the ability to pass in up to 10 parameters instead of 3.
My table only has text columns to hold the script, the parameters, and the result. There are no computed columns or any javascript columns in the table. The custom component is doing the actual work of running the script when I click the Run button. I want the parameter values to save in real time back to the table, but the Save button is only used to save the script itself back to the table.
Hope that makes sense. Very experimental at this point. I will look into the debounce thing. That’s exactly what I’m looking for. I only want it to save when I’m not actively typing, but I’m struggling with the AI prompts to get that to happen.
Even if I can’t figure it out, I’m now looking at doing a mix of native components for the input and output, along with a custom component to take the inputs, run the javascript and update the result. That might solve this problem since native components don’t have the ping-pong issue, but I have other cases where I use a custom component for text input, and I’d like to figure out how to solve it for the future.
Below is another experiment I’ve been working on. It’s a custom AI input that allows for basic text formatting, and allows me to paste resizable images into the text box. Still glitchy, but would be great if I could figure out the ping-pong. For now I also have added a Save button to get around it. If I could work with the actual code, I think I could fix it pretty quick, but trying to convince AI to do what I want is proving to be a bit of a challenge.
Could you provide the prompt you used ? I could try on my side if you want to. I will share the solution if I find it!
The prompt is messy since it’s a long conversation with the AI to make modifications. I’ll share the javascript json prompt privately.
At a basic level the following prompt creates a simple text entry box and has the same ping pong effect.
text entry to update the title