fix(Combobox): 🐛 Click to open/close should now close when open (#2184)

fixes #2180

Author: mimarz

.changeset/config.json

@@ -7,5 +7,11 @@
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",
-  "ignore": ["@digdir/design-system-react"]
+  "ignore": [
+    "@digdir/design-system-react",
+    "storefront",
+    "theme",
+    "figma-plugin",
+    "@digdir/components"
+  ]
 }

.changeset/friendly-islands-punch.md

@@ -0,0 +1,5 @@
+---
+"@digdir/designsystemet-react": patch
+---
+
+fix(Combobox): :bug: Button for toggling open/close should now close when open

.github/workflows/release-snapshot.yml

@@ -3,6 +3,10 @@ name: Release Snapshot
 
 on:
   workflow_dispatch:
+    inputs:
+      tag:
+        description: 'NPM tag'
+        default: ''
 
 jobs:
   snapshot:
@@ -11,6 +15,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
       - uses: ./.github/actions/gh-setup
+      - name: Build
+        run: yarn build
+      - id: variables
+        run: echo "tag=${{ github.event.inputs.tag != '' && github.event.inputs.tag || github.ref_name  }}" >> $GITHUB_OUTPUT
       - name: Creating .npmrc
         run: |
           cat << EOF > "$HOME/.npmrc"
@@ -20,9 +28,9 @@ jobs:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
       - name: Create Snapshot Release
         run: |
-          yarn run version-packages --snapshot "${{ github.ref_name }}"
+          yarn run version-packages --snapshot "${{ steps.variables.outputs.tag }}"
           echo '---'
           echo 'Detected Changes:'
           git diff
           echo '---'
-          yarn run publish --tag "${{ github.ref_name }}" --no-git-tag
+          yarn run publish --tag "${{ steps.variables.outputs.tag }}" --no-git-tag

packages/react/src/components/form/Combobox/Combobox.test.tsx

@@ -322,8 +322,6 @@ describe('Combobox', () => {
     await act(async () => await user.click(combobox));
     await act(async () => await user.click(screen.getByText('Leikanger')));
 
-    await act(async () => await user.click(combobox));
-
     expect(screen.getByText('Leikanger')).toBeInTheDocument();
     expect(screen.getByText('Oslo')).toBeInTheDocument();
     expect(screen.getByText('Brønnøysund')).toBeInTheDocument();

packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx

@@ -1,10 +1,13 @@
-import { useContext } from 'react';
+import { forwardRef, useContext } from 'react';
 import { XMarkIcon } from '@navikt/aksel-icons';
 import cl from 'clsx/lite';
 
 import { ComboboxContext } from '../ComboboxContext';
 
-const ComboboxClearButton = () => {
+const ComboboxClearButton = forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>((props, ref) => {
   const context = useContext(ComboboxContext);
 
   if (!context) {
@@ -15,6 +18,8 @@ const ComboboxClearButton = () => {
 
   return (
     <button
+      {...props}
+      ref={ref}
       disabled={disabled}
       className={cl('ds-combobox__clear-button', `ds-focus`)}
       onClick={() => {
@@ -39,7 +44,7 @@ const ComboboxClearButton = () => {
       />
     </button>
   );
-};
+});
 
 ComboboxClearButton.displayName = 'ComboboxClearButton';
 

packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx

@@ -1,5 +1,5 @@
 import type { ChangeEvent } from 'react';
-import { useContext } from 'react';
+import { useContext, useRef } from 'react';
 import cl from 'clsx/lite';
 import { ChevronUpIcon, ChevronDownIcon } from '@navikt/aksel-icons';
 import { useMergeRefs } from '@floating-ui/react';
@@ -32,6 +32,7 @@ const ComboboxInput = ({
 }: ComboboxInputProps) => {
   const context = useContext(ComboboxContext);
   const idDispatch = useComboboxIdDispatch();
+  const clearButtonRef = useRef<HTMLButtonElement>(null);
 
   if (!context) {
     throw new Error('ComboboxContext is missing');
@@ -89,11 +90,12 @@ const ComboboxInput = ({
     'aria-controls': null,
     'aria-expanded': null,
     'aria-haspopup': null,
-    /* If we click the wrapper, open the list, set index to first option, and focus the input */
-    onClick() {
+    /* If we click the wrapper, toggle open, set index to first option, and focus the input */
+    onClick(event: React.MouseEvent<HTMLDivElement>) {
       if (disabled) return;
       if (readOnly) return;
-      setOpen(true);
+      if (clearButtonRef.current?.contains(event.target as Node)) return;
+      setOpen(!open);
       setActiveIndex(0);
       inputRef.current?.focus();
     },
@@ -152,7 +154,7 @@ const ComboboxInput = ({
           </Paragraph>
         </div>
         {/* Clear button if we are in multiple mode and have at least one active value */}
-        {showClearButton && <ComboboxClearButton />}
+        {showClearButton && <ComboboxClearButton ref={clearButtonRef} />}
         {/* Arrow for combobox. Click is handled by the wrapper */}
         <div className={'ds-combobox__arrow'}>
           {open ? (