What's the most annoying 'small' interactive feature you've had to add to a server-rendered page?

Every server-rendered app eventually gets a ticket like this:

Small UI tweak. When the user checks "Same as billing address", hide the shipping fields. Should be quick!

The page is HTML from the server. It works. It has worked since before some of your coworkers were born. And now it needs to do one small thing in the browser.

Then you discover that "one small thing" also needs to:

• remember its state when validation fails and the server re-renders the form,
• not break the old jQuery plugin on the same page,
• still work when the user presses Back,
• be accessible,
• and somehow not need a build step, because this part of the app has never had one.

So I'm curious: what's the most annoying "small" interactive feature you've had to add to a server-rendered page?

My nominees

To get things started, here are a few I think deserve an award:

🏆 The "Same as billing address" checkbox. Hide fields, copy values, un-copy values when they uncheck it, and remember all of it after a failed submit. Small, they said.

🏆 The character counter. "142 / 280". Easy, until emoji count as two characters, the server counts differently than the browser, and someone pastes a whole novel.

🏆 Dependent dropdowns. Pick a country, then the region list changes. Pick a region, then the city list changes. Now edit an existing record and make all three load correctly in the right order.

🏆 "Select all" on a paginated table. Does "all" mean this page or every page? Nobody knows, including the person who wrote the ticket.

🏆 The live search filter. Type, the list narrows. Then: debounce it, highlight matches, show "no results", and keep the filter in the URL so people can share it.

🏆 "Are you sure you want to leave? You have unsaved changes." The one feature everyone wants until it shows up after they've just saved.

My own entry

Tell me yours

I'd love to hear:

1. What was the feature?
2. What made it harder than it looked? The state? The old code around it? The browser's Back button?
3. What did you end up using? Vanilla JS, jQuery, a small library, a framework, or "a 400-line file named utils2.js that nobody touches"?

Bonus points for the worst ticket title you've ever received.

Comments

[Abhinav Sharma]

The paginated "select all" example really needs a clear label. Would you make "select this page" and "select all matching results" separate actions, so the scope is visible before anything changes?