Embed pickaxe shows blank when text added with script

Bugs / Site Issues
1

I use a script to add text to the embed pickaxes message area when an image is clicked but after clicking or pressing enter it opens the Pickaxe but shows blank.

Idea behind this is the same as icebreakers in Pickaxe.

Note - If press space or add other text by hand it works normally, but in any case I add no text or spaces I simply get blank. I even tried “clicking”, “pressing enter” and “bubble” through code but nothing worked against this bug.

Here is the script:

<script>
document.addEventListener('DOMContentLoaded', function() {
const textMappings = {
    "imageID": "Test message"
};

Object.keys(textMappings).forEach(id => {
    const element = document.getElementById(id);
    if (element) {
        element.addEventListener("click", () => {
            const textarea = document.querySelector("textarea");
            if (textarea) {
               // Tried clicking to see if this would have fixed the bug
                textarea.click();
                textarea.focus();
                textarea.value += (textarea.value ? " " : "") + textMappings[id];
                textarea.scrollTop = textarea.scrollHeight;
            }
        });
    }
});
});
</script>

Any help regarding this issue is highly appreciated.

2

Not sure why this is happening. Maybe @stephenasuncion or @nathaniel can shed some light on this.

3

Anything ideas how to solve this this yet? @admin_mike @stephenasuncion @nathaniel ?

4

This falls a bit outside the behavior we can provide support for, because it’s more or less custom.

The code you have looks like it could work, though I’d make some adjustments.

I’d change querySelector to querySelectorAll, because you might end up with multiple text areas. I’d also be very careful about the order of the script in relation to our script, this should probably come after.

Hope that helps!

5

Yes, the code is placed below your script and is set to run within DOMContentLoaded to ensure it executes only after your code has loaded.

I want to clarify that my code is functioning as expected. The issue lies with the bot. When text is added to the bot’s text field using my script, the bot doesn’t seem to recognize it as text. Instead, it treats it as “empty.”

The question remains: what is causing the bot to behave this way? Why is it unable to process the text added programmatically? This behavior doesn’t seem logical.

Looking forward to your insights.

6

Hmmm so to clarify, when it enters the text, then you press enter (or send) manually, the bot doesn’t recognize what was input?

7

Yes, when I click or press enter the bot doesn’t recognize the input. It just shows up as empty.

If I add a space or edit the text in anyway by hand it is then recognized and my message shows up and an answer is generated.

8

If you wish to test this live you can go to https://reseptirobo.fi @nathaniel. Click the images below the bot to see what happens.

9

Hey @hurmuli this is not an issue with the embed. It seems to be an issue with how you’re injecting this text.

My understanding of the issue is…
When you click an image, your script correctly injects the text into the <textarea> of the Pickaxe embed. However, when you click an image, then click on the text input area and add any text, even a single character, you can then click enter and it goes through, which suggests that the DOM is not recognizing the programmatically injected text as a valid user interaction. This is a common issue in JavaScript where direct manipulation of the value property of an input element doesn’t always fire the necessary events that the Pickaxe embed might be listening for.

Solution
I don’t have a clear solution, but perhaps try to make your script trigger the input event after injecting text into the textarea. If you talk to GPT4-o about your code and triggering the input event, it should probably work!