Bug: string with newlines causing weird extra spacing in select component

💬 App Building
, ,
1
  1. My goal: I'm trying to make it such that the spacing of the selected drop down menu remains the same.
  2. Issue: However, when I click on a prompt that has newline characters in it, it causes the select box's text to glitch out and add a lot of extra newlines.
  3. Steps I've taken to troubleshoot: So far, I've checked that the other prompts that don't have newlines work fine -- and indeed, they do.
  4. Additional info: (Cloud or Self-hosted, Screenshots)
    Please see this Zoom Clip I recorded demonstrating the bug: Clips

I've also exported the app as JSON if that helps!
Request an Application Essay Review.json (340.8 KB)

3

Hi @Jeffrey_Yu, I was able to reproduce this bug on my end. It looks like the extra spacing in the box is relative to the amount of new lines in the prompts.

I've submitted a bug report but for a now a workaround could be to use javascript to remove the newlines from your mapped data, for example this worked for me: item.prompt.replace(/(\r\n|\n|\r)/gm, "")

1 Like