Skip to content

Commit 03c6935

Browse files
belahorvathbelahorvath
authored
Merge pull request #442 from six-group/feat/six-dropdown-no-scroll
add noScroll prop to six-dropdown.
2 parents 5bdd528 + 5b8b21f commit 03c6935

7 files changed

Lines changed: 27 additions & 3 deletions

File tree

‎docs/changelog.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
1010

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

1416
### Fixed
1517

‎docs/components/six-dropdown.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -461,6 +461,7 @@ To make your virtually scrolled list filterable simply add the `filter` attribut
461461
| `filterPlaceholder` | `filter-placeholder` | The filter's placeholder text. | `string` | `'Filter...'` |
462462
| `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` |
463463
| `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` |
464+
| `noScroll` | `no-scroll` | Set to true if you want to disable the default dropdown panel scroll behavior. | `boolean` | `false` |
464465
| `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` |
465466
| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` |
466467
| `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'` |

‎libraries/ui-library-angular/src/lib/stencil-generated/components.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -475,15 +475,15 @@ the drawer will result in destructive behavior such as data loss.
475475

476476

477477
@ProxyCmp({
478-
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
478+
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'noScroll', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
479479
methods: ['show', 'hide']
480480
})
481481
@Component({
482482
selector: 'six-dropdown',
483483
changeDetection: ChangeDetectionStrategy.OnPush,
484484
template: '<ng-content></ng-content>',
485485
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
486-
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
486+
inputs: ['asyncFilter', 'autofocusFilter', 'closeOnSelect', 'containingElement', 'disableHideOnEnterAndSpace', 'distance', 'filter', 'filterDebounce', 'filterPlaceholder', 'hoist', 'matchTriggerWidth', 'noScroll', 'open', 'options', 'placement', 'skidding', 'virtualScroll'],
487487
standalone: false
488488
})
489489
export class SixDropdown {

‎libraries/ui-library-vue/src/lib/stencil-generated/components.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -240,6 +240,7 @@ export const SixDropdown: StencilVueComponent<JSX.SixDropdown> = /*@__PURE__*/ d
240240
'hoist',
241241
'containingElement',
242242
'filter',
243+
'noScroll',
243244
'asyncFilter',
244245
'filterPlaceholder',
245246
'autofocusFilter',

‎libraries/ui-library/src/components.d.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -772,6 +772,11 @@ export namespace Components {
772772
* @default false
773773
*/
774774
"matchTriggerWidth": boolean;
775+
/**
776+
* Set to true if you want to disable the default dropdown panel scroll behavior.
777+
* @default false
778+
*/
779+
"noScroll": boolean;
775780
/**
776781
* Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods.
777782
* @default false
@@ -4520,6 +4525,11 @@ declare namespace LocalJSX {
45204525
* @default false
45214526
*/
45224527
"matchTriggerWidth"?: boolean;
4528+
/**
4529+
* Set to true if you want to disable the default dropdown panel scroll behavior.
4530+
* @default false
4531+
*/
4532+
"noScroll"?: boolean;
45234533
/**
45244534
* Emitted when the async filter is triggered
45254535
*/

‎libraries/ui-library/src/components/six-dropdown/readme.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
| `filterPlaceholder` | `filter-placeholder` | The filter's placeholder text. | `string` | `'Filter...'` |
2121
| `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` |
2222
| `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` |
23+
| `noScroll` | `no-scroll` | Set to true if you want to disable the default dropdown panel scroll behavior. | `boolean` | `false` |
2324
| `open` | `open` | Indicates whether the dropdown is open. You can use this in lieu of the show/hide methods. | `boolean` | `false` |
2425
| `options` | `options` | Set the options to be shown in the dropdown (alternative to setting the elements via html) | `SixMenuItemData[]` | `[]` |
2526
| `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'` |

‎libraries/ui-library/src/components/six-dropdown/six-dropdown.tsx‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,15 @@ export class SixDropdown {
108108
*/
109109
@Prop() filter = false;
110110

111+
/**
112+
* Set to true if you want to disable the default dropdown panel scroll behavior.
113+
*/
114+
@Prop() noScroll = false;
115+
116+
get scrollEnabled() {
117+
return !this.noScroll;
118+
}
119+
111120
/**
112121
* Set to true to allow async filtering.
113122
* When you enter something in the search field the component will only emit an event but not filter any elements itself.
@@ -698,7 +707,7 @@ export class SixDropdown {
698707
)}
699708
<div
700709
class={{
701-
dropdown__panel__scroll: true,
710+
dropdown__panel__scroll: this.scrollEnabled,
702711
'dropdown__panel__scroll--virtual': this.virtualScroll,
703712
}}
704713
onScroll={this.handleDropdownScroll}

0 commit comments

Comments
 (0)