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

**URL:** <https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577>\
**Category:** UXP Plugin API\
**Tags:** bug, api-feedback\
**Created:** [January 13, 2019, 1:51pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577 "2019-01-13T13:51:27Z")\
**Posts on this page:** 18\
**Page:** 1

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 13, 2019, 1:51pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/1 "2019-01-13T13:51:27Z")

</div>

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
}
```

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 13, 2019, 1:57pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/2 "2019-01-13T13:57:38Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 13, 2019, 2:00pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/3 "2019-01-13T14:00:20Z")

</div>

Changing the order made no difference.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 13, 2019, 2:35pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/4 "2019-01-13T14:35:44Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 13, 2019, 2:48pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/5 "2019-01-13T14:48:54Z")

</div>

That seems to work 🙂

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 13, 2019, 3:31pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/6 "2019-01-13T15:31:00Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [January 14, 2019, 3:22pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/7 "2019-01-14T15:22:18Z")

</div>

`textarea` does not support the `value` property.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 14, 2019, 3:45pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/8 "2019-01-14T15:45:54Z")

</div>

@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) 😆

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [January 14, 2019, 4:22pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/9 "2019-01-14T16:22:40Z")

</div>

@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.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 14, 2019, 4:33pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/10 "2019-01-14T16:33:01Z")

</div>

@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 😉.

> [@pklaschka](#):
>
> 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](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.

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) 😉.

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [January 14, 2019, 4:38pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/11 "2019-01-14T16:38:57Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 14, 2019, 4:51pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/12 "2019-01-14T16:51:36Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 14, 2019, 5:01pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/13 "2019-01-14T17:01:17Z")

</div>

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

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).

---

<div class="post-metadata">

**Author:** ![kerrishotts](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/kerrishotts/32/8_2.png) [@kerrishotts](https://forums.creativeclouddeveloper.com/u/kerrishotts)\
**Post date:** [January 16, 2019, 2:57am UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/14 "2019-01-16T02:57:15Z")

</div>

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):

```auto
<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`.

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 16, 2019, 6:34pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/15 "2019-01-16T18:34:32Z")

</div>

@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 👍

---

<div class="post-metadata">

**Author:** ![stevekwak](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/stevekwak/32/48_2.png) [@stevekwak](https://forums.creativeclouddeveloper.com/u/stevekwak)\
**Post date:** [January 16, 2019, 8:30pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/16 "2019-01-16T20:30:17Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![pklaschka](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/pklaschka/32/3162_2.png) [@pklaschka](https://forums.creativeclouddeveloper.com/u/pklaschka)\
**Post date:** [January 17, 2019, 8:32am UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/17 "2019-01-17T08:32:28Z")

</div>

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 👍

---

<div class="post-metadata">

**Author:** ![Velara](https://sea1.discourse-cdn.com/flex015/user_avatar/forums.creativeclouddeveloper.com/velara/32/1278_2.png) [@Velara](https://forums.creativeclouddeveloper.com/u/Velara)\
**Post date:** [January 21, 2019, 4:00pm UTC](https://forums.creativeclouddeveloper.com/t/how-to-set-textarea-value-when-not-added-or-just-added-to-the-document/577/18 "2019-01-21T16:00:12Z")

</div>

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.