fix: ´IComboboxDropdown´ add mousedown to li element (refs SFKUI-8129) by Stefan-ferm · Pull Request #1643 · Forsakringskassan/designsystem

Stefan-ferm · 2026-09-04T10:23:19Z

Innan fix:
man börjar skriva ett värde och väljer sedan önskat val från listan, det som händer då är att change triggas först och uppdaterar modellen med det påbörjade värdet. Om konsument gör ett anrop till backend från change så blir det fel. I nästa steg triggas select från klick och uppdatera modellen med det önskade värdet.

github-actions · 2026-09-04T10:33:35Z

Förhandsgranskning 🐛 🔍

Dokumentation och exampel applikationer finns att förhandsgranska på:

Sida	URL
Dokumentation	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1643/
Vue Sandbox	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1643/vue-sandbox
Applikationsmall	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1643/examples/page-layout

Exempel för testning:

Sida	URL
Tabell	https://Forsakringskassan.github.io/designsystem/pr-preview/pr-1643/examples/table

Senast uppdaterad 2026-09-09 11:06 UTC i gh-pages.

github-actions · 2026-09-04T10:33:38Z

Artifact sizes

Artifact sizes in this build (unchanged artifacts collapsed below).

Artifact	Files	Size	Change
@fkui/vue (esm)	1 file(s)	1.2MiB → 1.2MiB (+525B)	+0.04%
@fkui/vue (FBadge bundle)	1 file(s)	341.8KiB → 342.4KiB (+591B)	+0.17%

6 unchanged artifacts

Artifact	Files	Size
@fkui/date (esm)	1 file(s)	31.8KiB
@fkui/design	2 file(s)	199.2KiB
@fkui/logic (esm)	1 file(s)	161.5KiB
@fkui/vue/cypress	1 file(s)	83.6KiB
@fkui/vue/selectors	1 file(s)	21.7KiB
@fkui/vue-labs (esm)	1 file(s)	147.4KiB

github-actions · 2026-09-04T10:35:59Z

CHANGELOG

Based on commits in this Pull Request this will create a patch release and the following entries will be added to the changelog:

Bug Fixes

´IComboboxDropdown´ add mousedown to li element (refs SFKUI-8129) c2d9e9f

If this is not correct you can amend the commit message(s).

Read more about the release process (swedish).

ext · 2026-09-04T10:44:11Z

+        },
+        onPreDropdownSelect(value: string): void {
+            this.clickedOnDropdown = true;
+            this.$emit("change", value);


Behöver man emitta eventet här också? Kommer det inte dubbelt då?

Ja eftersom vi inte emittar change om clickOnDropdown är true, modellen kommer uppdateras men change kommer inte att emittas. Så det blir inte dubbelt

ext · 2026-09-04T10:46:00Z

+            cy.wrap(wrapper.vm).its("valtLand").should("equal", "Sverige");
+            cy.wrap(wrapper.vm)
+                .its("changeEvent")
+                .should("deep.equal", ["Sverige", "Sverige"]);


Relaterat till min tidigare kommentar, här borde det väl bara dyka upp en gång?

Jag tänkte skriva en kommentar just för den specen, det är cypress som triggar change en extra gång. Så blir det inte i browsern. Diskuterat med Mats om just det här testet vi kan ta upp det på kontoret. Cypress behandlar inte eventen på samma sätt som browsern. Om man vill att det ska bete sig på samma sätt måste man sätta upp testet och trigga event i den ordning de hade körts i browsern-

ext · 2026-09-04T10:46:09Z

+
+            cy.wrap(wrapper.vm).its("valtLand").should("equal", "Sverige");
+            cy.wrap(wrapper.vm)
+                .its("changeEvent")


Kan vi testa update:modelValue eventet ocskå?

ja inga problem, en egen behållare för det då tänker jag. Uppdaterat testet

ext · 2026-09-04T10:46:58Z

    });
 });
