fix(dropdown): allow setting custom tabindex on items (#4626)

Fixes #4592

src/dropdown/dropdown.spec.ts

@@ -332,6 +332,23 @@ describe('ngb-dropdown', () => {
 		expect(itemEl.tabIndex).toBe(-1);
 	});
 
+	it('should allow using custom tabindex on a dropdown item', () => {
+		const html = `
+			<button ngbDropdownItem>one</button>
+			<button ngbDropdownItem disabled>two</button>
+			<button ngbDropdownItem tabindex='3'>three</button>
+			<button ngbDropdownItem tabindex='2' disabled>four</button>
+		`;
+
+		const fixture = createTestComponent(html);
+		const [one, two, three, four] = Array.from(fixture.nativeElement.querySelectorAll('button')) as HTMLButtonElement[];
+
+		expect(one.tabIndex).toBe(0);
+		expect(two.tabIndex).toBe(-1);
+		expect(three.tabIndex).toBe(3);
+		expect(four.tabIndex).toBe(-1);
+	});
+
 	it('should disable a link dropdown item', () => {
 		const html = `<a ngbDropdownItem [disabled]="disabled">dropDown item</a>`;
 

src/dropdown/dropdown.ts

@@ -39,7 +39,11 @@ import { getActiveElement } from '../util/util';
 @Directive({
 	selector: '[ngbDropdownItem]',
 	standalone: true,
-	host: { class: 'dropdown-item', '[class.disabled]': 'disabled', '[tabIndex]': 'disabled ? -1 : 0' },
+	host: {
+		class: 'dropdown-item',
+		'[class.disabled]': 'disabled',
+		'[tabIndex]': 'disabled ? -1 : tabindex',
+	},
 })
 export class NgbDropdownItem {
 	static ngAcceptInputType_disabled: boolean | '';
@@ -48,6 +52,8 @@ export class NgbDropdownItem {
 
 	nativeElement = inject(ElementRef).nativeElement as HTMLElement;
 
+	@Input() tabindex: string | number = 0;
+
 	@Input()
 	set disabled(value: boolean) {
 		this._disabled = <any>value === '' || value === true; // accept an empty attribute as true