Skip to content

add noScroll prop to six-dropdown. #442

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
belahorvath merged 2 commits into from
Nov 24, 2025
Merged

add noScroll prop to six-dropdown. #442

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
17032fe
add noScroll prop to six-dropdown.
belahorvath Nov 13, 2025
5b8b21f
Make six-dropdown scrollable style dependent on noScroll property.
belahorvath Nov 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions docs/changelog.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).

- Added the ability to disable the `ValidationService` on Angular. See
[docs](./guide/angular.md#customisingdisabling-validationservice) for more details.
- `six-dropdown` : Added `noScroll` property to disable the default panel scroll behavior. Defaults
to false.

### Fixed

Expand Down
1 change: 1 addition & 0 deletions docs/components/six-dropdown.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -461,6 +461,7 @@ To make your virtually scrolled list filterable simply add the `filter` attribut
| `filterPlaceholder` | `filter-placeholder` | The filter's placeholder text. | `string` | `'Filter...'` |
| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` |
| `matchTriggerWidth` | `match-trigger-width` | Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. | `boolean` | `false` |
| `noScroll` | `no-scroll` | Set to true if you want to disable the default dropdown panel scroll behavior. | `boolean` | `false` |
| `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` |
| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` |
| `placement` | `placement` | The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
Expand Down
4 changes: 2 additions & 2 deletions libraries/ui-library-angular/src/lib/stencil-generated/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,15 +475,15 @@ the drawer will result in destructive behavior such as data loss.


@ProxyCmp({
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'noScroll', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
methods: ['show', 'hide']
})
@Component({
selector: 'six-dropdown',
changeDetection: ChangeDetectionStrategy.OnPush,
template: '<ng-content></ng-content>',
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'noScroll', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
standalone: false
})
export class SixDropdown {
Expand Down
1 change: 1 addition & 0 deletions libraries/ui-library-vue/src/lib/stencil-generated/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -240,6 +240,7 @@ export const SixDropdown: StencilVueComponent<JSX.SixDropdown> = /*@__PURE__*/ d
'hoist',
'containingElement',
'filter',
'noScroll',
'asyncFilter',
'filterPlaceholder',
'autofocusFilter',
Expand Down
10 changes: 10 additions & 0 deletions libraries/ui-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -772,6 +772,11 @@ export namespace Components {
* @default false
*/
"matchTriggerWidth": boolean;
/**
* Set to true if you want to disable the default dropdown panel scroll behavior.
* @default false
*/
"noScroll": boolean;
/**
* Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
* @default false
Expand Down Expand Up @@ -4520,6 +4525,11 @@ declare namespace LocalJSX {
* @default false
*/
"matchTriggerWidth"?: boolean;
/**
* Set to true if you want to disable the default dropdown panel scroll behavior.
* @default false
*/
"noScroll"?: boolean;
/**
* Emitted when the async filter is triggered
*/
Expand Down
1 change: 1 addition & 0 deletions libraries/ui-library/src/components/six-dropdown/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
| `filterPlaceholder` | `filter-placeholder` | The filter's placeholder text. | `string` | `'Filter...'` |
| `hoist` | `hoist` | Enable this option to prevent the panel from being clipped when the component is placed inside a container with `overflow: auto\|scroll`. | `boolean` | `false` |
| `matchTriggerWidth` | `match-trigger-width` | Determines if the dropdown panel's width should match the width of the trigger element. If set to `true`, the panel will resize its width to align with the trigger's width. If `false` or omitted, the panel will maintain its default width. | `boolean` | `false` |
| `noScroll` | `no-scroll` | Set to true if you want to disable the default dropdown panel scroll behavior. | `boolean` | `false` |
| `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` |
| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` |
| `placement` | `placement` | The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel inside the viewport. | `"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"` | `'bottom-start'` |
Expand Down
45 changes: 32 additions & 13 deletions libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -108,6 +108,15 @@ export class SixDropdown {
*/
@Prop() filter = false;

/**
* Set to true if you want to disable the default dropdown panel scroll behavior.
*/
@Prop() noScroll = false;

get scrollEnabled() {
return !this.noScroll;
}

/**
* Set to true to allow async filtering.
* When you enter something in the search field the component will only emit an event but not filter any elements itself.
Expand Down Expand Up @@ -696,19 +705,29 @@ export class SixDropdown {
</six-icon>
</six-input>
)}
<div
class={{
dropdown__panel__scroll: true,
'dropdown__panel__scroll--virtual': this.virtualScroll,
}}
onScroll={this.handleDropdownScroll}
ref={(el) => (this.scrollPanel = el)}
>
<slot ref={(el) => (this.panelSlot = el as HTMLSlotElement)} />
{this.options.length > 0 && (
<six-menu part="menu" items={this.renderedOptions} virtualScroll={this.virtualScroll}></six-menu>
)}
</div>
{this.scrollEnabled ? (
<div
class={{
dropdown__panel__scroll: true,
Comment thread
belahorvath marked this conversation as resolved.
Outdated
'dropdown__panel__scroll--virtual': this.virtualScroll,
}}
onScroll={this.handleDropdownScroll}
ref={(el) => (this.scrollPanel = el)}
>
<slot ref={(el) => (this.panelSlot = el as HTMLSlotElement)} />
{this.options.length > 0 && (
<six-menu part="menu" items={this.renderedOptions} virtualScroll={this.virtualScroll}></six-menu>
)}
</div>
) : (
<div ref={(el) => (this.scrollPanel = el)}>
<slot ref={(el) => (this.panelSlot = el as HTMLSlotElement)} />
{this.options.length > 0 && (
<six-menu part="menu" items={this.renderedOptions} virtualScroll={this.virtualScroll}></six-menu>
)}
</div>
)}

<slot name="dropdown-footer"></slot>
</div>
</div>
Expand Down