Has anyone else run into this warning message in the console on Firefox?

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1093664 px). Occurrences of will-change over the budget will be ignored. app

I am playing around with datatables in 1.0.0-beta.20. I only have about 100 rows of data and started to get this message after adding the multiple selection code from the example here: https://v1.quasar-framework.org/vue-components/table

After reading about the error in general, I can’t tell if this is my code, a Quasar bug/bad optimization or Firefox complaining needlessly. Has anyone run across this issue?

EDIT: Doing some testing revealed this is happening specifically when I style a span within a column’s cells using “white-space: pre;” The warning goes away if I change my scoped CSS to “white-space: normal”.

I am trying to make a simple dropdown for selecting a U.S. state for an address and I’m running into a few UI issues. Some of these just might not be solvable, but any insight would be appreciated! This should be a common use case.

I am using the 2 letter state code for the value and for the label, I am using the code and full name in brackets like: AZ (Arizona) I am storing these options in an array of objects (with value/label) and setting them with the :options property. Easy so far.

I am listing more than the 50 states for full mailing address support. Every option from here: https://www.freeformatter.com/usa-state-list-html-select.html This means my longest label is “UM (United States Minor Outlying Islands”.

Annoyance 1: When I scroll down the options they seem to be loading from somewhere. When that happens, things jump around as the scrollbar lengthens. The biggest issue is the options area widens when I get to some of the longer labels (using Firefox on desktop). This happens even if I hardcode the options and don’t load from a variable, so it seems to be a core optimization. Is there a way to force load all the options at once?

I also don’t quite understand the logic for how/why the options widen as they seem to be able to wrap. Is this a browser set logic or is there a way to control the width of the displayed options? If I put the longest option first then the width problem goes away, but it would needs to be in the first 5 or so options.

Annoyance 2: If I have a state like MA selected and I click the dropdown, it opens the options at the top, not jumping to MA. Is this related to using emit-value? Is there a way to jump to the selected option?

Annoyance 3: In a normal HTML dropdown I can type a character to jump to a state or cycle through them. For example: https://codepen.io/carlnunes/pen/yhiEo Click the dropdown then type ‘M’ to jump to Maine. Hit M again to go to the next ‘M’ state in the list. This doesn’t work on q-select. I imagine I can replicate it using a filter/autocomplete function, but that seems like overkill.

Thanks for any insight.

Very nice! “Popup-content-style” is a new one for me, glad to learn of it.

I was a little surprised that the q-select doesn’t start at the current selection, It might be kind of minor, but I can see it being an issue in some situations (especially on mobile, if it persists there). So I will add it as a suggestion. Thanks for your help, Scott.

Jim

Very nice! “Popup-content-style” is a new one for me, glad to learn of it.

I was a little surprised that the q-select doesn’t start at the current selection, It might be kind of minor, but I can see it being an issue in some situations (especially on mobile, if it persists there). So I will add it as a suggestion. Thanks for your help, Scott.

Jim

Good point, here’s a Codepen: https://codepen.io/jyagmin/pen/PrZLLw

I am trying to make a simple dropdown for selecting a U.S. state for an address and I’m running into a few UI issues. Some of these just might not be solvable, but any insight would be appreciated! This should be a common use case.

I am using the 2 letter state code for the value and for the label, I am using the code and full name in brackets like: AZ (Arizona) I am storing these options in an array of objects (with value/label) and setting them with the :options property. Easy so far.

I am listing more than the 50 states for full mailing address support. Every option from here: https://www.freeformatter.com/usa-state-list-html-select.html This means my longest label is “UM (United States Minor Outlying Islands”.

Annoyance 1: When I scroll down the options they seem to be loading from somewhere. When that happens, things jump around as the scrollbar lengthens. The biggest issue is the options area widens when I get to some of the longer labels (using Firefox on desktop). This happens even if I hardcode the options and don’t load from a variable, so it seems to be a core optimization. Is there a way to force load all the options at once?

I also don’t quite understand the logic for how/why the options widen as they seem to be able to wrap. Is this a browser set logic or is there a way to control the width of the displayed options? If I put the longest option first then the width problem goes away, but it would needs to be in the first 5 or so options.

Annoyance 2: If I have a state like MA selected and I click the dropdown, it opens the options at the top, not jumping to MA. Is this related to using emit-value? Is there a way to jump to the selected option?

Annoyance 3: In a normal HTML dropdown I can type a character to jump to a state or cycle through them. For example: https://codepen.io/carlnunes/pen/yhiEo Click the dropdown then type ‘M’ to jump to Maine. Hit M again to go to the next ‘M’ state in the list. This doesn’t work on q-select. I imagine I can replicate it using a filter/autocomplete function, but that seems like overkill.

Thanks for any insight.

Has anyone else run into this warning message in the console on Firefox?

Will-change memory consumption is too high. Budget limit is the document surface area multiplied by 3 (1093664 px). Occurrences of will-change over the budget will be ignored. app

I am playing around with datatables in 1.0.0-beta.20. I only have about 100 rows of data and started to get this message after adding the multiple selection code from the example here: https://v1.quasar-framework.org/vue-components/table

After reading about the error in general, I can’t tell if this is my code, a Quasar bug/bad optimization or Firefox complaining needlessly. Has anyone run across this issue?

EDIT: Doing some testing revealed this is happening specifically when I style a span within a column’s cells using “white-space: pre;” The warning goes away if I change my scoped CSS to “white-space: normal”.

@stefanvh Thank you so much for this! I’ve found your starter kit very helpful while learning Quasar alongside the whole Vue/Laravel stack.

I am stuck on a preFetch issue that maybe you can shed some light on. I have made minimal changes to your auth code but the preFetch doesn’t seem to being do its job. If I refresh the browser on a page requiring authorization or otherwise try to authenticate via a token, the router pushed the user to the login page before the token is validated. Tracking the issue, the router.beforeEach code from boot/auth.js seems to be firing before the preFetch block of code returns in the App.vue. I am having trouble understanding if this is a bug in your code or if I have something setup wrong - I thought the idea of preFetch was to avoid having to fuss with promises to avoid this exact issue, but there aren’t a lot of examples out there I can find or relate to how your code is structured. Was there a specific reason the router.beforeEach was parsed out into auth.js?

Thanks again for the great starter kit!