How to set textarea value when not added or just added to the document

bug

#1

I’m trying to set the text area value and it doesn’t appear unless it’s the text area is already visible and it has been on the document for some time:

Here is what I have so far:

function showMainDialog() {
    document.body.appendChild(dialog);
    
    dialog.showModal();

    var textarea = document.createElement("textarea");
    textarea.value = "hello world";
    dialog.appendChild(textarea); // no content displayed
    textarea.value = "hello world 2"; // still no content displayed
}

#2

Does it work when you set it up before the document.body.appendChild(dialog) and dialog.showModal() part? For me, setting the value works fine in the xd-dialog-helper (cf. https://github.com/pklaschka/xd-dialog-helper/blob/master/dialog-helper.js#L422), so this is pretty much the only thing that comes to my mind.


#3

Changing the order made no difference.


#4

Strange… Maybe, you could try it with textarea.innerHTML = 'abc', since this is how I would do it in a browser (although I’ve experienced problems with that inside XD). Besides that, I don’t have any further ideas.


#5

That seems to work :slight_smile:


#6

Interesting. For me (on WIndows), it didn’t work a few days ago, so if you’ve tested it on macOS, you might want to add some extra testing on Windows, just to make sure :wink:


#7

textarea does not support the value property.


#8

@stevekwak Strange, because when I’ve tried it, it was the only way that it worked with. I’ve also wrote about this inconsistency in the “Beta” (kind of) Slack channel, since I’ve found this strange myself.

I know that “usually” (i.e. in the Browser), it doesn’t work with value, but when developing the xd-dialog-helper, I’ve found the value property to be the only available option to set the content.

Here’s what I wrote about this a while ago (just for reference):

On that note, another thing I’ve noticed is that setting the initial value of a textarea (which in a browser, I could do with textContent or innerHTML), only works by setting the value of the textarea (I don’t think that would work in a browser – I’m not sure about that one, though). I actually had some more complex logic in my helper to check for exactly that only to then realize the only way to do it in XD is by setting the value (as for any other text field) :laughing:


#9

@pklaschka Thanks for pointing that out. What I’ve found in this current version(14) is that value property is acting as a read-only property, which is why setting the value like @Velara did does not work. So there might have been changes from the earlier versions that’s causing this behavior. I did confirm that innerHTML property does work as a setter and a getter. So I’d suggest people to use innerHTML just like in the browser. Please let me know if you see any inconsistencies.


#10

@stevekwak Tested on XD 14, value did work as setter and innerHTML didn’t, so I’m not really sure what’s going on here :wink:.

With the piece of code linked above, the creation of the text area works. If, however, I replace textarea.value = contentElement.value; with textarea.innerHTML = contentElement.value, it doesn’t work (Windows 10, XD 14). It actually took a while for me to find a way that works since I’ve tried the innerHTML style before (since I come from the field of web development, this “correct” method wasn’t foreign to me) :wink:.


#11

This seems like a bug on our end. When I test both value and innerHTML field on XD 14 / Mac, the value field only works a getter while the innerHTML field works both as a getter and a setter. I will test the same on a Windows machine tomorrow and report this to the team. In the meantime, if others can provide more test results, please do so here.


#12

Since I don’t have a version of XD 13 installed, it meight be useful if someone could check the behavior there as well (since there might still be some users on that version and therefore, backward-compatibility could really be an issue here – e.g., if value is, as I found it to be, the only way to access it on e.g., XD 13 for Windows and innerHTML the only way for macOS with XD 14). Having no behavior that’s compatible with both versions could really be problematic.


#13

I can confirm that on Windows 10, XD 14.0.42.14, value works and innerHTML doesn’t (with the code linked above) :thinking:.

If there’s no error on my part, this – of course – would mean that there is no cross-platform compatible way to achieve this in XD 14 (which, in turn, means that this would jump from the status of a question to the status of a pretty severe bug).


#14

So, I’ve not tried using textarea directly, only through React, but whatever React’s doing seems to work (at least last time I tried):

<textarea
  className={`${styles.html} margin`}
  onKeyDown={this.preventEnter}
  onChange={this.htmlChanged}
  defaultValue={html}
></textarea>

Maybe it’s doing multiple things to try and work correctly… @stevekwak (or aneyone) if you want to verify that React’s working correctly, you can use the ui-html-playground sample, since the text input there is using a textarea.


#15

@stevekwak I really don’t mean to be pressing here, but this is pretty severe (at least for me, since it’s kind of an essential feature of my xd-dialog-helper, where I’m currently on the final steps towards v1.0). Therefore, I’d like to ask if there’s already any news about this? Thank you very much in advance :+1:


#16

I have done some testing on my end and can confirm the inconsistent behavior:

on Windows 10, XD 14.0.42.14, value works and innerHTML doesn’t
on Mac, XD 14.0.42.14, innerHTML works and value doesn’t

I have recategorized this topic as a bug - @kerrishotts could we put this in our team’s backlog for bug fixes please?


#17

If possible, I’d like to request that you (at least for now) allow both versions when fixing this instead of just innerHTML for compatibility purposes (since setting the value wouldn’t work otherwise, this shouldn’t “hurt” anyone, and I’ve also used value in the xd-dialog-helper library so compatibility is really an issue for me). Thank you very much in advance :+1:


#18

If you are confirming text fields can you also confirm if setting span.textContent works the same on both Windows and Mac. In my plugin it works on Mac but on Windows it’s not showing.