Dropdown + localStorage plugin + conditional select = strange behavior about formkit HOT 3 CLOSED

@jksturgeon I think a lot of what you're bumping into is issues with v-model and it competing with the localStorage plugin for the setting of the values. While we can probably do further work to smooth out the v-model behavior here's an approach you can use to work around it and correctly hydrate the options / values without the need for a v-model.

https://formkit.link/8ce3afa87c9ad55e5ab41d3e5840177f

In this case we key the dependent input so that it will re-render when its dependency changes. We also don't render the input at all until the dependent value is set (the v-if) — so that we know we can compute the correct options. The options has been switched from a computed property to a function — and it will re-run when the input re-renders which should now be every time the food input changes.

from formkit.

Thank you! This gets me a lot closer. I removed the v-if because I do want all inputs to show even if no options are available, and modified getFlavors to return an empty array if food hasn't been selected yet, thus rendering a disabled input. That works just fine for my needs.

The reason I used v-model is it makes it super easy to populate a form with default values. I'll need to read the docs more on the other options to set defaults.

In my case, on an inital form, the very first dropdown MUST be populated, and the second dropdown must have options based on that first dropdown. The rest cascade from there and it's about 6-7 levels of dependent selects. The first select is actually a company, and it must default to the company the user belongs to, which is pulled from a pinia store and not hard coded. To make it even more complicated, I also need to be able to load an entire completed form or a partial completed form from IndexedDB and set all the dropdowns to the correct values and have them all have the correct options based on the previous selects. Basically a "save as draft" and "load from draft" feature. I'm using the local storage plugin more as an auto save in case they close the browser or whatever, separate from a deliberate save as draft.

from formkit.

So, after playing with this for a day, couple more issues. It doesn't work if getFlavors is an async function if I call it like this: :options="getFlavors(value.food)"

Instead I need to call it like this: :options="getFlavors" and get the currently selected food from within the getFlavors function.

Second, if I set any default values, regardless of the method, it fails again. Doesn't matter if it's a value prop, using node.input(), or any other method I've tried, the result is the same. It works correctly when the first select is set to the default, but if I select a different option, select a flavor, then refresh the page, the flavors selection is forgotton. I'm not sure if it's somehow related to the first issue I was having, or if I'm again using it wrong, or if it's a bug. Regardless, I think I'm going to abandon the localStorage plugin for now as that's more of a nice to have rather than a requirement. I'll revisit later when I have more time to figure it out, and open a new issue if I have anything to report. Closing this issue for now.

from formkit.