LP2084166 MARC edit keyboard fix: up, down, CTRL-D

Fixes broken keyboard shortcut behavior in the MARC rich editor:

In tags, indicators, and subfield codes, fixes the up/down arrow keys to
move focus to the adjacent row as expected. CTRL-D now prevents browser
default behavior (bookmarking the page).

Also removes vestigial context menu code, which could cause obsolete
contextual menus to appear in some editable fields.

Release-note: Fixes up/down arrows, CTRL-D, context menus in MARC editor

Signed-off-by: Stephanie Leary <[email protected]>
Signed-off-by: Joni Paxton <[email protected]>
Signed-off-by: Michele Morgan <[email protected]>

Author: stephanieleary

Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.html

@@ -59,7 +59,6 @@
     [ngClass]="{'auth-invalid': isAuthInvalid()}"
     tabindex="{{tabindex}}"
     [attr.aria-label]="ariaLabel"
-    [egContextMenu]="contextMenuEntries()"
     (menuItemSelected)="contextMenuChange($event.value)"
     (keydown)="inputKeyDown($event)"
     (focus)="selectText()"

Open-ILS/src/eg2/src/app/staff/share/marc-edit/editable-content.component.ts

@@ -5,7 +5,6 @@ import {filter, debounceTime, distinctUntilChanged, map} from 'rxjs/operators';
 import {MarcRecord, MarcField, MarcSubfield} from './marcrecord';
 import {MarcEditContext, FieldFocusRequest, MARC_EDITABLE_FIELD_TYPE,
     TextUndoRedoAction} from './editor-context';
-import {ContextMenuEntry} from '@eg/share/context-menu/context-menu.service';
 import {StringComponent} from '@eg/share/string/string.component';
 import {TagTable} from './tagtable.service';
 import {ComboboxComponent, ComboboxEntry} from '@eg/share/combobox/combobox.component';
