diff --git a/.changeset/ninety-toys-hope.md b/.changeset/ninety-toys-hope.md new file mode 100644 index 0000000000..b698b3badc --- /dev/null +++ b/.changeset/ninety-toys-hope.md @@ -0,0 +1,5 @@ +--- +"@navikt/ds-react": patch +--- + +ToggleGroup: Selecting already selected value now avoids sending extra event diff --git a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx index a828d3a0e7..45389279b1 100644 --- a/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx +++ b/@navikt/core/react/src/toggle-group/ToggleGroup.stories.tsx @@ -65,7 +65,10 @@ export const Default = (props) => { size={props.size} variant={props.variant} value={activeValue} - onChange={setActiveValue} + onChange={(value) => { + setActiveValue(value); + console.log(value); + }} label={props.label ? "Proident minim dolor pariatur." : undefined} > {Items(props.icon, props.text && props.icon)} diff --git a/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts b/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts index be51c581a7..04fce6fa44 100644 --- a/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts +++ b/@navikt/core/react/src/toggle-group/parts/useToggleItem.ts @@ -97,7 +97,10 @@ export function useToggleItem
( ref: mergeRefs([register, ref]), isSelected, isFocused: focusedValue === value, - onClick: composeEventHandlers(onClick, () => setSelectedValue(value)), + onClick: composeEventHandlers( + onClick, + () => selectedValue !== value && setSelectedValue(value), + ), onFocus: disabled ? undefined : composeEventHandlers(_onFocus, onFocus), onKeyDown: composeEventHandlers(_onKeyDown, onKeyDown), }; diff --git a/yarn.lock b/yarn.lock index 9cde09e64b..38956af5ba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3823,7 +3823,7 @@ __metadata: languageName: node linkType: hard -"@navikt/aksel-icons@^6.10.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons": +"@navikt/aksel-icons@^6.11.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons": version: 0.0.0-use.local resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons" dependencies: @@ -3852,8 +3852,8 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint" dependencies: - "@navikt/ds-css": ^6.10.1 - "@navikt/ds-tokens": ^6.10.1 + "@navikt/ds-css": ^6.11.0 + "@navikt/ds-tokens": ^6.11.0 concurrently: 7.2.1 postcss-selector-parser: ^6.0.13 postcss-value-parser: ^4.2.0 @@ -3868,7 +3868,7 @@ __metadata: version: 0.0.0-use.local resolution: "@navikt/aksel@workspace:@navikt/aksel" dependencies: - "@navikt/ds-css": 6.10.1 + "@navikt/ds-css": 6.11.0 axios: 1.6.0 chalk: 4.1.0 clipboardy: ^2.3.0 @@ -3889,11 +3889,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-css@*, @navikt/ds-css@6.10.1, @navikt/ds-css@^6.10.1, @navikt/ds-css@workspace:@navikt/core/css": +"@navikt/ds-css@*, @navikt/ds-css@6.11.0, @navikt/ds-css@^6.11.0, @navikt/ds-css@workspace:@navikt/core/css": version: 0.0.0-use.local resolution: "@navikt/ds-css@workspace:@navikt/core/css" dependencies: - "@navikt/ds-tokens": ^6.10.1 + "@navikt/ds-tokens": ^6.11.0 cssnano: 6.0.0 fast-glob: 3.2.11 lodash: 4.17.21 @@ -3906,14 +3906,14 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-react@*, @navikt/ds-react@^6.10.1, @navikt/ds-react@workspace:@navikt/core/react": +"@navikt/ds-react@*, @navikt/ds-react@^6.11.0, @navikt/ds-react@workspace:@navikt/core/react": version: 0.0.0-use.local resolution: "@navikt/ds-react@workspace:@navikt/core/react" dependencies: "@floating-ui/react": 0.25.4 "@floating-ui/react-dom": ^2.0.9 - "@navikt/aksel-icons": ^6.10.1 - "@navikt/ds-tokens": ^6.10.1 + "@navikt/aksel-icons": ^6.11.0 + "@navikt/ds-tokens": ^6.11.0 "@testing-library/dom": 9.3.4 "@testing-library/jest-dom": ^5.16.0 "@testing-library/react": ^15.0.7 @@ -3943,11 +3943,11 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tailwind@^6.10.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": +"@navikt/ds-tailwind@^6.11.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind": version: 0.0.0-use.local resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind" dependencies: - "@navikt/ds-tokens": ^6.10.1 + "@navikt/ds-tokens": ^6.11.0 color: 4.2.3 lodash: ^4.17.21 tailwindcss: ^3.3.3 @@ -3957,7 +3957,7 @@ __metadata: languageName: unknown linkType: soft -"@navikt/ds-tokens@^6.10.1, @navikt/ds-tokens@workspace:@navikt/core/tokens": +"@navikt/ds-tokens@^6.11.0, @navikt/ds-tokens@workspace:@navikt/core/tokens": version: 0.0.0-use.local resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens" dependencies: @@ -8399,11 +8399,11 @@ __metadata: version: 0.0.0-use.local resolution: "aksel.nav.no@workspace:aksel.nav.no" dependencies: - "@navikt/aksel-icons": ^6.10.1 - "@navikt/ds-css": ^6.10.1 - "@navikt/ds-react": ^6.10.1 - "@navikt/ds-tailwind": ^6.10.1 - "@navikt/ds-tokens": ^6.10.1 + "@navikt/aksel-icons": ^6.11.0 + "@navikt/ds-css": ^6.11.0 + "@navikt/ds-react": ^6.11.0 + "@navikt/ds-tailwind": ^6.11.0 + "@navikt/ds-tokens": ^6.11.0 languageName: unknown linkType: soft