[PER-10762] Give each inline value editor its own field id and turn off autofill

src/app/shared/components/inline-value-edit/inline-value-edit.component.html

@@ -7,7 +7,10 @@
 						tabindex="0"
 						(focus)="startEdit()"
 						type="text"
-						name="text"
+						[id]="inputElementId"
+						[name]="inputElementId"
+						[attr.name]="inputElementId"
+						autocomplete="off"
 						class="form-control"
 						[class.is-editing]="isEditing"
 						[(ngModel)]="editValue"
@@ -65,7 +68,10 @@
 					<textarea
 						tabindex="0"
 						(focus)="startEdit()"
-						name="textarea"
+						[id]="inputElementId"
+						[name]="inputElementId"
+						[attr.name]="inputElementId"
+						autocomplete="off"
 						class="form-control"
 						[class.is-editing]="isEditing"
 						[attr.maxlength]="maxLength > 0 ? maxLength : null"
@@ -125,7 +131,10 @@
 				@if (isEditing) {
 					<div class="inline-value-container" [class.can-edit]="canEdit">
 						<textarea
-							name="textarea"
+							[id]="inputElementId"
+							[name]="inputElementId"
+							[attr.name]="inputElementId"
+							autocomplete="off"
 							class="form-control"
 							[class.is-editing]="isEditing"
 							[attr.maxlength]="maxLength > 0 ? maxLength : null"
@@ -258,7 +267,10 @@
 					[class.showing-empty-message]="!displayValue && emptyMessage"
 				>
 					<select
-						name="select"
+						[id]="inputElementId"
+						[name]="inputElementId"
+						[attr.name]="inputElementId"
+						autocomplete="off"
 						class="form-select"
 						#input
 						#model="ngModel"

src/app/shared/components/inline-value-edit/inline-value-edit.component.spec.ts

@@ -25,7 +25,10 @@ import {
 	applyTimezoneOffset,
 } from '@shared/utilities/dateTime';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { InlineValueEditComponent } from './inline-value-edit.component';
+import {
+	InlineValueEditComponent,
+	InlineValueEditType,
+} from './inline-value-edit.component';
 
 describe('InlineValueEditComponent', () => {
 	let component: InlineValueEditComponent;
@@ -462,6 +465,40 @@ describe('InlineValueEditComponent', () => {
 		expect(component.isEditing).toBeTrue();
 	});
 
+	it('should disable browser autofill on every editable control type', () => {
+		const controlSelectorsByType: Array<[InlineValueEditType, string]> = [
+			['text', 'input'],
+			['textarea', 'textarea'],
+			['select', 'select'],
+		];
+
+		for (const [type, selector] of controlSelectorsByType) {
+			const typeFixture = TestBed.createComponent(InlineValueEditComponent);
+			typeFixture.componentInstance.type = type;
+			typeFixture.detectChanges();
+
+			const control = typeFixture.debugElement.query(By.css(selector))
+				.nativeElement as HTMLElement;
+
+			expect(control.getAttribute('autocomplete')).toBe('off');
+		}
+	});
+
+	it('should give each instance a unique control id and name', () => {
+		const otherFixture = TestBed.createComponent(InlineValueEditComponent);
+		otherFixture.detectChanges();
+
+		const input = fixture.debugElement.query(By.css('input'))
+			.nativeElement as HTMLInputElement;
+		const otherInput = otherFixture.debugElement.query(By.css('input'))
+			.nativeElement as HTMLInputElement;
+
+		expect(input.id).toBeTruthy();
+		expect(input.id).toBe(input.name);
+		expect(otherInput.id).toBe(otherInput.name);
+		expect(input.id).not.toBe(otherInput.id);
+	});
+
 	it('should NOT start editing when clicking on a link', () => {
 		component.canEdit = true;
 		component.type = 'textarea';

src/app/shared/components/inline-value-edit/inline-value-edit.component.ts

@@ -39,6 +39,9 @@ export type InlineValueEditType =
 	| 'external';
 
 type ValueType = string | number;
+
+let inlineValueEditInstanceCount = 0;
+
 @Component({
 	selector: 'pr-inline-value-edit',
 	templateUrl: './inline-value-edit.component.html',
@@ -81,6 +84,8 @@ export class InlineValueEditComponent implements OnInit, OnChanges {
 	@ViewChild(NgModel) ngModel: NgModel;
 	@ViewChild('datePicker') datePicker: NgbDatepicker;
 
+	readonly inputElementId = `inline-value-edit-${(inlineValueEditInstanceCount += 1)}`;
+
 	isEditing = false;
 	editValue: ValueType;
 	ngbTime: NgbTimeStruct;