From cc1f9b819ca4fa8a45c6113bea4889e30b6555bd Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Sat, 28 Jan 2023 06:53:31 -0700 Subject: [PATCH 1/2] Add test for datalist children updating --- .../controls/test/src/widget_string_test.ts | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/packages/controls/test/src/widget_string_test.ts b/packages/controls/test/src/widget_string_test.ts index 659bdcd214..84ebb51bca 100644 --- a/packages/controls/test/src/widget_string_test.ts +++ b/packages/controls/test/src/widget_string_test.ts @@ -89,4 +89,31 @@ describe('ComboboxView', function () { expect(el.getAttribute('value')).to.equal(input[i]); } }); + + it('updates datalist children when options are updated', function () { + this.model.set({ + value: 'ABC', + options: ['option1', 'option2', 'option3'], + ensure_option: true, + }); + const options = { model: this.model }; + const view = new widgets.ComboboxView(options); + view.render(); + expect(view.datalist!.children.length).to.equal(3); + for (let i = 0; i < view.datalist!.children.length; ++i) { + const el = view.datalist!.children[i]; + expect(el.tagName.toLowerCase()).to.equal('option'); + expect(el.getAttributeNames()).to.eqls(['value']); + expect(el.getAttribute('value')).to.equal(`option${i + 1}`); + } + + this.model.set({ options: ['option4', 'option5'] }); + expect(view.datalist!.children.length).to.equal(2); + for (let i = 0; i < view.datalist!.children.length; ++i) { + const el = view.datalist!.children[i]; + expect(el.tagName.toLowerCase()).to.equal('option'); + expect(el.getAttributeNames()).to.eqls(['value']); + expect(el.getAttribute('value')).to.equal(`option${i + 4}`); + } + }); }); From 1344dabe67adf9eb917cf9a30b0e0cf345f2ce5d Mon Sep 17 00:00:00 2001 From: Jason Grout Date: Sat, 28 Jan 2023 06:44:48 -0700 Subject: [PATCH 2/2] Replace datalist children instead of appending Fixes #3681 --- packages/controls/src/widget_string.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/controls/src/widget_string.ts b/packages/controls/src/widget_string.ts index 43e7e50e3d..4bdef6c28d 100644 --- a/packages/controls/src/widget_string.ts +++ b/packages/controls/src/widget_string.ts @@ -671,7 +671,7 @@ export class ComboboxView extends TextView { o.value = v; optionFragment.appendChild(o); } - this.datalist.appendChild(optionFragment); + this.datalist.replaceChildren(...optionFragment.children); } isValid(value: string): boolean {