Page MenuHomePhabricator

[web] Add ID selector to search bar, to avoid weird hot reload side effects
ClosedPublic

Authored by inka on Jan 22 2023, 1:29 PM.
Tags
None
Referenced Files
Unknown Object (File)
Mon, Nov 11, 8:34 PM
Unknown Object (File)
Fri, Nov 8, 8:05 PM
Unknown Object (File)
Mon, Oct 28, 11:35 AM
Unknown Object (File)
Mon, Oct 28, 7:03 AM
Unknown Object (File)
Mon, Oct 28, 7:03 AM
Unknown Object (File)
Mon, Oct 28, 7:03 AM
Unknown Object (File)
Mon, Oct 28, 7:03 AM
Unknown Object (File)
Mon, Oct 28, 7:03 AM
Subscribers

Details

Summary

Linear issue: https://linear.app/comm/issue/ENG-2775/white-frame-inside-of-search-bar
After some changes to a different part of the code, I was seeing a white frame inside of the search bar, due to a style from styles.css (for textarea) taking precedence over this style. This was happening most likely because of hot-reload.
It was happening when I was saving files or checking out a commit. But once I reloaded the page it was back to normal. It wasn't happening on production. So I'm adding this only so that other devs are not alarmed in the future.

Test Plan

Run web app (dev mode) on a different commit. Checked out to this commit (this used to cause the frame to appear). Checked that the frame is not present.

Diff Detail

Repository
rCOMM Comm
Branch
inka/community_drawer_web
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

inka requested review of this revision.Jan 22 2023, 1:43 PM
inka planned changes to this revision.Jan 23 2023, 5:58 AM

Use ID selector instead of !important

inka retitled this revision from [web] Add flag to search bar, to avoid weird hot reload side effects to [web] Add ID selector to search bar, to avoid weird hot reload side effects.Jan 23 2023, 10:32 AM
inka edited the summary of this revision. (Show Details)
inka edited the test plan for this revision. (Show Details)
web/components/search.css
15–16 ↗(On Diff #21217)

We're putting two selectors here... do we need both? Or only one?

web/components/search.css
15–16 ↗(On Diff #21217)

It's technically not needed, but if I remove input.searchInput then this glitch happens when I checkout the branch (so it would likely also happen in other cases when files are being reloaded):

So I'd rather just leave it...

tomek added inline comments.
web/components/search.css
15–16 ↗(On Diff #21217)

It's surprising that deleting input.searchInput, causes an issue, but I don't think we should spend too much time investigating this

This revision is now accepted and ready to land.Jan 24 2023, 8:58 AM
web/components/search.css
15–16 ↗(On Diff #21217)

Agree we shouldn't spend too much time on it, this is fine

inka edited the test plan for this revision. (Show Details)

Rebase