Remember checkbox state following page navigation #764
Conversation
rw251
force-pushed
the
rw/remember-checkboxes
branch
3 times, most recently
from
8f34329 to
6fa9226
Compare
There appear to be two situations in which the back button interferes with the checkbox caching: 1. After a back button click the current state is not rendered until a page refresh 2. After a back button click, the event listener is sometimes not added resulting in any checkbox changes not persisting to sessionStorage The two failing tests added here capture both flows.
rw251
force-pushed
the
rw/remember-checkboxes
branch
from
6fa9226 to
c37fc6d
Compare
| @@ -133,8 +133,22 @@ function addCheckboxClickListener() { | |||
|
|
|||
| // On first load of the page we need to wire up the event listener | |||
| // so that we can respond to checkbox changes. | |||
| document.addEventListener("DOMContentLoaded", addCheckboxClickListener); | |||
| if (document.readyState !== "loading") { | |||
There was a problem hiding this comment.
Do we need this because of the htmx loads? So the document itself is already loaded but the checkbox listener and status have to be called again for htmx-refreshed content?
There was a problem hiding this comment.
I think it's actually just for the back button case. The event listener is put on an element far enough up the DOM so that any htmx changes within the file browser don't touch it. Once its enabled initially you therefore don't need to redo it. However, when the back button is clicked you get a whole page refresh so event listeners are disregarded - but you also don't get a DOMContentLoaded event (or at least it has already triggered before this code runs). I think this is because the page is cached by the browser in some way, but I'm not 100%.
Uses
sessionStorageto persist the current state of checkboxes. As currently implemented, it will remember checkboxes until you open airlock in a new window. It uses thebaseURIandvalueto uniquely identify each checkbox.I also took the opportunity to improve the "select all" checkbox so that: