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 <berickxx@gmail.com>
Signed-off-by: Elaine Hardy <ehardy@georgialibraries.org>
Signed-off-by: Jane Sandberg <sandbej@linnbenton.edu>

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 2b06e60..8886c85 100644 (file)
--- 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,
 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';
 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 {
 
 export class EditableContentComponent
     implements OnInit, AfterViewInit, OnDestroy {
 

+    static idGen = 0;
+

     @Input() context: MarcEditContext;
     @Input() field: MarcField;
     @Input() fieldType: MARC_EDITABLE_FIELD_TYPE = null;
     @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;
     get record(): MarcRecord { return this.context.record; }
 
     bigText = false;

-    randId = Math.floor(Math.random() * 100000);
+    randId = 'editable-content-' + EditableContentComponent.idGen++;

     editInput: any; // <input/> or <div contenteditable/>
     maxLength: number = null;
 
     editInput: any; // <input/> or <div contenteditable/>
     maxLength: number = null;
 


@@ -73,8 +75,6 @@ export class EditableContentComponent
     @ViewChild('insertAfter', {static: false}) insertAfterStr: StringComponent;
     @ViewChild('deleteField', {static: false}) deleteFieldStr: StringComponent;
 
     @ViewChild('insertAfter', {static: false}) insertAfterStr: StringComponent;
     @ViewChild('deleteField', {static: false}) deleteFieldStr: StringComponent;
 

-    constructor(private renderer: Renderer2) {}
-

     tt(): TagTable { // for brevity
         return this.context.tagTable;
     }
     tt(): TagTable { // for brevity
         return this.context.tagTable;
     }


@@ -387,8 +387,7 @@ export class EditableContentComponent
     }
 
     ngAfterViewInit() {
     }
 
     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();
 
         // Initialize the editable div
         this.editInput.innerText = this.getContent();