From 2dbb92d4acd10eb9e67e2ac6d9625c237b162c62 Mon Sep 17 00:00:00 2001 From: Bill Erickson Date: Wed, 9 Dec 2020 14:04:52 -0500 Subject: [PATCH] LP1907115 MARC editor avoid ID collisions Generate DOM IDs for editable content components via incrementing int instead of a random int. This addresses cases where records with higher numbers of MARC fields could result id DOM ID collisions, leading to empty subfield values. Also remove use of Renderer2, which is considered harmful and overkill for simple document.getElementById()-equivalent calls. Signed-off-by: Bill Erickson Signed-off-by: Elaine Hardy Signed-off-by: Jane Sandberg --- .../app/staff/share/marc-edit/editable-content.component.ts | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts index 2b06e6031d..8886c8520a 100644 --- a/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts +++ b/Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts @@ -1,5 +1,5 @@ import {ElementRef, Component, Input, Output, OnInit, OnDestroy, - ViewChild, EventEmitter, AfterViewInit, Renderer2} from '@angular/core'; + ViewChild, EventEmitter, AfterViewInit} from '@angular/core'; import {Subscription} from 'rxjs'; import {filter} from 'rxjs/operators'; import {MarcRecord, MarcField, MarcSubfield} from './marcrecord'; @@ -22,6 +22,8 @@ import {TagTable} from './tagtable.service'; export class EditableContentComponent implements OnInit, AfterViewInit, OnDestroy { + static idGen = 0; + @Input() context: MarcEditContext; @Input() field: MarcField; @Input() fieldType: MARC_EDITABLE_FIELD_TYPE = null; @@ -43,7 +45,7 @@ export class EditableContentComponent get record(): MarcRecord { return this.context.record; } bigText = false; - randId = Math.floor(Math.random() * 100000); + randId = 'editable-content-' + EditableContentComponent.idGen++; editInput: any; // or
maxLength: number = null; @@ -73,8 +75,6 @@ export class EditableContentComponent @ViewChild('insertAfter', {static: false}) insertAfterStr: StringComponent; @ViewChild('deleteField', {static: false}) deleteFieldStr: StringComponent; - constructor(private renderer: Renderer2) {} - tt(): TagTable { // for brevity return this.context.tagTable; } @@ -387,8 +387,7 @@ export class EditableContentComponent } ngAfterViewInit() { - this.editInput = // numeric id requires [id=...] query selector - this.renderer.selectRootElement(`[id='${this.randId}']`); + this.editInput = document.getElementById(this.randId + ''); // Initialize the editable div this.editInput.innerText = this.getContent(); -- 2.11.0