feat(Search): use ds-suggestion under the hood to support clear button in pure html by unekinn · Pull Request #5126 · digdir/designsystemet

unekinn · 2026-07-31T07:31:31Z

Summary

Adds a @digdir/designsystemet-web/search module (also imported at @digdir/designsystemet-web) which clears and focuses the sibling <input> when a .ds-search button[type="reset"] is clicked. Bails out when the click was already handled (e.g. by React's Search.Clear).

Checks

I have read the contribution guidelines
I have added a changeset (run pnpm changeset if relevant)

Clears and focuses the sibling `<input>` when a `.ds-search button[type="reset"]` is clicked. Bails out when the click was already handled (e.g. by React's `Search.Clear`).

changeset-bot · 2026-07-31T07:31:35Z

🦋 Changeset detected

Latest commit: 3d05643

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 5 packages

Name	Type
@digdir/designsystemet-web	Minor
@digdir/designsystemet-react	Minor
@digdir/designsystemet-css	Minor
@digdir/designsystemet	Minor
@digdir/designsystemet-types	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2026-07-31T07:33:54Z

Preview deployments for this pull request:

storybook - 14. Aug 2026 - 07:20

www - 14. Aug 2026 - 07:22

…selector-based-delegation

eirikbacker · 2026-08-04T08:03:01Z

Note, this solution now looks for a button with type reset and with no content, placed directly after a input with type search. It bails out if the click event is already prevented (i.e. like Suggestion.Clear does).

This makes the functionality independent of CSS (making JSDOM tests happy), but it will also potentially catch non-Designsystemet components, if all conditions are met, which is problematic.

In my opinion, I think we should consider removing the Search component entirely, and rather add a magnifying icon on the input if type is set to search in the Suggestion component.

Maybe we should also as well as supporting a "Søk" button, but I must also admit I personally do not see why the search button is connected to the input. This could be a wrapper component (for example "Toolbar") instead, being able to "connect" buttons and/or inputs placed next to each other if we'd like that. This would not make a "special case" button styling for a single component, but enable our consumers to mix and match as needed – IF we feel like we should ship a connected input-button at all that is..
Is the connected input+button is more of an opinionated visual preference, than a component/functionality everyone probably needs? In Mattilsynet, we intentionally do not connect any fields, but rather keep a small distance, simplifying our code and visual appearance: https://www.mattilsynet.no/ (click "Søk" in the menu to see an example) ☺️

eirikbacker · 2026-08-04T08:42:36Z

Updated the code to use data-search="clear" instead of type="reset" to be more specific in what we target ☺️

Barsnes · 2026-08-04T08:52:59Z

https://www-pr-5126.victoriousglacier-eb9399b9.norwayeast.azurecontainerapps.io/no/components/docs/search/overview

Barsnes

Add a changeset about the internals of react search.clear changing and we are good 🔥

Barsnes · 2026-08-04T09:45:51Z

Updated the code to use data-search="clear" instead of type="reset" to be more specific in what we target ☺️

Right, but this would break people who have implemented this themselves, since it would not target their reset button anymore

eirikbacker · 2026-08-05T16:37:28Z

Updated Search to use <ds-suggestion> under the hood
Extended suggestion.css to include magnifying glass, and thus removing the need for search.css
Updated Search so magnifying glass is not bound to "Søk"-button, but instead type of input, giving more control to the end user
Updated suggestion.ts to no longer set a empty placeholder as u-combobox now makes this redundant
Simplified the suggestion.css to reduce :has() selectors and thus getting better performance
Simplified the places [lang] selectors was used instead og :lang()
Question: Should we really provide an ugly linear-gradient based chevron, when button[aria-expanded] does not exist? The browser does not.

Rewrote the setup, so need new review

Barsnes · 2026-08-10T06:28:11Z

+/* .ds-search is kept for backwards compatibility */
+.ds-search {
+  --dsc-search-padding-inline: var(--dsc-suggestion-clear-gap);
+  --dsc-search-clear-padding: var(--dsc-suggestion-clear-padding);
+  --dsc-search-clear-size: var(--dsc-suggestion-clear-size);
+  --dsc-search-clear-icon-url: var(--dsc-suggestion-clear-icon-url);
+  --dsc-search-magnifying-icon-url: var(--dsc-suggestion-search-icon-url);
+  --dsc-search-magnifying-icon-size: var(--dsc-suggestion-search-icon-size);
+}
+.ds-search,


I think it would be cleaner to keep this as a separate file. It will be easier to just delete that file later on.

But the .ds-search, .ds-suggestion selector needs to be in the same file, and using CSS modules, a file can not reference a className from another file, as classnames are often hashed based on the content of the file, so if anyone does individual imports, this is safer :)

ok, but removing search.css is a breaking change.

Feel free to add it again :)

Added search.css again, importing suggestion.css, but not including search.css in index.css as the backwards compatibility is only needed when importing individual css files

Updated code

feat(web): add a search module so Search.Clear works without React

7056193

Clears and focuses the sibling `<input>` when a `.ds-search button[type="reset"]` is clicked. Bails out when the click was already handled (e.g. by React's `Search.Clear`).

unekinn requested review from Barsnes, eirikbacker and mimarz as code owners July 31, 2026 07:31

fix: simplify css, properly trigger input-event, and prepare for non-…

545a6fe

…selector-based-delegation

eirikbacker marked this pull request as draft July 31, 2026 08:09

eirikbacker and others added 3 commits August 4, 2026 08:53

Merge branch 'main' into feat/web-search-clear

f760445

fix: support ShadowDOM

f2571e6

Merge branch 'main' into feat/web-search-clear

4c92721

eirikbacker marked this pull request as ready for review August 4, 2026 07:50

eirikbacker and others added 2 commits August 4, 2026 10:39

fix: simplify

42ac6e3

Update slick-rockets-build.md

1619fb4

chore: cleanup

753faee

fix: update css

75b47f9

Barsnes approved these changes Aug 4, 2026

View reviewed changes

Barsnes previously requested changes Aug 4, 2026

View reviewed changes

Comment thread packages/css/src/search.css Outdated

eirikbacker and others added 2 commits August 4, 2026 14:18

fix: revert selector

5ae2777

Merge branch 'main' into feat/web-search-clear

5a95ad9

eirikbacker requested review from Barsnes and a lite review from Copilot August 4, 2026 12:32

Copilot started reviewing on behalf of eirikbacker August 4, 2026 12:33 View session

This comment was marked as outdated.

Sign in to view

eirikbacker marked this pull request as draft August 5, 2026 08:16

Merge branch 'main' into feat/web-search-clear

fd4e6a1

fix: move to ds-suggestion for functionality

a2de49c

eirikbacker requested a lite review from Copilot August 5, 2026 16:29

Copilot started reviewing on behalf of eirikbacker August 5, 2026 16:29 View session

eirikbacker changed the title ~~feat(web): add a search module so Search.Clear works without React~~ feat(Search): use ds-suggestion under the hood to support clear button in pure html Aug 5, 2026

This comment was marked as resolved.

Sign in to view

eirikbacker added 2 commits August 5, 2026 18:50

chore: cleanup

6f87380

chore: fix typo

8d51401

eirikbacker requested a lite review from Copilot August 5, 2026 16:53

Copilot started reviewing on behalf of eirikbacker August 5, 2026 16:54 View session

This comment was marked as resolved.

Sign in to view

fix: better react support

1c57702

eirikbacker marked this pull request as ready for review August 5, 2026 17:04

chore: ocd selector fix

7a3263a

fix: show linear-gradient-chevron before interaction

1f4c324

eirikbacker mentioned this pull request Aug 6, 2026

Consider deprecating Search in favor of some extra styling in Suggestion? #5129

Open

eirikbacker and others added 3 commits August 6, 2026 10:17

docs: typo

205c2a6

chore: cleanup

461eb96

Merge branch 'main' into feat/web-search-clear

e0dfd19

Barsnes previously requested changes Aug 10, 2026

View reviewed changes

fix: pr review

23c1a80

eirikbacker requested review from Febakke and mrosvik as code owners August 11, 2026 06:46

Merge branch 'main' into feat/web-search-clear

e1a0d09

eirikbacker requested a review from Barsnes August 11, 2026 06:46

eirikbacker added 3 commits August 14, 2026 07:15

fix: re-add search.css

0a3262f

chore: add comment

8fc2d4c

Merge branch 'main' into feat/web-search-clear

3d05643

Uh oh!

Conversation

unekinn commented Jul 31, 2026

Summary

Checks

Uh oh!

changeset-bot Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbacker commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

eirikbacker commented Aug 4, 2026

Uh oh!

Barsnes commented Aug 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Barsnes left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Barsnes commented Aug 4, 2026

Uh oh!

This comment was marked as outdated.

Uh oh!

eirikbacker commented Aug 5, 2026

Uh oh!

This comment was marked as resolved.

Uh oh!

This comment was marked as resolved.

Uh oh!

Uh oh!

Uh oh!

Barsnes Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

eirikbacker Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

Barsnes Aug 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

eirikbacker Aug 11, 2026

Choose a reason for hiding this comment

Uh oh!

eirikbacker Aug 14, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

changeset-bot Bot commented Jul 31, 2026 •

edited

Loading

github-actions Bot commented Jul 31, 2026 •

edited

Loading

eirikbacker commented Aug 4, 2026 •

edited

Loading

Barsnes commented Aug 4, 2026 •

edited

Loading

Barsnes Aug 11, 2026 •

edited

Loading