Merge e8b9d03 into dd03078

navikt · Aug 15, 2023 · d5219fb · d5219fb
2 parents dd03078 + e8b9d03
commit d5219fb
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 28 deletions.
diff --git a/.changeset/shiny-moose-hide.md b/.changeset/shiny-moose-hide.md
@@ -0,0 +1,5 @@
+---
+"@navikt/ds-react": patch
+---
+
+Removed redundant calls to Combobox.onClear when toggling values
diff --git a/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx b/@navikt/core/react/src/form/combobox/FilteredOptions/FilteredOptions.tsx
@@ -8,7 +8,6 @@ import { useInputContext } from "../Input/inputContext";
 
 const FilteredOptions = () => {
   const {
-    clearInput,
     inputProps: { id },
     size,
     value,
@@ -51,7 +50,6 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(value, event);
-            clearInput(event);
           }}
           id={`${id}-combobox-new-option`}
           className={cl("navds-combobox__list-item__new-option", {
@@ -92,7 +90,6 @@ const FilteredOptions = () => {
           tabIndex={-1}
           onPointerUp={(event) => {
             toggleOption(option, event);
-            clearInput(event);
             if (!isMultiSelect) {
               toggleIsListOpen(false);
             }

diff --git a/@navikt/core/react/src/form/combobox/Input/Input.tsx b/@navikt/core/react/src/form/combobox/Input/Input.tsx
@@ -47,7 +47,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Selecting a value from the dropdown / FilteredOptions
           toggleOption(currentOption, event);
-          clearInput(event);
         } else if (shouldAutocomplete && selectedOptions.includes(value)) {
           event.preventDefault();
           // Trying to set the same value that is already set, so just clearing the input
@@ -56,7 +55,6 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
           event.preventDefault();
           // Autocompleting or adding a new value
           toggleOption(value, event);
-          clearInput(event);
         }
       },
       [

diff --git a/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx b/@navikt/core/react/src/form/combobox/SelectedOptions/selectedOptionsContext.tsx
@@ -102,16 +102,13 @@ export const SelectedOptionsProvider = ({
       } else {
         addSelectedOption(option);
       }
-      if (!isMultiSelect) {
-        clearInput(event);
-      }
+      clearInput(event);
       focusInput();
     },
     [
       addSelectedOption,
       clearInput,
       focusInput,
-      isMultiSelect,
       removeSelectedOption,
       selectedOptions,
     ]

diff --git a/@navikt/core/react/src/form/combobox/combobox.stories.tsx b/@navikt/core/react/src/form/combobox/combobox.stories.tsx
@@ -3,7 +3,7 @@ import { Meta } from "@storybook/react";
 import React, { useState, useId, useMemo } from "react";
 import { userEvent, within } from "@storybook/testing-library";
 import { Chips, UNSAFE_Combobox, TextField } from "../../index";
-import { expect } from "@storybook/jest";
+import { expect, jest } from "@storybook/jest";
 
 export default {
   title: "ds-react/Combobox",
@@ -324,6 +324,7 @@ export const CancelInputTest = {
     userEvent.keyboard("{Escape}");
     await sleep(1000);
     userEvent.keyboard("{ArrowDown}");
+    await sleep(500);
     const banana = canvas.getByText("banana");
     userEvent.click(banana);
   },
@@ -421,3 +422,42 @@ export const AddWhenAddNewDisabledTest = {
     expect(invalidSelect).not.toBeInTheDocument();
   },
 };
+
+export const TestThatCallbacksOnlyFireWhenExpected = {
+  args: {
+    onChange: jest.fn(),
+    onClear: jest.fn(),
+    onToggleSelected: jest.fn(),
+  },
+  render: (props) => {
+    return (
+      <DemoContainer dataTheme={props.darkMode}>
+        <UNSAFE_Combobox
+          options={options}
+          label="Hva er dine favorittfrukter?"
+          {...props}
+        />
+      </DemoContainer>
+    );
+  },
+  play: async ({ canvasElement, args }) => {
+    args.onToggleSelected.mockClear();
+    args.onClear.mockClear();
+    args.onChange.mockClear();
+    const canvas = within(canvasElement);
+
+    const input = canvas.getByLabelText("Hva er dine favorittfrukter?");
+    const searchWord = "tangerine";
+
+    userEvent.click(input);
+    await userEvent.type(input, searchWord, { delay: 200 });
+    await sleep(250);
+    userEvent.keyboard("{ArrowDown}");
+    await sleep(250);
+    userEvent.keyboard("{Enter}");
+    await sleep(250);
+    expect(args.onClear.mock.calls).toHaveLength(1);
+    expect(args.onToggleSelected.mock.calls).toHaveLength(1);
+    expect(args.onChange.mock.calls).toHaveLength(searchWord.length);
+  },
+};
diff --git a/yarn.lock b/yarn.lock
@@ -3342,7 +3342,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.11.1, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.11.2, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3369,8 +3369,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^4.11.1
-    "@navikt/ds-tokens": ^4.11.1
+    "@navikt/ds-css": ^4.11.2
+    "@navikt/ds-tokens": ^4.11.2
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3387,7 +3387,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 4.11.1
+    "@navikt/ds-css": 4.11.2
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3411,11 +3411,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/[email protected].1, @navikt/ds-css@^4.11.1, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/[email protected].2, @navikt/ds-css@^4.11.2, @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": ^4.11.1
+    "@navikt/ds-tokens": ^4.11.2
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3428,12 +3428,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/[email protected].1, @navikt/ds-react@^4.11.1, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/[email protected].2, @navikt/ds-react@^4.11.2, @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.24.1
-    "@navikt/aksel-icons": ^4.11.1
+    "@navikt/aksel-icons": ^4.11.2
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3469,11 +3469,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^4.11.1, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.11.2, @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": ^4.11.1
+    "@navikt/ds-tokens": ^4.11.2
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3484,7 +3484,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^4.11.1, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.11.2, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7853,11 +7853,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^4.11.1
-    "@navikt/ds-css": ^4.11.1
-    "@navikt/ds-react": ^4.11.1
-    "@navikt/ds-tailwind": ^4.11.1
-    "@navikt/ds-tokens": ^4.11.1
+    "@navikt/aksel-icons": ^4.11.2
+    "@navikt/ds-css": ^4.11.2
+    "@navikt/ds-react": ^4.11.2
+    "@navikt/ds-tailwind": ^4.11.2
+    "@navikt/ds-tokens": ^4.11.2
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -21818,8 +21818,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 4.11.1
-    "@navikt/ds-react": 4.11.1
+    "@navikt/ds-css": 4.11.2
+    "@navikt/ds-react": 4.11.2
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^3.1.0