Page freezes when entering due date in saved filter #1982

New Issue

dxman · 2022-09-19T19:54:48Z

dxman commented

2022-09-19 19:54:48 +00:00

Version information:

Frontend Version: 0.19.1
API Version: 0.19.2
Browser and OS Version: Mozilla Firefox v104.0.2 (64-bit), Windows 10 Pro
(both frontend and API running in Docker on Synology DiskStation on local network)

Steps to reproduce:

Open Vikunja in Mozilla Firefox desktop browser
Go to Namespaces & Lists > New Saved Filter
Under Due/Start/End Date, click Select A Date Range
Attempt to enter a value in either of the From or 'To` textboxes.
Page freezes

...

Expected behavior:

Create a new saved filter which uses Due Dates as criteria while using the Firefox browser.

Actual behavior:

After attempting to enter any information into the From or To textboxes, the page completely stops responding. No errors appear either in the Docker logs (checked both API and frontend containers) or the browser dev tools console. Tried these same steps in Google Chrome and did not encounter any problems.

Checklist:

I have provided all required information
I am using the latest release or the latest unstable build
I was able to reproduce the bug on try

**Version information:** Frontend Version: 0.19.1 API Version: 0.19.2 Browser and OS Version: Mozilla Firefox v104.0.2 (64-bit), Windows 10 Pro (both frontend and API running in Docker on Synology DiskStation on local network) **Steps to reproduce:**  1. Open Vikunja in Mozilla Firefox desktop browser 2. Go to `Namespaces & Lists` > `New Saved Filter` 3. Under `Due/Start/End Date`, click `Select A Date Range` 4. Attempt to enter a value in either of the `From` or 'To` textboxes. 5. Page freezes ... **Expected behavior:**  Create a new saved filter which uses Due Dates as criteria while using the Firefox browser. **Actual behavior:**  After attempting to enter any information into the From or To textboxes, the page completely stops responding. No errors appear either in the Docker logs (checked both API and frontend containers) or the browser dev tools console. Tried these same steps in Google Chrome and did not encounter any problems. **Checklist:** * [x] I have provided all required information * [x] I am using the latest release or the latest unstable build * [x] I was able to reproduce the bug on [try](https://try.vikunja.io)

konrad added the

kind/bug

label 2022-09-20 15:19:27 +00:00

konrad commented

2022-09-20 15:20:12 +00:00

I was not able to reproduce this on try. What value did you try to enter in the From/To inputs?

