Forem: UI Regression: title input box clips text

[richardeschloss]

Describe the bug
Can you please look into this regression on the UI? I'm using Chrome (latest) for Windows 10 and the text box for the title is clipped.

To Reproduce

Expected behavior
No clipped text

Screenshots

Desktop (please complete the following information):

• OS, version: Windows 10
• Browser, version: Chrome 84 (latest)

Smartphone (please complete the following information):

• Device:
• OS, version:
• Browser, version:

Additional context

Suggested fix: the textarea box with class "crayons-textfield" has height set to 27px. Removing that attribute fixed the sizing for me. (perhaps using an absolute arbitrary pixels is not properly sizing the box on different platforms)

[github-actions[bot]]

Thanks for the issue! We'll take your request into consideration and follow up if we decide to tackle this issue.

To our amazing contributors: issues labeled type: bug are always up for grabs, but for feature requests, please wait until we add a ready for dev before starting to work on it.

To claim an issue to work on, please leave a comment. If you've claimed the issue and need help, please ping @forem/oss and we will follow up within 3 business days.

For full info on how to contribute, please check out our contributors guide.

[ludwiczakpawel]

Hey @richardeschloss , thanks for the report. It definitely should not look like this. Since I can't repro that bug on my local (or prod) environment, would you mind helping me out a little with this?

1. Make sure you do hard refresh - maybe there's some caching issue there.
2. If that doesn't help, can you open Developer Tools in Chrome? You should be able to do so with CTRL+ALT+I on Windows (I think...)
3. There will be a tab called "Console" - could you check if there are any errors reported?

Also, if you have an option, are you able to test that also on other browsers?

[richardeschloss]

Hmm, I can repro it like this: start with the browser maximized, then unmaximize, then maximize again. It'll be clipped

Another way to repro...even with the browser maximized, switch active tabs... start on dev.to, switch to a different tab, then back to dev.to.

Refreshing the page helps make the clipping go away.

[Zhao-Andy]

Hey @richardeschloss, I can't reproduce this on Windows 10, Chrome 85 :( What's your screen resolution? Also, do you see any errors in your browser console?

[richardeschloss]

Display resolution: 1366 x 768. No errors show in the console. On a 15" HP laptop, Windows 10, updated Chrome to 85, disabled all browser extension. The steps to repro are the same. I can check if my graphics drivers need updating.

[ludwiczakpawel]

I can't repro that either but I'll try to do it on other machines I have around.

[richardeschloss]

try reducing the browser window size... keep reducing it. I think eventually it'll show since the 27px is fixed.

[nickytonline]

Hmm, I see that we have the height hard-coded to 60px, so not sure where that 27px is coming from.

See https://github.com/forem/forem/blob/877bdba176759163f07e69b814400d4537bffa7c/app/views/articles/_v2_form.html.erb#L61

Is this what you see in the rendered markup @richardeschloss ?

Also, any idea why we have a height set to 60px in an inline style attribute @ludwiczakpawel ?

[richardeschloss]

When I change the 27 to 60, the problem goes away. Also, when I remove the height attribute entirely, the problem goes away.

[nickytonline]

I have a feeling this is a caching issue that maybe only some users are seeing. Thoughts @rhymes

[rhymes]

I can't reproduce it either, but I'm also not sure how the thing works. I see the 60px only in the HTML version:

https://github.com/forem/forem/blob/f023c6174f9706eb60249a7fe7a369817a754270/app/views/articles/_v2_form.html.erb#L60-L62

but I can't see it in the JSX component:

https://github.com/forem/forem/blob/f023c6174f9706eb60249a7fe7a369817a754270/app/javascript/article-form/components/Title.jsx#L11-L27

How does it stay there?

[ludwiczakpawel]

@rhymes the way it works:

We load the whole "Write a post" view with .html.erb and replace it with Preact component asap - it's some sort of a trickery we do to have that "blazing fast" feeling.

In Preact version we use JS to calculate the height of the Title field - that's where '60px' is coming from - it's calculated with JS. So if the value is '27px' then it means that something is off with JS. Btw. we don't do that calculation in .html.erb version of the view because there's no point.

But why the hell do we use any JS to calculate the height of the field in the first place? That's because title is actually a textarea that can wrap text to the next line. If we used classic input it wouldn't wrap the text and entire view would look weird. (cc @nickytonline that's why height is set in style attribute - it's not hardcoded though :))

but I can't see it in the JSX component

It's another component - this is where the magic is coming from: https://github.com/forem/forem/blob/f023c6174f9706eb60249a7fe7a369817a754270/app/javascript/article-form/components/Title.jsx#L3

[rhymes]

So there might be a bug in that component?

ps. could you add this great explanation of yours to https://docs.dev.to/frontend/preact/ or https://docs.dev.to/faqs/ or even as inline comment in https://github.com/forem/forem/blob/f023c6174f9706eb60249a7fe7a369817a754270/app/javascript/article-form/components/Title.jsx#L3

It's a pity to keep it "buried" in a github issue :)

[richardeschloss]

I'm less familiar with tailwind but...what does "lh-tight" in the className do? Does that set a line-height style to be tight and does that "tightness" interact with what the "preact-textarea-autosize" is trying to do?

[ludwiczakpawel]

@richardeschloss lh-tight class sets the line-height to be 1.25. It may indeed be taken into consideration while calculating height of the field but it should definitely not cause any harm to the layout, especially like you have in the screenshot...

So except some potential bug in the Textarea component I've mentioned earlier, I do have one more theory: does your machine do anything special with fonts? Have you somehow overwritten default fonts on your machine or something like that?

[richardeschloss]

For fonts, not that I can recall. I don't think I did, but I can try to remember.

[richardeschloss]

Some more information. I made sure to uninstall LibreOffice (which is the only thing I think could have changed default fonts). I have pretty lightweight system here. Browser extensions disabled for testing.

I have some more screenshots that may help.

This is the view on initial page load (everything looks fine. height set to 64 px)

But then when I click on the title text area, the height changes to 27 px:

Does this help?

[ludwiczakpawel]

I still can't repro that bug on my local env and neither of us (other team members) can. Not sure what to do here.. 🤷‍♂️

[Coteh]

I was able to reproduce this with Firefox 80 (no extensions) on macOS Mojave #10261

Edit: Also want to add that the problem persists for me even after a hard reload.

[richardeschloss]

I have a thought...what version of the preact-textarea-autosize is being used? So, the one that's published in npm appears to point to a github repo which is 4 years old. It seems like the forked version has had more maintenance:

https://github.com/Andarist/react-textarea-autosize (fork) --> at npm at 8.2.0

https://github.com/evenius/react-textarea-autosize (npm) --> at npm at 4.0.7 (it seems like forem is on this one)

[ludwiczakpawel]

I have a thought...what version of the preact-textarea-autosize is being used? So, the one that's published in npm appears to point to a github repo which is 4 years old. It seems like the forked version has had more maintenance:

cc @nickytonline maybe you could help here?

[nickytonline]

Thanks for the suggestion @richardeschloss. I'll take a peek at this.

[CrazyOptimist]

Same issue here.
Same env, same screen resolution.

[marcysutton]

I can also reproduce this in Chrome 86 on a new Mac (and very unlikely to be cached). It happens when I open and close the DevTools, and when I click on the "Add up to 4 tags" or "Write your post content here" fields to move focus from the "New post title here" field. It does seem like the hardcoded height: 27px is causing it, so the solution would be to track down whatever is causing that value to update.