fix(Combobox): Improve performance (#1771)

Co-authored-by: Michael Marszalek <[email protected]>
digdir · May 13, 2024 · 18cdd17 · 18cdd17
1 parent c76d0c8
commit 18cdd17
Show file tree

Hide file tree

Showing 26 changed files with 990 additions and 665 deletions.
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.6.1-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-26)
+
+### Bug Fixes
+
+- **Modal:** fix close button position ([#1877](https://github.com/digdir/designsystemet/issues/1877)) ([c866710](https://github.com/digdir/designsystemet/commit/c866710cc00760a8f1a4f1676e2c8a5eda235a72))
+
+## [0.6.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-24)
+
+**Note:** Version bump only for package @digdir/designsystemet-css
+
 # [0.6.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-23)
 
 ### Bug Fixes

diff --git a/packages/css/package.json b/packages/css/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.6.0",
+  "version": "0.6.1-alpha.1",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",

diff --git a/packages/css/react-css-modules.css b/packages/css/react-css-modules.css
@@ -345,7 +345,7 @@
   /**
    * Apply a focus outline on an element when it is focused with keyboard
    */
-  .fds-combobox-inFocus-249a725c {
+  .fds-combobox-inputWrapper-249a725c:has(input:focus) {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);

diff --git a/packages/react-old/CHANGELOG.md b/packages/react-old/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.53.10-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-26)
+
+**Note:** Version bump only for package @digdir/design-system-react
+
+## [0.53.10-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-24)
+
+**Note:** Version bump only for package @digdir/design-system-react
+
 ## [0.53.9](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-23)
 
 **Note:** Version bump only for package @digdir/design-system-react

diff --git a/packages/react-old/package.json b/packages/react-old/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/design-system-react",
-  "version": "0.53.9",
+  "version": "0.53.10-alpha.1",
   "description": "Legacy React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",

diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.59.1-alpha.1](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-26)
+
+### Bug Fixes
+
+- **Modal:** fix close button position ([#1877](https://github.com/digdir/designsystemet/issues/1877)) ([c866710](https://github.com/digdir/designsystemet/commit/c866710cc00760a8f1a4f1676e2c8a5eda235a72))
+
+## [0.59.1-alpha.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-24)
+
+### Bug Fixes
+
+- **Combobox:** Re-renders ([24fa39f](https://github.com/digdir/designsystemet/commit/24fa39f5124c9fc0b01590ad3f1e7960c54e5f35))
+
 # [0.59.0](https://github.com/digdir/designsystemet/compare/@digdir/[email protected]...@digdir/[email protected]) (2024-04-23)
 
 ### Bug Fixes

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-react",
-  "version": "0.59.0",
+  "version": "0.59.1-alpha.1",
   "description": "React components for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@floating-ui/react": "0.26.4",
+    "@floating-ui/react": "0.26.12",
     "@navikt/aksel-icons": "^5.12.2",
     "@radix-ui/react-slot": "^1.0.2",
     "@tanstack/react-virtual": "^3.2.0"

diff --git a/packages/react/src/components/form/Combobox/Combobox.module.css b/packages/react/src/components/form/Combobox/Combobox.module.css
@@ -188,7 +188,7 @@
   /**
    * Apply a focus outline on an element when it is focused with keyboard
    */
-  .inFocus {
+  .inputWrapper:has(input:focus) {
     --fds-focus-border-width: 3px;
 
     outline: var(--fds-focus-border-width) solid var(--fds-semantic-border-focus-outline);

diff --git a/packages/react/src/components/form/Combobox/Combobox.stories.tsx b/packages/react/src/components/form/Combobox/Combobox.stories.tsx
@@ -597,3 +597,79 @@ CustomNewValue.args = {
   size: 'medium',
   label: 'Hvor går reisen?',
 };
+
+const items = Array.from({ length: 2000 }, (_, index) => ({
+  name: `Option ${index}`,
+  value: `option-${index}`,
+}));
+
+export const ThousandsOfOptions: StoryFn<typeof Combobox> = (args) => {
+  return (
+    <Combobox {...args}>
+      <Combobox.Empty>Fant ingen treff</Combobox.Empty>
+      {items.map((item, index) => (
+        <Combobox.Option
+          key={index}
+          value={item.value}
+        >
+          {item.name}
+        </Combobox.Option>
+      ))}
+    </Combobox>
+  );
+};
+
+ThousandsOfOptions.args = {
+  virtual: true,
+};
+
+export const RemoveAllOptions: StoryFn<typeof Combobox> = (args) => {
+  const [selectedValues, setSelectedValues] = React.useState<string[]>([
+    'test1',
+    'test2',
+  ]);
+  const [values, setValues] = React.useState<string[]>(['test1', 'test2']);
+
+  const handleComboboxChange = (values: string[]) => {
+    setSelectedValues(values);
+  };
+
+  const changeAllValues = (deleteValues: boolean) =>
+    setValues(deleteValues ? [] : ['test1', 'test2']);
+
+  const changeSomeValues = (removeTest2: boolean) =>
+    setValues(removeTest2 ? ['test1'] : ['test1', 'test2']);
+
+  const currentSelectedValues = selectedValues.filter((id) =>
+    values.includes(id),
+  );
+
+  return (
+    <>
+      <Combobox
+        {...args}
+        multiple
+        value={currentSelectedValues}
+        onValueChange={handleComboboxChange}
+      >
+        {values.map((attachment) => {
+          return (
+            <Combobox.Option
+              key={attachment}
+              value={attachment}
+              description={attachment}
+              displayValue={attachment}
+            />
+          );
+        })}
+      </Combobox>
+      <Switch onChange={(event) => changeAllValues(event.target.checked)}>
+        Remove Values (Selected values remain unchanged as the combobox does not
+        update when options are empty.)
+      </Switch>
+      <Switch onChange={(event) => changeSomeValues(event.target.checked)}>
+        Remove test2 (this works)
+      </Switch>
+    </>
+  );
+};
diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx
@@ -99,6 +99,22 @@ describe('Combobox', () => {
     expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
   });
 
+  it('should select when we click Enter', async () => {
+    const onValueChange = vi.fn();
+    const { user } = await render({ onValueChange });
+    const combobox = screen.getByRole('combobox');
+    expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
+
+    await userEvent.click(combobox);
+    expect(screen.getByText('Leikanger')).toBeInTheDocument();
+
+    await user.type(combobox, '{Enter}');
+
+    await wait(500);
+
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger']);
+  });
+
   it('should set call `onValueChange` on the Combobox when we click and option', async () => {
     const onValueChange = vi.fn();
     await render({ onValueChange });
@@ -165,8 +181,12 @@ describe('Combobox', () => {
     await wait(100);
     await userEvent.click(screen.getByText('Leikanger'));
     await wait(500);
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger']);
+    await wait(500);
     await userEvent.click(screen.getByText('Oslo'));
     await wait(500);
+    expect(onValueChange).toHaveBeenCalledWith(['leikanger', 'oslo']);
+    await wait(500);
     await user.click(document.body);
     await wait(500);
     expect(screen.getByText('Leikanger')).toBeInTheDocument();
@@ -181,12 +201,13 @@ describe('Combobox', () => {
       throw new Error('Could not find clear button');
     }
     await userEvent.click(clearButton);
+    await userEvent.click(document.body);
 
-    setTimeout(() => {
-      expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
-      expect(screen.queryByText('Oslo')).not.toBeInTheDocument();
-      expect(onValueChange).toHaveBeenCalledWith([]);
-    }, 1000);
+    await wait(500);
+
+    expect(screen.queryByText('Leikanger')).not.toBeInTheDocument();
+    expect(screen.queryByText('Oslo')).not.toBeInTheDocument();
+    expect(onValueChange).toHaveBeenCalledWith([]);
   });
 
   it('should show "Fant ingen treff", when input does not match any values', async () => {