+
+describe("ComboBox - Fix-validering", () => {


Ligger inte de andra testerna för combobox i en annan fil? Kanske flytta dessa tester till samma fil.

ja det gör dem kanske, flyttar dem i så fall. Flyttade

dvitamin · 2026-09-07T07:11:04Z

                    class="combobox__listbox__option"
                    :class="{ 'combobox__listbox__option--highlight': isOptionActive(item) }"
                    @click.stop.prevent="onOptionClick(item)"
+                    @mousedown="onOptionSelect(item)"


Kan det hända att klicket inte fullföljs? att mouseup, click aldrig triggas. Kanske inte påverkar något.

jo kanske ska testa typ trycka ner och inte släppa och sedan dra musen åt sidan men då sabbar man lite med vilje tänker jag. Den blir vald och boxen stängs vad som är rätt vet inte jag

Spontant är det fel att något väljs då. Kikade på några andra designssystem, inget händer om man klickar och släpper utanför.

dvitamin · 2026-09-07T07:21:41Z

            // trigger v-model update when not handled by onValidity event
            const element = this.$refs.input as HTMLInputElement;
-            if (!Object.hasOwn(element.dataset, "validation")) {
+            if (!Object.hasOwn(element.dataset, "validation") && !this.clickedOnDropdown) {


Detta är fallet när validering inte används. Har vi testat när validering är igång? allowList används i felrapporten.

Stefan-ferm · 2026-09-07T07:24:05Z

+
+                cy.get("input").realClick();
+                cy.get("input").realType("sv");
+


Det här gör att det extra change eventet som triggades innan inte fullföljs längre :-)

Stefan-ferm · 2026-09-08T13:08:50Z

                    class="combobox__listbox__option"
                    :class="{ 'combobox__listbox__option--highlight': isOptionActive(item) }"
                    @click.stop.prevent="onOptionClick(item)"
+                    @mousedown.stop.prevent


vi stoppar blur och change

Stefan-ferm requested review from MCFK, MatsWilson, NicklasWei, TMFKse, atfkassan, dvitamin, emmeliv, ext, irosvall, jaken22, jameseklund, jensviklander, niklasfk and udenius as code owners September 4, 2026 10:23

ext approved these changes Sep 4, 2026

View reviewed changes

dvitamin reviewed Sep 7, 2026

View reviewed changes

Stefan-ferm force-pushed the feature/combobox-set-wrong-value branch 2 times, most recently from 9a19271 to 5168f19 Compare September 7, 2026 07:14

dvitamin reviewed Sep 7, 2026

View reviewed changes

Stefan-ferm force-pushed the feature/combobox-set-wrong-value branch from 5168f19 to 0660fd8 Compare September 7, 2026 07:21

Stefan-ferm commented Sep 7, 2026

View reviewed changes

Stefan-ferm force-pushed the feature/combobox-set-wrong-value branch 3 times, most recently from a30c189 to e59de44 Compare September 8, 2026 13:07

Stefan-ferm commented Sep 8, 2026

View reviewed changes

Stefan-ferm force-pushed the feature/combobox-set-wrong-value branch 2 times, most recently from d85c407 to e4a2ac7 Compare September 9, 2026 09:21

fix: ´IComboboxDropdown´ add mousedown to li element (refs SFKUI-8129)

c2d9e9f

Stefan-ferm force-pushed the feature/combobox-set-wrong-value branch from e4a2ac7 to c2d9e9f Compare September 9, 2026 11:01

Uh oh!

Conversation

Stefan-ferm commented Sep 4, 2026

Uh oh!

github-actions Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Förhandsgranskning 🐛 🔍

Senast uppdaterad 2026-09-09 11:06 UTC i gh-pages.

Uh oh!

github-actions Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Artifact sizes

Uh oh!

github-actions Bot commented Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

CHANGELOG

Bug Fixes

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Stefan-ferm Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Stefan-ferm Sep 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Stefan-ferm Sep 7, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

github-actions Bot commented Sep 4, 2026 •

edited

Loading

github-actions Bot commented Sep 4, 2026 •

edited

Loading

github-actions Bot commented Sep 4, 2026 •

edited

Loading

Stefan-ferm Sep 4, 2026 •

edited

Loading

Stefan-ferm Sep 4, 2026 •

edited

Loading

Stefan-ferm Sep 7, 2026 •

edited

Loading