Placeholder text in a multiline box doesn’t go away when you start typing

[ScribblerWriter]

I’m building a page with a multiline input. I was hoping to have a placeholder text on top of it, but unfortunately, it doesn’t seem to go away when you start typing, and instead you get both your text and the placeholder text on top of each other.

Here’s an Ellie that illustrates: https://ellie-app.com/3MRsmntHrKLa1

Just start typing in the multiline after compiling to see what I mean.

Expected behavior
The placeholder text should go away as soon as you start typing in the multiline box.

Versions

• OS: Windows 10
• Browser: Chrome
• Browser Version: Version 70.0.3538.77 (Official Build) (64-bit)
• Elm Version: 0.19
• Elm UI Version: 1.1.0

[jesse-c]

Can I throw in a related question to this: Why not just use the native HTML placeholder attribute, instead of reinventing the wheel?

@ScribblerWriter a workaround should be to use: Element.htmlAttribute (Html.Attributes.placeholder "foo")

[ScribblerWriter]

@ScribblerWriter a workaround should be to use: Element.htmlAttribute (Html.Attributes.placeholder "foo")

Thank you. I should’ve thought of that. I’m on a trip right now where I don’t have the ability to do any coding, but I’ll try it out as soon as I get home.

[jesse-c]

No worries! I'm actually using that myself at the moment and it's working fine as far as the text disappearing, but I've noticed that the placeholder text vertically seems a bit too close to the textarea border (but I haven't investigated as to why)

[scottkipfer]

This is because text never gets updated and is always an empty string.
The text input should be kept in the model and then using the onChange handler to update the model will make the placeholder go away.

https://ellie-app.com/48K9qhqJZ2Za1

[alexkorban]

#unexpected

[mdgriffith]

Whoops, referenced the wrong issue in my commit.

So, I think this issue is more how elm and the browser sync state. I'm not sure there's anything that elm-ui can do.

Also, I'm not sure there's actually a problem 🤔 If you're using elm to handle a text input, you are going to be tracking a value in your model, yeah?

I didn't go with placeholder because it has weird limitations.