Fix: handle overflowing dropdowns on mobile (#7758)

See https://github.com/ng-bootstrap/ng-bootstrap/pull/4760
This commit is contained in:
shamoon 2024-09-23 10:29:37 -07:00 committed by GitHub
parent 3aba68c09f
commit 870d6ee782
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 56 additions and 2 deletions

View File

@ -1,4 +1,4 @@
<div class="btn-group w-100" ngbDropdown role="group">
<div class="btn-group w-100" ngbDropdown role="group" [popperOptions]="popperOptions">
<button class="btn btn-sm" id="dropdown{{title}}" ngbDropdownToggle [ngClass]="createdDateBefore || createdDateAfter ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
<i-bs width="1em" height="1em" name="calendar-event-fill"></i-bs>
<div class="d-none d-sm-inline">&nbsp;{{title}}</div>

View File

@ -11,6 +11,7 @@ import { Subject, Subscription } from 'rxjs'
import { debounceTime } from 'rxjs/operators'
import { SettingsService } from 'src/app/services/settings.service'
import { ISODateAdapter } from 'src/app/utils/ngb-iso-date-adapter'
import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
export interface DateSelection {
createdBefore?: string
@ -35,6 +36,8 @@ export enum RelativeDate {
providers: [{ provide: NgbDateAdapter, useClass: ISODateAdapter }],
})
export class DatesDropdownComponent implements OnInit, OnDestroy {
public popperOptions = popperOptionsReenablePreventOverflow
constructor(settings: SettingsService) {
this.datePlaceHolder = settings.getLocalizedDateInputFormat()
}

View File

@ -1,4 +1,4 @@
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)" [popperOptions]="popperOptions">
<button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
<i-bs name="{{icon}}"></i-bs>
<div class="d-none d-sm-inline">&nbsp;{{title}}</div>

View File

@ -16,6 +16,7 @@ import { Subject, filter, take, takeUntil } from 'rxjs'
import { SelectionDataItem } from 'src/app/services/rest/document.service'
import { ObjectWithPermissions } from 'src/app/data/object-with-permissions'
import { HotKeyService } from 'src/app/services/hot-key.service'
import { popperOptionsReenablePreventOverflow } from 'src/app/utils/popper-options'
export interface ChangedItems {
itemsToAdd: MatchingModel[]
@ -330,6 +331,8 @@ export class FilterableDropdownComponent implements OnDestroy, OnInit {
@ViewChild('dropdown') dropdown: NgbDropdown
@ViewChild('buttonItems') buttonItems: ElementRef
public popperOptions = popperOptionsReenablePreventOverflow
filterText: string
@Input()

View File

@ -0,0 +1,24 @@
import { popperOptionsReenablePreventOverflow } from './popper-options'
import { Options } from '@popperjs/core'
describe('popperOptionsReenablePreventOverflow', () => {
it('should return the config without the empty fun preventOverflow, add padding to other', () => {
const config: Partial<Options> = {
modifiers: [
{ name: 'preventOverflow', fn: function () {} },
{
name: 'preventOverflow',
fn: function () {
return
},
},
],
}
const result = popperOptionsReenablePreventOverflow(config)
expect(result.modifiers.length).toBe(1)
expect(result.modifiers[0].name).toBe('preventOverflow')
expect(result.modifiers[0].options).toEqual({ padding: 10 })
})
})

View File

@ -0,0 +1,24 @@
import { Options } from '@popperjs/core'
export function popperOptionsReenablePreventOverflow(
config: Partial<Options>
): Partial<Options> {
const preventOverflowModifier = config.modifiers?.find(
(m) => m.name === 'preventOverflow' && m.fn?.length === 0
)
if (preventOverflowModifier) {
config.modifiers.splice(
config.modifiers.indexOf(preventOverflowModifier),
1
)
}
const ogPreventOverflowModifier = config.modifiers.find(
(m) => m.name === 'preventOverflow'
)
if (ogPreventOverflowModifier) {
ogPreventOverflowModifier.options = {
padding: 10,
}
}
return config
}