How to Save Work on Quora and Single Page Apps

Quora comes up more than any other site in reviews of form recovery tools. People say the same sentence in different words: it works everywhere else, it does nothing here.

That is not a Quora bug, and it is not a quirk of Quora. It is the clearest example of a general failure that affects almost every modern website.

How the old approach works

The classic way to build one of these tools is simple. When the page loads, walk the document, find every input, textarea and select that has an identifier, and attach a listener to each one.

On a traditional server-rendered page this works perfectly. The document is complete when it arrives, fields have meaningful names such as email or message, and nothing changes afterwards. The approach was correct for the web it was written for.

That web has largely gone away.

What a single page app does instead

A modern application loads once. After that, every screen change is a script rewriting parts of the page. Three consequences break the old approach.

The document is empty when the tool looks

On an application that renders after fetching data, there may be no form in the document at all when the extension runs. Nothing was missed through carelessness. The fields simply did not exist yet.

Fields arrive after load

Even when something is in the document, components mount later as you navigate. A one-time scan has already finished by then.

Identifiers change on every render

This is the one that quietly ruins everything. Component frameworks generate unique identifiers to keep list items distinct, and that pattern leaks into forms where it is entirely unnecessary. The result is an input called compose-body-7, then compose-body-8 after the next render, then compose-body-9.

Any tool that identifies a field by its identifier is now looking for something that has been thrown away. The text was saved correctly and can never be found again, which is the worst possible outcome because there is no error to notice.

Why Quora is the textbook case

The Quora answer box is a rich text surface rather than a textarea, so it is not a form field by any measure a browser or an extension normally uses. It sits inside a component that re-renders as you type. The surrounding inputs are generated with fresh identifiers.

Add a site that changes its own address as you move between screens and you have all four failure modes at once. A user concludes the extension is broken. It is doing exactly what it was built to do, on a page that no longer matches the assumptions it was built on.

What actually fixes it

Three changes, in order of importance.

1. Watch the page instead of scanning it once. A mutation observer on the document, plus one inside every shadow root encountered, means fields mounted at any point are picked up.
2. Re-check after every route change. Wrapping pushState and replaceState, and listening for the back button, covers navigation that never reloads the document.
3. Fall back from identifiers to labels. This is the decisive one. A field identified as compose-body-7 is unmatchable, but the label above it still reads "Body" on every render. Preferring the identifier and falling back to the visible label turns an unsolvable problem into a routine one.

An identifier is a convenience for machines. A label is a promise to the person using the page, and it is the promise that survives.

How to test any tool, including this one

Take a site you use and run this test:

1. Type a distinctive sentence into a field, long enough that you would notice if it came back wrong.
2. Navigate to another screen using the site's own navigation, not the address bar.
3. Navigate back.
4. Reload the page completely.
5. Look for the restore badge on the field.

Step 2 is the one that matters. A tool that only read the page once will pass step 4 and fail step 2.

If the field is a rich text editor, add a sixth step. Restore the text, then type a character and delete it. If the editor rebuilds itself from its own model, a restore that only wrote to the screen will be discarded at that moment.

If you build pages as well

Give every input an id. Associate a label with it using the for attribute. Add name attributes that describe the data rather than the layout.

All three are accessibility improvements in their own right, and all three make your forms work with every automation tool, including password managers and recovery extensions. Stable identifiers are cheap to add and impossible to retrofit.

FAQ

Related Articles