From caea228c8503376048b3676a8849734a35358c7e Mon Sep 17 00:00:00 2001 From: Erki Dorbek Date: Wed, 22 Oct 2025 12:55:16 +0300 Subject: [PATCH 1/4] feat(community-select): npm i + Fix dropdown opening with wrong scrollTop #640 --- .../form/select/select.component.html | 1 - .../form/select/select.component.scss | 4 +- package-lock.json | 194 ------------------ 3 files changed, 2 insertions(+), 197 deletions(-) diff --git a/community/components/form/select/select.component.html b/community/components/form/select/select.component.html index 6bdf3e12b..9120eb893 100644 --- a/community/components/form/select/select.component.html +++ b/community/components/form/select/select.component.html @@ -84,7 +84,6 @@ [id]="listboxId" class="tedi-select__options" cdkListbox - cdkListboxUseActiveDescendant [cdkListboxValue]="selectedOptions()" (cdkListboxValueChange)="handleValueChange($event)" > diff --git a/community/components/form/select/select.component.scss b/community/components/form/select/select.component.scss index 8c9b1e4fe..d90d436e1 100644 --- a/community/components/form/select/select.component.scss +++ b/community/components/form/select/select.component.scss @@ -50,8 +50,6 @@ &__dropdown { box-shadow: 0px 1px 5px 0px var(--alpha-20); - max-height: 300px; - overflow-y: auto; @include mixins.responsive-styles(margin-top, form-field-outer-spacing); @include mixins.responsive-styles(margin-bottom, form-field-outer-spacing); @@ -60,6 +58,8 @@ &__options { margin: 0; padding: 0; + max-height: 300px; + overflow-y: auto; &:focus .cdk-option-active { background: var(--dropdown-item-hover-background); diff --git a/package-lock.json b/package-lock.json index 148f4cd4c..648b5c617 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2838,31 +2838,6 @@ } } }, - "node_modules/@compodoc/compodoc/node_modules/@angular-devkit/schematics/node_modules/chokidar": { - "version": "3.6.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "anymatch": "~3.1.2", - "braces": "~3.0.2", - "glob-parent": "~5.1.2", - "is-binary-path": "~2.1.0", - "is-glob": "~4.0.1", - "normalize-path": "~3.0.0", - "readdirp": "~3.6.0" - }, - "engines": { - "node": ">= 8.10.0" - }, - "funding": { - "url": "https://paulmillr.com/funding/" - }, - "optionalDependencies": { - "fsevents": "~2.3.2" - } - }, "node_modules/@compodoc/compodoc/node_modules/@babel/core": { "version": "7.25.8", "dev": true, @@ -3021,19 +2996,6 @@ "dev": true, "license": "MIT" }, - "node_modules/@compodoc/compodoc/node_modules/glob-parent": { - "version": "5.1.2", - "dev": true, - "license": "ISC", - "optional": true, - "peer": true, - "dependencies": { - "is-glob": "^4.0.1" - }, - "engines": { - "node": ">= 6" - } - }, "node_modules/@compodoc/compodoc/node_modules/magic-string": { "version": "0.30.11", "dev": true, @@ -4719,19 +4681,6 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, - "node_modules/@lmdb/lmdb-darwin-arm64": { - "version": "3.2.6", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "peer": true - }, "node_modules/@mdx-js/react": { "version": "3.1.1", "dev": true, @@ -4748,19 +4697,6 @@ "react": ">=16" } }, - "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": { - "version": "3.0.3", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "peer": true - }, "node_modules/@napi-rs/nice": { "version": "1.1.1", "dev": true, @@ -5419,19 +5355,6 @@ } } }, - "node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.34.8", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "peer": true - }, "node_modules/@rollup/wasm-node": { "version": "4.52.4", "dev": true, @@ -10526,16 +10449,6 @@ "npm": "1.2.8000 || >= 1.4.16" } }, - "node_modules/detect-libc": { - "version": "2.1.2", - "dev": true, - "license": "Apache-2.0", - "optional": true, - "peer": true, - "engines": { - "node": ">=8" - } - }, "node_modules/detect-newline": { "version": "3.1.0", "dev": true, @@ -15927,32 +15840,6 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, - "node_modules/lmdb": { - "version": "3.2.6", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "msgpackr": "^1.11.2", - "node-addon-api": "^6.1.0", - "node-gyp-build-optional-packages": "5.2.2", - "ordered-binary": "^1.5.3", - "weak-lru-cache": "^1.2.2" - }, - "bin": { - "download-lmdb-prebuilds": "bin/download-prebuilds.js" - }, - "optionalDependencies": { - "@lmdb/lmdb-darwin-arm64": "3.2.6", - "@lmdb/lmdb-darwin-x64": "3.2.6", - "@lmdb/lmdb-linux-arm": "3.2.6", - "@lmdb/lmdb-linux-arm64": "3.2.6", - "@lmdb/lmdb-linux-x64": "3.2.6", - "@lmdb/lmdb-win32-x64": "3.2.6" - } - }, "node_modules/load-json-file": { "version": "4.0.0", "dev": true, @@ -16838,38 +16725,6 @@ "dev": true, "license": "MIT" }, - "node_modules/msgpackr": { - "version": "1.11.5", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "optionalDependencies": { - "msgpackr-extract": "^3.0.2" - } - }, - "node_modules/msgpackr-extract": { - "version": "3.0.3", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "node-gyp-build-optional-packages": "5.2.2" - }, - "bin": { - "download-msgpackr-prebuilds": "bin/download-prebuilds.js" - }, - "optionalDependencies": { - "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", - "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", - "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", - "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", - "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", - "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" - } - }, "node_modules/multicast-dns": { "version": "7.2.5", "dev": true, @@ -17182,13 +17037,6 @@ "dev": true, "license": "MIT" }, - "node_modules/node-addon-api": { - "version": "6.1.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/node-emoji": { "version": "2.2.0", "dev": true, @@ -17235,21 +17083,6 @@ "node": "^18.17.0 || >=20.5.0" } }, - "node_modules/node-gyp-build-optional-packages": { - "version": "5.2.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true, - "dependencies": { - "detect-libc": "^2.0.1" - }, - "bin": { - "node-gyp-build-optional-packages": "bin.js", - "node-gyp-build-optional-packages-optional": "optional.js", - "node-gyp-build-optional-packages-test": "build-test.js" - } - }, "node_modules/node-gyp/node_modules/chownr": { "version": "3.0.0", "dev": true, @@ -20380,13 +20213,6 @@ "node": ">=8" } }, - "node_modules/ordered-binary": { - "version": "1.6.0", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/os-name": { "version": "4.0.1", "dev": true, @@ -24938,19 +24764,6 @@ } } }, - "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": { - "version": "4.52.4", - "cpu": [ - "arm64" - ], - "dev": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "peer": true - }, "node_modules/vite/node_modules/postcss": { "version": "8.5.6", "dev": true, @@ -25073,13 +24886,6 @@ "defaults": "^1.0.3" } }, - "node_modules/weak-lru-cache": { - "version": "1.2.2", - "dev": true, - "license": "MIT", - "optional": true, - "peer": true - }, "node_modules/webidl-conversions": { "version": "7.0.0", "dev": true, From 829cba49e954017e2941c5d02e936f6df2ef0e1b Mon Sep 17 00:00:00 2001 From: Erki Dorbek Date: Wed, 22 Oct 2025 13:47:38 +0300 Subject: [PATCH 2/4] feat(community-select): Add possibility to direct dropdown width with elementRef or null #640 --- .../form/select/multiselect.component.html | 2 +- .../form/select/multiselect.component.ts | 19 +++++- .../form/select/multiselect.stories.ts | 59 ++++++++++++++++++ .../form/select/select.component.html | 2 +- .../form/select/select.component.ts | 19 +++++- .../components/form/select/select.stories.ts | 60 +++++++++++++++++++ 6 files changed, 153 insertions(+), 8 deletions(-) diff --git a/community/components/form/select/multiselect.component.html b/community/components/form/select/multiselect.component.html index b1c2aede5..c5f2bded1 100644 --- a/community/components/form/select/multiselect.component.html +++ b/community/components/form/select/multiselect.component.html @@ -89,7 +89,7 @@
    (true); + /** + * Optional element reference to calculate dropdown width from. + * If provided but null, dropdown will use auto width. + * If not provided, defaults to the host element width. + * @default undefined + */ + dropdownWidthRef = input(); feedbackText = input>(); readonly specialOptionControls = specialOptionControls; @@ -146,7 +153,7 @@ export class MultiselectComponent triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef }); hostRef = inject(ElementRef); options = contentChildren(SelectOptionComponent); - dropdownWidth = signal(0); + dropdownWidth = signal(0); disabled = signal(false); optionGroups = computed(() => { @@ -220,8 +227,14 @@ export class MultiselectComponent } private setDropdownWidth(): void { - const computedWidth = - this.hostRef?.nativeElement?.getBoundingClientRect()?.width ?? 0; + const widthRef = this.dropdownWidthRef(); + if (widthRef === null) { + this.dropdownWidth.set(null); + return; + } + + const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement; + const computedWidth = element?.getBoundingClientRect()?.width ?? 0; this.dropdownWidth.set(computedWidth); } diff --git a/community/components/form/select/multiselect.stories.ts b/community/components/form/select/multiselect.stories.ts index dfea3d56d..25e0a760e 100644 --- a/community/components/form/select/multiselect.stories.ts +++ b/community/components/form/select/multiselect.stories.ts @@ -370,3 +370,62 @@ export const multiselectNoOptions: Story = { }, }), }; + +export const multiselectAutoWidthDropdown: Story = { + render: (args) => ({ + template: ` + + + + + + + + `, + props: { + ...args, + }, + }), +}; + +export const multiselectCustomWidthDropdown: Story = { + render: (args) => ({ + template: ` +
    + This div sets the dropdown width to 400px +
    + + + + + + + + `, + props: { + ...args, + getElementRef: (element: HTMLElement) => ({ nativeElement: element }), + }, + }), +}; diff --git a/community/components/form/select/select.component.html b/community/components/form/select/select.component.html index 9120eb893..bdc41e476 100644 --- a/community/components/form/select/select.component.html +++ b/community/components/form/select/select.component.html @@ -77,7 +77,7 @@
      (true); + /** + * Optional element reference to calculate dropdown width from. + * If provided but null, dropdown will use auto width. + * If not provided, defaults to the host element width. + * @default undefined + */ + dropdownWidthRef = input(); feedbackText = input>(); isOpen = signal(false); @@ -115,7 +122,7 @@ export class SelectComponent triggerRef = viewChild(CdkOverlayOrigin, { read: ElementRef }); hostRef = inject(ElementRef); options = contentChildren(SelectOptionComponent); - dropdownWidth = signal(0); + dropdownWidth = signal(null); disabled = signal(false); optionGroups = computed(() => { @@ -186,8 +193,14 @@ export class SelectComponent }); private setDropdownWidth(): void { - const computedWidth = - this.hostRef?.nativeElement?.getBoundingClientRect()?.width ?? 0; + const widthRef = this.dropdownWidthRef(); + if (widthRef === null) { + this.dropdownWidth.set(null); + return; + } + + const element = widthRef?.nativeElement ?? this.hostRef?.nativeElement; + const computedWidth = element?.getBoundingClientRect()?.width ?? 0; this.dropdownWidth.set(computedWidth); } diff --git a/community/components/form/select/select.stories.ts b/community/components/form/select/select.stories.ts index fb4a4687c..abe34bc4e 100644 --- a/community/components/form/select/select.stories.ts +++ b/community/components/form/select/select.stories.ts @@ -346,3 +346,63 @@ export const singleSelectGroupedOptions: Story = { }, }), }; + +export const dropdownWidthAuto: Story = { + render: (args) => ({ + template: ` + + + + + + + + `, + props: { + ...args, + }, + }), +}; + +export const dropdownWidthCustomElement: Story = { + render: (args) => ({ + template: ` +
      + This div sets the dropdown width to 400px +
      + + + + + + + + `, + props: { + ...args, + getElementRef: (element: HTMLElement) => ({ nativeElement: element }), + }, + }), +}; From d26fbe29eaeb66fc484b68eac277c718775f4112 Mon Sep 17 00:00:00 2001 From: Erki Dorbek Date: Wed, 22 Oct 2025 14:00:10 +0300 Subject: [PATCH 3/4] feat(community-select): npm install again #640 --- package-lock.json | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/package-lock.json b/package-lock.json index 648b5c617..1e9cb7819 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12382,6 +12382,21 @@ "dev": true, "license": "ISC" }, + "node_modules/fsevents": { + "version": "2.3.3", + "resolved": "https://repo.tehik.ee/artifactory/api/npm/teis-npm/fsevents/-/fsevents-2.3.3.tgz", + "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "engines": { + "node": "^8.16.0 || ^10.6.0 || >=11.0.0" + } + }, "node_modules/function-bind": { "version": "1.1.2", "dev": true, From c8637455ca0e0f7fe03c83ccae14c5ee4d7e5525 Mon Sep 17 00:00:00 2001 From: Erki Dorbek Date: Wed, 29 Oct 2025 10:39:40 +0200 Subject: [PATCH 4/4] feat(community-select): Revert package-lock (seems to be bug after npm i) #640 --- package-lock.json | 209 ++++++++++++++++++++++++++++++++++++++++++---- 1 file changed, 194 insertions(+), 15 deletions(-) diff --git a/package-lock.json b/package-lock.json index 1e9cb7819..148f4cd4c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -2838,6 +2838,31 @@ } } }, + "node_modules/@compodoc/compodoc/node_modules/@angular-devkit/schematics/node_modules/chokidar": { + "version": "3.6.0", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "anymatch": "~3.1.2", + "braces": "~3.0.2", + "glob-parent": "~5.1.2", + "is-binary-path": "~2.1.0", + "is-glob": "~4.0.1", + "normalize-path": "~3.0.0", + "readdirp": "~3.6.0" + }, + "engines": { + "node": ">= 8.10.0" + }, + "funding": { + "url": "https://paulmillr.com/funding/" + }, + "optionalDependencies": { + "fsevents": "~2.3.2" + } + }, "node_modules/@compodoc/compodoc/node_modules/@babel/core": { "version": "7.25.8", "dev": true, @@ -2996,6 +3021,19 @@ "dev": true, "license": "MIT" }, + "node_modules/@compodoc/compodoc/node_modules/glob-parent": { + "version": "5.1.2", + "dev": true, + "license": "ISC", + "optional": true, + "peer": true, + "dependencies": { + "is-glob": "^4.0.1" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/@compodoc/compodoc/node_modules/magic-string": { "version": "0.30.11", "dev": true, @@ -4681,6 +4719,19 @@ "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, + "node_modules/@lmdb/lmdb-darwin-arm64": { + "version": "3.2.6", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, "node_modules/@mdx-js/react": { "version": "3.1.1", "dev": true, @@ -4697,6 +4748,19 @@ "react": ">=16" } }, + "node_modules/@msgpackr-extract/msgpackr-extract-darwin-arm64": { + "version": "3.0.3", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, "node_modules/@napi-rs/nice": { "version": "1.1.1", "dev": true, @@ -5355,6 +5419,19 @@ } } }, + "node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.34.8", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, "node_modules/@rollup/wasm-node": { "version": "4.52.4", "dev": true, @@ -10449,6 +10526,16 @@ "npm": "1.2.8000 || >= 1.4.16" } }, + "node_modules/detect-libc": { + "version": "2.1.2", + "dev": true, + "license": "Apache-2.0", + "optional": true, + "peer": true, + "engines": { + "node": ">=8" + } + }, "node_modules/detect-newline": { "version": "3.1.0", "dev": true, @@ -12382,21 +12469,6 @@ "dev": true, "license": "ISC" }, - "node_modules/fsevents": { - "version": "2.3.3", - "resolved": "https://repo.tehik.ee/artifactory/api/npm/teis-npm/fsevents/-/fsevents-2.3.3.tgz", - "integrity": "sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==", - "dev": true, - "hasInstallScript": true, - "license": "MIT", - "optional": true, - "os": [ - "darwin" - ], - "engines": { - "node": "^8.16.0 || ^10.6.0 || >=11.0.0" - } - }, "node_modules/function-bind": { "version": "1.1.2", "dev": true, @@ -15855,6 +15927,32 @@ "url": "https://github.com/chalk/wrap-ansi?sponsor=1" } }, + "node_modules/lmdb": { + "version": "3.2.6", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "msgpackr": "^1.11.2", + "node-addon-api": "^6.1.0", + "node-gyp-build-optional-packages": "5.2.2", + "ordered-binary": "^1.5.3", + "weak-lru-cache": "^1.2.2" + }, + "bin": { + "download-lmdb-prebuilds": "bin/download-prebuilds.js" + }, + "optionalDependencies": { + "@lmdb/lmdb-darwin-arm64": "3.2.6", + "@lmdb/lmdb-darwin-x64": "3.2.6", + "@lmdb/lmdb-linux-arm": "3.2.6", + "@lmdb/lmdb-linux-arm64": "3.2.6", + "@lmdb/lmdb-linux-x64": "3.2.6", + "@lmdb/lmdb-win32-x64": "3.2.6" + } + }, "node_modules/load-json-file": { "version": "4.0.0", "dev": true, @@ -16740,6 +16838,38 @@ "dev": true, "license": "MIT" }, + "node_modules/msgpackr": { + "version": "1.11.5", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "optionalDependencies": { + "msgpackr-extract": "^3.0.2" + } + }, + "node_modules/msgpackr-extract": { + "version": "3.0.3", + "dev": true, + "hasInstallScript": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "node-gyp-build-optional-packages": "5.2.2" + }, + "bin": { + "download-msgpackr-prebuilds": "bin/download-prebuilds.js" + }, + "optionalDependencies": { + "@msgpackr-extract/msgpackr-extract-darwin-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-darwin-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-arm64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-linux-x64": "3.0.3", + "@msgpackr-extract/msgpackr-extract-win32-x64": "3.0.3" + } + }, "node_modules/multicast-dns": { "version": "7.2.5", "dev": true, @@ -17052,6 +17182,13 @@ "dev": true, "license": "MIT" }, + "node_modules/node-addon-api": { + "version": "6.1.0", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/node-emoji": { "version": "2.2.0", "dev": true, @@ -17098,6 +17235,21 @@ "node": "^18.17.0 || >=20.5.0" } }, + "node_modules/node-gyp-build-optional-packages": { + "version": "5.2.2", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true, + "dependencies": { + "detect-libc": "^2.0.1" + }, + "bin": { + "node-gyp-build-optional-packages": "bin.js", + "node-gyp-build-optional-packages-optional": "optional.js", + "node-gyp-build-optional-packages-test": "build-test.js" + } + }, "node_modules/node-gyp/node_modules/chownr": { "version": "3.0.0", "dev": true, @@ -20228,6 +20380,13 @@ "node": ">=8" } }, + "node_modules/ordered-binary": { + "version": "1.6.0", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/os-name": { "version": "4.0.1", "dev": true, @@ -24779,6 +24938,19 @@ } } }, + "node_modules/vite/node_modules/@rollup/rollup-darwin-arm64": { + "version": "4.52.4", + "cpu": [ + "arm64" + ], + "dev": true, + "license": "MIT", + "optional": true, + "os": [ + "darwin" + ], + "peer": true + }, "node_modules/vite/node_modules/postcss": { "version": "8.5.6", "dev": true, @@ -24901,6 +25073,13 @@ "defaults": "^1.0.3" } }, + "node_modules/weak-lru-cache": { + "version": "1.2.2", + "dev": true, + "license": "MIT", + "optional": true, + "peer": true + }, "node_modules/webidl-conversions": { "version": "7.0.0", "dev": true,