Comment Thread component not populating value on submit on macOS Safari

đź’¬ App Building
1
  1. My goal: Save comments into a database when submitted according to the documentation (Getting started with Comment Thread | Retool Docs)
  2. Issue: “commentThread1.value“ is empty in Safari (same app works in Chrome perfectly)
  3. Steps I've taken to troubleshoot: created a totally new app, copy pasted code from the docs, tried different browsers.
  4. Additional info: Cloud, macOS Safari 26.1
4

Thanks for the thorough troubleshooting, since it works in Chrome but not Safari 26.1, this looks like a browser-specific bug on our side rather than anything in your setup.

Can you try binding a Text component to {{ commentThread1.value }} and type in Safari without submitting. Does it update live, or stay empty? It's also worth trying a hard refresh on Safari, or trying a private window.

If you use a Text Input plus a button that triggers your insert query with textInput1.value, then calls commentThread1.setValue() and sendMessage(), that should be an alternative setup.

Cheers,
Jordan

5

Hi Jordan,

thank you for looking into this! Binding a text component indeed updates live. But when I press submit and the event handler runs text1.value is already empty (in Safari, works in Chrome).
I’ll try to capture the last non-empty value of the text field and save that somehow.

Otherwise, yes, I might need to rebuild the component myself.

6

Hi,

It seems Safari must be clearing the input before the event handler runs, Chrome happens to read it a fraction earlier.

Yep so that makes sense with reading and saving the most recent value/comment. Did you go for this and did it work how you want it?

The one thing to note with this is the comments array there’s a delay in updating, so reading it instantly can grab the previous comment. To handle that, open the Submit event handler, expand Advanced, and set a small Debounce (around 300ms) — that gives the array time to update before your insert query runs.

Kind regards,
Jordan

7

Debounce on the submit handler did not delay the first query. I went with a hacky but not great temporary solution by adding a database query:
select {{ comment1.value || '' }} as comment
and set comment1.value as a watched input with 750ms delay between runs and the submit handler reads this instead of comment1.value directly. Unfortunately if someone types fast and presses send it can miss the last few characters so it’s not a good solution. I think I’ll have to replace it with a custom input. But then I need to hide the current input, which does not seem possible, only disabling it. So I should build my own component. But then how do I get all the comments that were made so far?

The disappointing part that this was the recommended way in the docs.

8

Sorry about that. I will raise a bug report for this issue. Please continue to use Chrome.