fix(core/select): update input value on slot change

[matthiashader]

…event state change in render

💡 What is the current behavior?

• When loading data async, despite the data being inside the dropdown the selected value is not updated into the input
• the select has a height of 34px and the icon-button a height of 32px (32px + 2px border -> 34px)

GitHub Issue Number: Closes #1425, [IX-1622], [IX-1725]

🆕 What is the new behavior?

• When loading data, the input value gets updated
• strict typing (check if updated API is a breaking change)
• updated refs, to prevent state changes in the render cycle
• select has a height of 32px, the icon-button has a height of 30px

🏁 Checklist

A pull request can only be merged if all of these conditions are met (where applicable):

• 🦮 Accessibility (a11y) features were implemented
• 🗺️ Internationalization (i18n) - no hard coded strings
• 📲 Responsiveness - components handle viewport changes and content overflow gracefully
• 📄 Documentation was reviewed/updated (pnpm run docs)
• 🧪 Unit tests were added/updated and pass (pnpm test)
• 📸 Visual regression tests were added/updated and pass (Guide)
• 🧐 Static code analysis passes (pnpm lint)
• 🏗️ Successful compilation (pnpm build, changes pushed)

👨‍💻 Help & support

[changeset-bot]

🦋 Changeset detected

Latest commit: 216cbc9

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

This PR includes changesets to release 4 packages

Name	Type
@siemens/ix	Patch
@siemens/ix-angular	Patch
@siemens/ix-react	Patch
@siemens/ix-vue	Patch

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

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud

[github-actions]

Report of strict check

src/components/select/select.tsx

• src/components/select/select.tsx(108,12): error TS2564: Property 'valueChange' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'valueChange' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(114,12): error TS2564: Property 'itemSelectionChange' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'itemSelectionChange' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(121,12): error TS2564: Property 'inputChange' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'inputChange' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(126,12): error TS2564: Property 'addItem' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'addItem' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(129,12): error TS2564: Property 'selectedLabels' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'selectedLabels' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(133,12): error TS2564: Property 'navigationItem' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'navigationItem' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(134,12): error TS2564: Property 'inputFilterText' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'inputFilterText' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(135,12): error TS2564: Property 'inputValue' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'inputValue' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(142,11): error TS2564: Property 'itemMutationObserver' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'itemMutationObserver' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(144,11): error TS2564: Property 'arrowFocusController' has no initializer and is not definitely assigned in the constructor.: error TS2564: Property 'arrowFocusController' has no initializer and is not definitely assigned in the constructor.
• src/components/select/select.tsx(163,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(186,12): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(230,7): error TS2322: Type 'undefined' is not assignable to type 'ArrowFocusController'.: error TS2322: Type 'undefined' is not assignable to type 'ArrowFocusController'.
• src/components/select/select.tsx(242,5): error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.: error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.
• src/components/select/select.tsx(246,9): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(251,9): error TS18047: 'nestedDropdownItem' is possibly 'null'.: error TS18047: 'nestedDropdownItem' is possibly 'null'.
• src/components/select/select.tsx(251,9): error TS18047: 'nestedDropdownItem.shadowRoot' is possibly 'null'.: error TS18047: 'nestedDropdownItem.shadowRoot' is possibly 'null'.
• src/components/select/select.tsx(251,9): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(315,9): error TS7034: Variable 'ids' implicitly has type 'any[]' in some locations where its type cannot be determined.: error TS7034: Variable 'ids' implicitly has type 'any[]' in some locations where its type cannot be determined.
• src/components/select/select.tsx(322,23): error TS7005: Variable 'ids' implicitly has an 'any[]' type.: error TS7005: Variable 'ids' implicitly has an 'any[]' type.
• src/components/select/select.tsx(349,37): error TS2345: Argument of type 'null' is not assignable to parameter of type 'string[] | undefined'.: error TS2345: Argument of type 'null' is not assignable to parameter of type 'string[] | undefined'.
• src/components/select/select.tsx(399,7): error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.: error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.
• src/components/select/select.tsx(462,27): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(479,27): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(487,27): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(501,27): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(504,29): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(518,29): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(530,29): error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.: error TS2345: Argument of type 'HTMLIxSelectItemElement | undefined' is not assignable to parameter of type 'HTMLIxSelectItemElement'.
• src/components/select/select.tsx(546,7): error TS18047: 'element.shadowRoot' is possibly 'null'.: error TS18047: 'element.shadowRoot' is possibly 'null'.
• src/components/select/select.tsx(546,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(546,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(546,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(555,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(555,7): error TS2531: Object is possibly 'null'.: error TS2531: Object is possibly 'null'.
• src/components/select/select.tsx(602,27): error TS2345: Argument of type 'null' is not assignable to parameter of type 'string | string[] | undefined'.: error TS2345: Argument of type 'null' is not assignable to parameter of type 'string | string[] | undefined'.
• src/components/select/select.tsx(606,23): error TS7006: Parameter 'e' implicitly has an 'any' type.: error TS7006: Parameter 'e' implicitly has an 'any' type.
• src/components/select/select.tsx(654,13): error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLElement'.: error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLElement'.
• src/components/select/select.tsx(655,33): error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLElement'.: error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLElement'.
• src/components/select/select.tsx(688,34): error TS2322: Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement'.: error TS2322: Type 'HTMLInputElement | undefined' is not assignable to type 'HTMLInputElement'.
• src/components/select/select.tsx(691,21): error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.: error TS2322: Type 'undefined' is not assignable to type 'DropdownItemWrapper'.
• src/components/select/select.tsx(718,42): error TS2322: Type 'HTMLIxIconButtonElement | undefined' is not assignable to type 'HTMLElement'.: error TS2322: Type 'HTMLIxIconButtonElement | undefined' is not assignable to type 'HTMLElement'.
• src/components/select/select.tsx(727,26): error TS2322: Type 'HTMLIxDropdownElement | undefined' is not assignable to type 'HTMLIxDropdownElement'.: error TS2322: Type 'HTMLIxDropdownElement | undefined' is not assignable to type 'HTMLIxDropdownElement'.
• src/components/select/select.tsx(759,28): error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement'.: error TS2322: Type 'HTMLDivElement | undefined' is not assignable to type 'HTMLDivElement'.
• src/components/select/select.tsx(777,17): error TS2322: Type 'HTMLIxDropdownItemElement | undefined' is not assignable to type 'HTMLIxDropdownItemElement'.: error TS2322: Type 'HTMLIxDropdownItemElement | undefined' is not assignable to type 'HTMLIxDropdownItemElement'.