I was not able to reproduce this on [try](https://try.vikunja.io). What value did you try to enter in the `From`/`To` inputs?

dxman commented

2022-09-22 17:47:18 +00:00

Hmm, I reproduced it on try prior to my original post. Also tried again just now and was able to do so again. I am able to produce this behavior either by clicking on the textbox and pressing any key (I tried several different numbers and letters) or by clicking the calendar button and selecting a date range (the behavior happens when I click away from the calendar to confirm my choice).

To clarify what I mean by "freezing" is that I can no longer interact with the page and get the "This page is slowing down Firefox" message at the top of the window.

Hmm, I reproduced it on try prior to my original post. Also tried again just now and was able to do so again. I am able to produce this behavior either by clicking on the textbox and pressing any key (I tried several different numbers and letters) or by clicking the calendar button and selecting a date range (the behavior happens when I click away from the calendar to confirm my choice). To clarify what I mean by "freezing" is that I can no longer interact with the page and get the "This page is slowing down Firefox" message at the top of the window.

konrad commented

2022-09-23 08:25:49 +00:00

Looks like this only happens with the "Reminders" input option, not with any of the others.

konrad referenced this issue from a commit

2022-09-23 08:36:27 +00:00

fix: only pass date to flatpickr if it's a valid date

konrad closed this issue

2022-09-23 08:36:28 +00:00

konrad commented

2022-09-23 08:38:12 +00:00

I've pushed a potential fix in ede5cdd8cf - please check with the next unstable build on try if that fixed your issue.

I've pushed a potential fix in https://kolaente.dev/vikunja/frontend/commit/ede5cdd8cf5575bba96d3e7b6824a7ad7b414ea7 - please check with the next unstable build on try if that fixed your issue.

dxman commented

2022-10-01 19:00:46 +00:00

Sorry for the delay... I've tried again on try today, and I'm still seeing the issue on all of the date fields: Due Date, Start Date, End Date, and Reminder.

konrad reopened this issue

2022-10-01 22:18:37 +00:00

dpschen commented

2022-10-03 16:45:37 +00:00

I just tried this but wasn't able to reproduce this on try with latest Firefox on MacOS.

dxman commented

2022-10-03 18:33:16 +00:00

In that case, it's entirely possible that it's something on my end, though I have no idea what it could be. If anything comes to mind, I'll pass it along.

dpschen commented

2022-10-03 18:53:40 +00:00

Maybe it's related to a browser plugin.
Can you try https://try.vikunja.io/ it in an incognito tab?

Maybe it's related to a browser plugin. Can you try https://try.vikunja.io/ it in an incognito tab?

dxman commented

2022-10-04 14:21:37 +00:00

No luck, still the same in incognito. Before testing, I went into Firefox settings and made sure that all extensions had "allow in private browser" disabled.

For what it's worth, this issue has become a bit of a moot point for me personally since I've started using Vivaldi recently, and this behavior only happens in Firefox. That said, I'm still happy to assist in tracking down the cause if you still want to pursue it.

No luck, still the same in incognito. Before testing, I went into Firefox settings and made sure that all extensions had "allow in private browser" disabled. For what it's worth, this issue has become a bit of a moot point for me personally since I've started using Vivaldi recently, and this behavior only happens in Firefox. That said, I'm still happy to assist in tracking down the cause if you still want to pursue it.

dpschen commented

2022-10-04 14:44:19 +00:00

Maybe it's Firefox / Windows only issue. Will try if I can trigger it with Browserstack

konrad commented

2022-10-04 16:04:38 +00:00

Looks like I can reproduce it. Firefox 104 on NixOS.

Steps:

Open a list
Open the filter popup
Click on "choose a date range" on the reminders field
Try to enter now into the "From" field in the little popup that opens
Page freezes.

Looks like I can reproduce it. Firefox 104 on NixOS. Steps: 1. Open a list 2. Open the filter popup 3. Click on "choose a date range" on the reminders field 4. Try to enter `now` into the "From" field in the little popup that opens 5. Page freezes.

dpschen commented

2022-10-05 12:33:47 +00:00

I could reproduce it as well now. i might have an idea how to fix it. Will investigate.

konrad commented

2022-10-07 16:37:09 +00:00

I've recorded a performance profile for when it happens: https://share.firefox.dev/3Cg4iLO

From the traceroute it looks like this is related to vue-i18n.

I've recorded a performance profile for when it happens: https://share.firefox.dev/3Cg4iLO From the traceroute it looks like this is related to `vue-i18n`.

konrad commented

2022-10-07 17:16:56 +00:00

From further debugging this: Seems like the watcher for from and to are triggered in a loop. My theory is this:

The user inputs a value
emitChanged is called from the watcher
The modelValue changes
Because of a change in modelValue the from and to watcher get called again
GOTO 2

It's interesting to note this only happens when either from or to contain a Date object. I assume somewhere along the line new Date gets called with the value of from and to which creates a new Date object, different from the last one - thus calling the watchers again.

Will investigate some more.

From further debugging this: Seems like the watcher for `from` and `to` are triggered in a loop. My theory is this: 1. The user inputs a value 2. `emitChanged` is called from the watcher 3. The `modelValue` changes 4. Because of a change in `modelValue` the `from` and `to` watcher get called again 5. GOTO 2 It's interesting to note this only happens when either `from` or `to` contain a Date object. I assume somewhere along the line `new Date` gets called with the value of `from` and `to` which creates a new `Date` object, different from the last one - thus calling the watchers again. Will investigate some more.

konrad commented

2022-10-07 17:24:43 +00:00

I think I found the problem.

Consider this:

const d = new Date(rawStringDate)

What value is now saved in rawStringDate?

The same string as before?

haha you bet - IT'S A JS DATE OBJECT

(ノಠ益ಠ)ノ彡┻━┻

will push a fix...

I think I found the problem. Consider this: ```js const d = new Date(rawStringDate) ``` What value is now saved in `rawStringDate`? The same string as before? haha you bet - IT'S A JS DATE OBJECT ``` (ノಠ益ಠ)ノ彡┻━┻ ``` will push a fix...

konrad commented

2022-10-07 17:32:52 +00:00

seems like that was not it.

konrad commented

2022-10-07 17:43:42 +00:00

Patch from my last approach:

Index: src/helpers/time/parseDateOrString.ts
IDEA additional info:
Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP
<+>UTF-8
===================================================================
diff --git a/src/helpers/time/parseDateOrString.ts b/src/helpers/time/parseDateOrString.ts
--- a/src/helpers/time/parseDateOrString.ts	(revision 458df8044306642e5da813ff8341bed07f67f26a)
+++ b/src/helpers/time/parseDateOrString.ts	(date 1665164569763)
@@ -2,10 +2,21 @@
 	if (typeof rawValue === 'undefined') {
 		return fallback
 	}
-
-	const d = new Date(rawValue)
+	
 
-	return !isNaN(+d)
-		? d
+	// If we put a variable holding a string into new Date, that variable will also hold the newly 
+	// created date object. That's because in JS everything is a reference and the Date constructor
+	// does funny things with variables. The fix is rather simple: Make sure it gets an entirely 
+	// new reference to the string every time it is called. We can achieve this by "concatinating"
+	// a new string with itself.
+	// If we don't do this, this function will cause endless loops when its value is used in 
+	// components triggering changes based on changes to its input - the friggin Date coming 
+	// out of new Date has a new reference every time, hence triggering all possible watchers 
+	// every time.
+	// See https://kolaente.dev/vikunja/frontend/issues/2384
+	const d = new Date(`${rawValue}`)
+	
+	return !isNaN(+new Date(d))
+		? new Date(d)
 		: rawValue
 }

