How to emulate an input tag?

This may be considered a feature request but it’s more of a question really.

As discussed on Slack, I’d like to make an Editor behave like an input tag.

I think a lot of that boils down to having the content continually scroll to right, and not wrapping.

I’ve tried draft-js-single-line-plugin but the text still wraps on long lines.

I initially tried creating a decorator which didn’t quite work as I wanted, and later got a bit closer with the following CSS:

.public-DraftEditor-content {
  height: 40px;
  overflow: scroll;
  padding-bottom: 10px; /* hide the scrollbar */
}

.public-DraftStyleDefault-block > span {
  white-space: nowrap;
}

This still isn’t quite right and I don’t feel good about styling these elements, but besides that it just seems like there must be a better way.

This could be considered a duplicated of #397, but hopefully this is a more comprehensive report.

Thanks in advance.

cc @makenosound @uiii @jivebot

[OriR]

@jisaacks Not sure if that’s still relevant for you but I managed to make it scroll on paste. Here’s the fiddle for it: https://jsfiddle.net/orir/m6z0xn4r/317/

@stopachka I used your solution, but this had unexpected consequences in IE. overflow: hidden causes something called hasLayout which is specific to IE that adds resize handles and border to the element.

I know this is a stretch, but is there any other way you might think of to achieve this also in IE?

Edit: A working fiddle in IE - https://jsfiddle.net/m6z0xn4r/319/ to anyone wishing to investigate/experiment

[benatkin]

Here’s one with the scrollbar hidden. I realize it’s an old version of draft.js. https://jsfiddle.net/ufa2hyp9/