Error in the console of Firefox when using handler of popup-hide event of QSelect

[me21]

Description

I get the following error in the console of Firefox when I use a handler for popup-hide event of QSelect control:

Error: Permission denied to access property "toJSON"
    stringifyEventArgs http://127.0.0.1:8080/:92
    stringifyEventArgs http://127.0.0.1:8080/:79
    handler http://127.0.0.1:8080/:165
    VueJS 5
    at http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Ne http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 3
    h http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    f http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    onClickOutside http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Tn http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Bn http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    setup http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 38
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    promise callback*Yt VueJS
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    filterFn http://127.0.0.1:8080/_nicegui/1.4.12/components/b0b17893a51343979e2090deee730538/select.js line 29 > srcScript:23
    VueJS 3
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Xe http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    onClick http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 33
vue.global.prod.js:1:15127
    VueJS 6
    at http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Ne http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 3
    h http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    f http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    onClickOutside http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Tn http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    (Asynchronous: EventListener.handleEvent)
    Bn http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    setup http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 38
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    (Asynchronous: promise callback)
    Yt VueJS
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    filterFn http://127.0.0.1:8080/_nicegui/1.4.12/components/b0b17893a51343979e2090deee730538/select.js line 29 > srcScript:23
    VueJS 3
    Ie http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    Xe http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    onClick http://127.0.0.1:8080/_nicegui/1.4.12/static/quasar.umd.prod.js:6
    VueJS 33

Code to reproduce:

surname_select = ui.select({1: 'Alice', 2: 'Bob'}, label='Users').on('popup-hide', lambda: None)
next_input = ui.input('Name')

Open the dropdown list, then click on the next input control to close it.

In Microsoft Edge, no such error happens.
If I click somewhere else (not on a control), no such error happens either.
Probably related: https://stackoverflow.com/questions/38174551/javascript-error-in-firefox-only-permission-denied-to-access-property-tojson. Maybe there's a circular reference somewhere.

[falkoschindler]

Thanks for reporting this issue, @me21! I can confirm this bug for Firefox.

When logging the args in stringifyEventArgs, I noticed a "Restricted" attribute:

nicegui/nicegui/templates/index.html

Lines 76 to 94 in ea18324

	function stringifyEventArgs(args, event_args) {
	const result = [];
	args.forEach((arg, i) => {
	if (event_args !== null && i >= event_args.length) return;
	let filtered = {};
	if (typeof arg !== 'object' || arg === null || Array.isArray(arg)) {
	filtered = arg;
	}
	else {
	for (let k in arg) {
	if (event_args === null || event_args[i] === null || event_args[i].includes(k)) {
	filtered[k] = arg[k];
	}
	}
	}
	result.push(JSON.stringify(filtered, (k, v) => v instanceof Node || v instanceof Window ? undefined : v));
	});
	return result;
	}

But I'm not sure what it means and how to detect and ignore it.

[me21]

It appears that originalTarget is a property supported by Firefox only, so I decided to filter it out and it seems no error is thrown now.

I've created a pull request, please review.