diff --git a/.changeset/config.json b/.changeset/config.json index 09cbd54ff7..3d0ffb21d5 100644 --- a/.changeset/config.json +++ b/.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" + ] } diff --git a/.changeset/friendly-islands-punch.md b/.changeset/friendly-islands-punch.md new file mode 100644 index 0000000000..bf1d8ba0ca --- /dev/null +++ b/.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 diff --git a/.github/workflows/release-snapshot.yml b/.github/workflows/release-snapshot.yml index 3f8e495c9e..bd2c05130c 100644 --- a/.github/workflows/release-snapshot.yml +++ b/.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 diff --git a/packages/react/src/components/form/Combobox/Combobox.test.tsx b/packages/react/src/components/form/Combobox/Combobox.test.tsx index 5ab7adf432..38fb0ea620 100644 --- a/packages/react/src/components/form/Combobox/Combobox.test.tsx +++ b/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(); diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx index 642d38d9b7..be26dee0fd 100644 --- a/packages/react/src/components/form/Combobox/internal/ComboboxClearButton.tsx +++ b/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 +>((props, ref) => { const context = useContext(ComboboxContext); if (!context) { @@ -15,6 +18,8 @@ const ComboboxClearButton = () => { return ( ); -}; +}); ComboboxClearButton.displayName = 'ComboboxClearButton'; diff --git a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx b/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx index d24be44c49..14a859852b 100644 --- a/packages/react/src/components/form/Combobox/internal/ComboboxInput.tsx +++ b/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(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) { 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 = ({ {/* Clear button if we are in multiple mode and have at least one active value */} - {showClearButton && } + {showClearButton && } {/* Arrow for combobox. Click is handled by the wrapper */}
{open ? (