emberjs / emberjs/ember.js

[Browser Bug] BFCache application can cause UI and DOM state can become out of sync.

Open
#19,239 0 comments 1 reaction 0 assignees View on GitHub
bug
Dominant language
TypeScript
Stars
22.6k
Forks
4.2k
Avg merge
3d 12h
Merged PRs (30d)
15

Description

_This isn't an ember bug specifically, but I figured I would open this here as a curtesy since when it manifests it may at-first appear to be an ember issue._

### BFCache application can cause UI and DOM state can become out of sync.

For example, if we have form with dependent selects (the value of the primary select, changes the secondary select).
If a user updates `select#primary` to "Two", the `select#seconary` will be rendered. If at that point the user presses the "back button", followed by the "forwards button" they will end with `select#primary` having selected with "Two" but the `select#secondary` will not have been rendered.

### Illustrating the example with some templates.

```html

One
Two

{{#if selected}}

{{#each selected.options |option|}}
{{option.text}}
{{/each}}

{{/if}}
```

Which can result in the UI becoming out-of-sync with the backing data.

### Links
* [Corresponding Chrome issue](https://bugs.chromium.org/p/chromium/issues/detail?id=1143298)
* [Reproduction/tests/POC Workaround](https://github.com/stefanpenner/bfcache-form-element-fix)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.