Patch from my last approach: ```patch Index: src/helpers/time/parseDateOrString.ts IDEA additional info: Subsystem: com.intellij.openapi.diff.impl.patch.CharsetEP <+>UTF-8 =================================================================== diff --git a/src/helpers/time/parseDateOrString.ts b/src/helpers/time/parseDateOrString.ts --- a/src/helpers/time/parseDateOrString.ts (revision 458df8044306642e5da813ff8341bed07f67f26a) +++ b/src/helpers/time/parseDateOrString.ts (date 1665164569763) @@ -2,10 +2,21 @@ if (typeof rawValue === 'undefined') { return fallback } - - const d = new Date(rawValue) + - return !isNaN(+d) - ? d + // If we put a variable holding a string into new Date, that variable will also hold the newly + // created date object. That's because in JS everything is a reference and the Date constructor + // does funny things with variables. The fix is rather simple: Make sure it gets an entirely + // new reference to the string every time it is called. We can achieve this by "concatinating" + // a new string with itself. + // If we don't do this, this function will cause endless loops when its value is used in + // components triggering changes based on changes to its input - the friggin Date coming + // out of new Date has a new reference every time, hence triggering all possible watchers + // every time. + // See https://kolaente.dev/vikunja/frontend/issues/2384 + const d = new Date(`${rawValue}`) + + return !isNaN(+new Date(d)) + ? new Date(d) : rawValue } ```

konrad referenced this issue from a commit

2022-10-07 17:50:30 +00:00

fix(filters): page freezing when entering a date as a result of an endless loop

konrad closed this issue

2022-10-07 17:50:30 +00:00

konrad commented

2022-10-07 17:50:47 +00:00

Fix is up: 6d587fad6e

Please check with the next unstable build if really fixed.

Fix is up: https://kolaente.dev/vikunja/frontend/commit/6d587fad6e31fccee4a088d242b4f982a0462e4c Please check with the next unstable build if really fixed.

dead10ck commented

2023-04-01 17:06:02 +00:00

This is still a problem for me on 0.20.5. I basically can't use the date filters at all.

konrad commented

2023-04-01 17:49:18 +00:00

@dead10ck Can you open a new issue with clear steps to reproduce?

dead10ck commented

2023-04-01 18:06:44 +00:00

@konrad you wrote a good reproduction here. It seems like exactly the same issue.

@konrad you wrote a good reproduction [here](https://kolaente.dev/vikunja/frontend/issues/2384#issuecomment-37055). It seems like exactly the same issue.

konrad commented

2023-04-01 18:14:28 +00:00

I'm not able to reproduce it with that. Please open a new issue with more details about your environment, version, etc. This one is already closed.

konrad locked as Resolved and limited conversation to collaborators 2023-04-01 18:14:36 +00:00

Sign in to join this conversation.