@@ -71,9 +70,6 @@ implements OnInit, AfterViewInit, OnDestroy {
     // Cache of fixed field menu options
     ffValues: ComboboxEntry[] = [];
 
-    // Cache of context menu entries
-    tagMenuEntries: ContextMenuEntry[] = [];
-
     // Cache of tag combobox entries
     tagComboListEntries: ComboboxEntry[] = [];
 
@@ -365,66 +361,6 @@ implements OnInit, AfterViewInit, OnDestroy {
         return null;
     }
 
-
-    // These are served dynamically to handle cases where a tag or
-    // subfield is modified in place.
-    contextMenuEntries(): ContextMenuEntry[] {
-        if (this.isLeader) { return; }
-
-        switch (this.fieldType) {
-            case 'tag':
-                return this.tagContextMenuEntries();
-
-            case 'sfc':
-                return this.tt().getSubfieldCodes(this.field.tag);
-
-            case 'sfv':
-                return this.tt().getSubfieldValues(
-                    this.field.tag, this.subfield[0]);
-
-            case 'ind1':
-            case 'ind2':
-                return this.tt().getIndicatorValues(
-                    this.field.tag, this.fieldType);
-
-            case 'ffld':
-                return this.tt().getFfValues(this.fixedFieldCode);
-        }
-
-        return null;
-    }
-
-    tagContextMenuEntries(): ContextMenuEntry[] {
-
-        // string components may not yet be loaded.
-        if (this.tagMenuEntries.length > 0 || !this.add006Str) {
-            return this.tagMenuEntries;
-        }
-
-        this.tagMenuEntries.push(
-            {label: this.add006Str.text, value: '_add006'},
-            {label: this.add007Str.text, value: '_add007'},
-            {label: this.add008Str.text, value: '_add008'}
-        );
-
-        if (!this.field.isCtrlField) {
-            // Only data field tags get these.
-            this.tagMenuEntries.push(
-                {label: this.insertAfterStr.text,  value: '_insertAfter'},
-                {label: this.insertBeforeStr.text, value: '_insertBefore'}
-            );
-        }
-
-        this.tagMenuEntries.push(
-            {label: this.deleteFieldStr.text,  value: '_deleteField'},
-            {divider: true}
-        );
-
-        this.tt().getFieldTags().forEach(e => this.tagMenuEntries.push(e));
-
-        return this.tagMenuEntries;
-    }
-
     getContent(): string {
 
         switch (this.fieldType) {
@@ -581,13 +517,15 @@ implements OnInit, AfterViewInit, OnDestroy {
                 if (evt.ctrlKey) { // redo
                     this.context.requestRedo();
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
 
             case 'z':
                 if (evt.ctrlKey) { // undo
                     this.context.requestUndo();
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
 
@@ -632,8 +570,10 @@ implements OnInit, AfterViewInit, OnDestroy {
                 }
 
                 // down == move focus to tag of next field
-                // but not in a combobox or textarea
-                if (!evt.ctrlKey && !this.suggest && !this.bigText) {
+                // but not in an open combobox or textarea
+                if (!evt.ctrlKey && !this.TagComboBox?.instance.isPopupOpen() && !this.bigText) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
                     // avoid dupe focus requests during copy
                     this.context.focusNextTag(this.field);
                 }
@@ -652,8 +592,10 @@ implements OnInit, AfterViewInit, OnDestroy {
                 }
 
                 // up == move focus to tag of previous field
-                // but not in a combobox or textarea
-                if (!evt.ctrlKey && !this.suggest && !this.bigText) {
+                // but not in an open combobox or textarea
+                if (!evt.ctrlKey && !this.TagComboBox?.instance.isPopupOpen() && !this.bigText) {
+                    evt.preventDefault();
+                    evt.stopPropagation();
                     // avoid dupe focus requests
                     this.context.focusPreviousTag(this.field);
                 }
@@ -675,6 +617,7 @@ implements OnInit, AfterViewInit, OnDestroy {
                 }
 
                 evt.preventDefault(); // Bare newlines not allowed.
+                evt.stopPropagation();
                 break;
 
             case 'Delete':
@@ -683,6 +626,7 @@ implements OnInit, AfterViewInit, OnDestroy {
                     // ctrl+delete == delete whole field
                     this.context.deleteField(this.field);
                     evt.preventDefault();
+                    evt.stopPropagation();
 
                 } else if (evt.shiftKey) {
 
@@ -694,6 +638,7 @@ implements OnInit, AfterViewInit, OnDestroy {
                     // prevent any shift-delete from bubbling up becuase
                     // unexpected stuff will be deleted.
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
 
                 break;
@@ -705,6 +650,7 @@ implements OnInit, AfterViewInit, OnDestroy {
                     const pos = this.subfield ? this.subfield[2] + 1 : 0;
                     this.context.insertStubSubfield(this.field, pos);
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
         }
@@ -713,7 +659,7 @@ implements OnInit, AfterViewInit, OnDestroy {
 
     // if the user has added the max number of characters for the field, advance focus to the next input
     // NOT USED
-    // TODO: to use, add (input)="inputEvent(inputSize(), $event)" to eg-combobox
+    // TODO: to use, add (input)="inputEvent(inputSize (), $event)" to eg-combobox
     skipToNext(max: number, $event?: InputEvent) {
         if ($event.data.length === max) {
             switch (this.fieldType) {
@@ -776,25 +722,6 @@ implements OnInit, AfterViewInit, OnDestroy {
         this.context.requestFieldFocus(focus);
     }
 
-    contextMenuChange(value: string) {
-
-        switch (value) {
-            case '_add006': return this.context.add00X('006');
-            case '_add007': return this.context.add00X('007');
-            case '_add008': return this.context.insertReplace008();
-            case '_insertBefore':
-                return this.context.insertStubField(this.field, true);
-            case '_insertAfter':
-                return this.context.insertStubField(this.field);
-            case '_deleteField': return this.context.deleteField(this.field);
-        }
-
-        this.setContent(value, true);
-
-        // Context menus can steal focus.
-        this.context.requestFieldFocus(this.context.lastFocused);
-    }
-
     isAuthInvalid(): boolean {
         return (
             this.fieldType === 'sfv' &&

Open-ILS/src/eg2/src/app/staff/share/marc-edit/rich-editor.component.ts

@@ -221,13 +221,15 @@ export class MarcRichEditorComponent implements OnInit {
                 if (evt.ctrlKey) { // redo
                     this.context.requestRedo();
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
 
             case 'z':
                 if (evt.ctrlKey) { // undo
                     this.context.requestUndo();
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
 
@@ -268,8 +270,7 @@ export class MarcRichEditorComponent implements OnInit {
 
                 // down == move focus to tag of next field
                 // but not in a combobox or textarea
-                if (!evt.ctrlKey) {
-                    // avoid dupe focus requests during copy
+                if (!evt.ctrlKey && !(subfield && this.context.subfieldHasFocus(field, subfield))) {
                     this.context.focusNextTag(field);
                 }
                 break;
@@ -283,9 +284,8 @@ export class MarcRichEditorComponent implements OnInit {
                 }
 
                 // up == move focus to tag of previous field
-                // but not in a combobox or textarea
-                if (!evt.ctrlKey) {
-                    // avoid dupe focus requests
+                // but not in a subfield
+                if (!evt.ctrlKey && !(subfield && this.context.subfieldHasFocus(field, subfield))) {
                     this.context.focusPreviousTag(field);
                 }
                 break;
@@ -308,7 +308,7 @@ export class MarcRichEditorComponent implements OnInit {
                     // ctrl+delete == delete whole field
                     this.context.deleteField(field);
                     evt.preventDefault();
-
+                    evt.stopPropagation();
                 } else if (evt.shiftKey) {
 
                     if (subfield) {
@@ -319,6 +319,7 @@ export class MarcRichEditorComponent implements OnInit {
                     // prevent any shift-delete from bubbling up becuase
                     // unexpected stuff will be deleted.
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
 
                 break;
@@ -330,6 +331,7 @@ export class MarcRichEditorComponent implements OnInit {
                     const pos = subfield ? subfield[2] + 1 : 0;
                     this.context.insertStubSubfield(field, pos);
                     evt.preventDefault();
+                    evt.stopPropagation();
                 }
                 break;
         }