fix: formdata is not updating when options populated dynamically

[caulfield]

Hi, thank you for your package, we use it in our work routine 👍

I found a bug when tried to lazy-load data to my control. We use automated way of submitting our forms and selected values were ignored. I reproduce an issue without lazy-load, even only using data option from javascript.

This is a draft pr with tests only (failed ofc). I continue my work on it tomorrow. Are you okay with that code? Maybe you have some suggestions where I can find the reason..

Thanks in advance

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[github-actions]

Playwright E2E Test Results

85 tests   80 ✅  2m 47s ⏱️
73 suites   0 💤
 1 files     5 ❌

For more details on these failures, see this check.

Results for commit 85027e2.

♻️ This comment has been updated with latest results.

[ghiscoding]

So you're having problem with the form data when using lazy loading? The code looks fine except that you're not actually lazy loading anything in that demo. Did you see the new Lazy Loading - Example that I added recently? I never use form data myself (I typically use .getSelects() function) and I never thought of adding tests for that. It might be helpful to add a print screen or animated gif? How did you add them dynamically? Perhaps you can try this piece of code that I suggested in this comment which might help

[caulfield]

Oh, sorry for bad explanation. I've found the issue I when tried to lazy-load data, but later found a simple scenario that represents it. This scenario is in my test example. By 'dynamically' I mean just passing data array in options during initialization.

In my thoughts, there is solution that will fix my scenario, lazy-loaded options update and, possibly, refreshOptions({ data: newData} ). But I'm afraid of some architectural tricks in lib that prevent it. I'm in progress with codebase investigations 🙃

Of course it's not a problem to check inputs right before auto-submission, detect multiple-select-vanilla'd inputs and use custom js for them. But I think it would be better to keep consistency with web platform and native browser js features.

[caulfield]

hi, @ghiscoding
it looks I finished with part related to forms. what do you think about creating a new section on demo site with forms behaviour?
btw, checking failed tests now, the list looks interesting..

[ghiscoding]

I don't think this is correct, why are you doing this? It's probably causing some of the test failures.

[caulfield]

as I understand, when I try to get value from option tag it's always a string

[ghiscoding]

yes you're right, but I wonder what are the test failures? I didn't try it locally so it's hard to know, but if you roll back this change, does that remove any of the test failures?

[caulfield]

yes, it was all green before I started.I expect some of them might be fixed in spec files, but have to check carefully

[ghiscoding]

I don't understand why you're adding a new function when there should already be code to do this, for example this code to add all rows

multiple-select-vanilla/packages/multiple-select-vanilla/src/MultipleSelectInstance.ts

Lines 580 to 583 in 85027e2

	if (this.ulElm) {
	emptyElement(this.ulElm);
	rows.forEach(itemRow => this.ulElm!.appendChild(convertItemRowToHtml(itemRow)));
	}

So why are you adding a new function? We should be able to reuse the code that already exists and creating a list from an HTML Select is nothing new, the first few examples are using that technique. So I don't understand why you're adding a new function and I would rather use and modify what already exists in the library, that is mainly to avoid making the library larger.

[caulfield]

I've added new function because I didn't see these. Thanks for sharing, I will update my changes.

[ghiscoding]

I've added new function because I didn't see these. Thanks for sharing, I will update my changes.

Yeah I even don't remember all of the code myself haha, just let me know if you need more assistance in trying to understand some part. The main reason for this function convertItemRowToHtml() that I created, was because of Virtual Scroll, I need a way to (re)create HTML elements when using virtual scroll that had good performance and that was the best I could come up with for using some kind of cache (the cache is using the row objects that is later converted to an HTML element)

[ghiscoding]

@caulfield did you need further help on this PR? I still don't fully understand the problem and the example that you modified doesn't seem to use any lazy loading which is why I don't quite understand the problem

[caulfield]

Hi. Yes. Sorry, there was a lot of other work to do. I will provide more examples to explain the issue