Remember child panel states after collapsing the parent panel #483
Labels
Comments
|
We do not store any changes to the content of the panel at all. For example, the checkboxes values aren't remembered too. Perhaps a simple fix would be to capture the HTML content currently inside the panel before collapsing. Currently I believe when collapsing and re-expanding, it just reuses the initial content it has when the page is first loaded.
|
|
Seems like we're asking Vue.js to render the content each time, rather than toggling the visibility. Not sure this can be changed somewhere. |
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 21, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
As a side effect, since once the panel is loaded v-show is always used,
the v-else part of the template is not needed anymore.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
As a side effect, since once the panel is loaded v-show is always used,
the v-else part of the template is not needed anymore.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 22, 2019
Previously:
1) Panels are by default conditionally rendered,
so each time a panel is closed and reopened,
its contents are recreated.
2) Else, panels can be preloaded if explicitly wanted.
However, this adds extra rendering time.
Now:
Case 2 remains the same.
Authors can still choose to preload their panels if they wish.
For Case 1, we cache the rendered content so as to prevent re-rendering,
which
a) prevents multiple HTTP requests if using the src attribute
b) solves issues that stem from the destruction and recreation of
components:
MarkBind/markbind#868
MarkBind/markbind#483
Implementation:
Store an additional `isCached` property, which is set to true
whenever the content is fetched.
When `isCached` is true, we switch from
v-if (conditional rendering)
to
v-show (conditional display)
More info: https://vuejs.org/v2/guide/conditional.html#v-show
As a side effect, since once the panel is loaded v-show is always used,
the v-else part of the template is not needed anymore.
Future work:
Investigate the use of keep-alive:
https://vuejs.org/v2/guide/components-dynamic-async.html
Tried to surround the content with <keep-alive></keep-alive>
but did not seem to be cached.
openorclose
added a commit
to openorclose/vue-strap
that referenced
this issue
May 23, 2019
Panels that do not have the preload attribute have their contents destroyed and recreated on each reopen. This causes issues such as inner text inputs and inner panels not remembering their previous state, and panels with src attribute repeating the same ajax request. See MarkBind/markbind#868 MarkBind/markbind#483 Let's have an additional `isCached` property, which is set to true whenever the content is/will be loaded. Only when isCached is true will the content be rendered and. As a side effect, since once the panel is loaded v-show is always used, the v-else part of the template is not needed anymore, which also reduces code duplication.
Chng-Zhi-Xuan
pushed a commit
to MarkBind/vue-strap
that referenced
this issue
May 27, 2019
Panels that do not have the preload attribute have their contents destroyed and recreated on each reopen. This causes issues such as inner text inputs and inner panels not remembering their previous state, and panels with src attribute repeating the same ajax request. See MarkBind/markbind#868 MarkBind/markbind#483 Let's have an additional `isCached` property, which is set to true whenever the content is/will be loaded. Only when isCached is true will the content be rendered and. As a side effect, since once the panel is loaded v-show is always used, the v-else part of the template is not needed anymore, which also reduces code duplication.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Context: a collapsible panel P has collapsible child panels C. Both are collapsed by default. Expand P, expand C, collapse P, expand P.
Previous (before Bootstrap 4 migration): C is still expanded
Current: C has gone back to the default state (collapsed)
Suggested: go back to the previous behavior as it preserves the panel state previously set up by the user.
However, I'm not sure how much effort it will take. If it is too much effort, or there are some other tradeoffs involved, we can stick with the current behavior.
The text was updated successfully, but these errors were encountered: