From 9957ac151ff8150eae828ab8ba75261fdd2ef090 Mon Sep 17 00:00:00 2001 From: mariohamann Date: Tue, 12 May 2026 13:27:22 +0200 Subject: [PATCH 1/2] update skill --- .github/skills/component-conventions/SKILL.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/.github/skills/component-conventions/SKILL.md b/.github/skills/component-conventions/SKILL.md index 3232897072..10cbcc82be 100644 --- a/.github/skills/component-conventions/SKILL.md +++ b/.github/skills/component-conventions/SKILL.md @@ -103,6 +103,8 @@ JSDoc tag → Storybook mapping: | `@event` | EVENTS | | `@state` + `/** @internal */` | Hidden from docs | +> **Do NOT add `@property` tags to the class-level JSDoc block.** Properties are auto-documented by the custom elements manifest analyzer from the `@property` decorator and inline JSDoc comment on each property. Adding manual `@property` entries in the class JSDoc is redundant and will cause duplicate documentation. + CSS property naming convention: `--sd-{component}--{variant}--{state}-{css-property}` --- From b2fd0de39006b029cdcb0e7d6b4e50ca39e8ed6a Mon Sep 17 00:00:00 2001 From: mariohamann Date: Tue, 12 May 2026 13:29:09 +0200 Subject: [PATCH 2/2] feat: add inputValue property and input-value attribute to sd-combobox for better control of input text --- .changeset/add-combobox-input-value.md | 7 +++ .../src/components/combobox/combobox.test.ts | 46 +++++++++++++++++++ .../src/components/combobox/combobox.ts | 18 ++++++++ 3 files changed, 71 insertions(+) create mode 100644 .changeset/add-combobox-input-value.md diff --git a/.changeset/add-combobox-input-value.md b/.changeset/add-combobox-input-value.md new file mode 100644 index 0000000000..8233f6ac10 --- /dev/null +++ b/.changeset/add-combobox-input-value.md @@ -0,0 +1,7 @@ +--- +'@solid-design-system/components': minor +'@solid-design-system/styles': minor +'@solid-design-system/tokens': minor +--- + +`sd-combobox`: Added `inputValue` property and `input-value` attribute to expose and control the current text in the combobox's input field without querying the shadow DOM. diff --git a/packages/components/src/components/combobox/combobox.test.ts b/packages/components/src/components/combobox/combobox.test.ts index 71998348f8..3d4fd7a53b 100644 --- a/packages/components/src/components/combobox/combobox.test.ts +++ b/packages/components/src/components/combobox/combobox.test.ts @@ -1448,4 +1448,50 @@ describe('', () => { // Expect input to lose focus (activeElement in shadow root is not the input) expect(el.shadowRoot!.activeElement).to.not.equal(input); }); + + describe('inputValue', () => { + it('should default to an empty string', async () => { + const combobox = await fixture(html` + + Option 1 + + `); + expect(combobox.inputValue).to.equal(''); + }); + + it('should reflect inputValue as an attribute', async () => { + const combobox = await fixture(html` + + Option 1 + + `); + expect(combobox.inputValue).to.equal('test'); + expect(combobox.getAttribute('input-value')).to.equal('test'); + }); + + it('should update the display input when inputValue is set programmatically', async () => { + const combobox = await fixture(html` + + Option 1 + + `); + combobox.inputValue = 'hello'; + await combobox.updateComplete; + const displayInput = combobox.shadowRoot!.querySelector('[part~="display-input"]')!; + expect(displayInput.value).to.equal('hello'); + }); + + it('should update inputValue when the user types', async () => { + const combobox = await fixture(html` + + Option 1 + + `); + const displayInput = combobox.shadowRoot!.querySelector('[part~="display-input"]')!; + displayInput.focus(); + await sendKeys({ type: 'opt' }); + await combobox.updateComplete; + expect(combobox.inputValue).to.equal('opt'); + }); + }); }); diff --git a/packages/components/src/components/combobox/combobox.ts b/packages/components/src/components/combobox/combobox.ts index 4b568d6f3c..c095a2c97b 100644 --- a/packages/components/src/components/combobox/combobox.ts +++ b/packages/components/src/components/combobox/combobox.ts @@ -251,6 +251,24 @@ export default class SdCombobox extends SolidElement implements SolidFormControl /** Shows success styles if the validity of the input is valid. */ @property({ type: Boolean, reflect: true, attribute: 'style-on-valid' }) styleOnValid = false; + /** + * The current value of the combobox's internal text input. Setting this property will update the + * displayed text in the input field without selecting an option. This is useful for pre-filling + * the search input or reading the current query string. + */ + @property({ type: String, reflect: true, attribute: 'input-value' }) + get inputValue() { + return this.displayInputValue; + } + set inputValue(value: string) { + this.displayInputValue = value; + this.updateComplete.then(() => { + if (this.displayInput) { + this.displayInput.value = value; + } + }); + } + /** * A function used to filter options in the combobox component. * The default filter method is a case- and diacritic-insensitive string comparison.