Dialog with textarea

First this is only applicable in Chrome as Firefox and Safari do not implement the dialog tag.
It is vanilla js and PHP 7.3 on a Mac running Catalina.
The dialog contains a form for user input with input and textarea tags.
I use modal dialogs to get user input and everything works fine when getting initial user input .
But when I use the dialog for editing a record, preloading the input values do not work with textarea tags.
It works fine for< input type = “text”> but not for a <texture> tag or <input type = "textarea"> tag.
In the debugger I can step through and can see that the value is set to the correct value but as soon as I dialog.openModal() the value property reverts to an empty string.
So I thought show the dialog first and then set the textarea value.
When I step through and add a value to a text input the text is shown immediately. On a textarea the value is never shown even though the value is shown in the debugger.
I tried being sneaky and having a value in the original html text and then changing the value, but after seeing the inserted value in the debugger the dialog just shows the original value.
This is being done in response to a js fetch request.
To me it looks like a scope problem.
One thing I found strange is that in the debugger the textarea tag when inspected is shown as am input element and it’s type is text.

Could you share a minimal example of this problem so we can test that?

I’ll get onto stripping out a demo

This is not valid HTML.

Do you mean textarea?

Firefox and Safari have implemented the <dialog> tag since version 59 and 6.0, respectively.
IE/Edge does not implement this tag.

Damn spellcheckers.
I thought I had corrected them all.
Nearly got the demo running.

Embarrassing, in the demo it worked, so thinking cap on.
I have all the dialog html code at the bottom of the page just before the closing body tag. And decided to instead provide it from the php file.
I had changed the dialog and form tag id’s but not the input tags.
Them normal inputs were not effected but the textarea tags were.
Thanks for the help.
Had I not had to do a demo I would still be scratching my head.

My search seems to indicate that this is only partly true. :wonky:

  1. MDN - The dialog element
  2. Can I use - The dialog element

Supported in Firefox by…

enabling “dom.dialog_element.enabled” in about:config.


1 Like

Interesting. Conflicting reports then. My mistake.

https://www.w3schools.com/tags/tag_dialog.asp says its fully supported in both.
MDN and CanIUse says not supported at all in Safari, FF requires config

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.