1 files changed, 16 insertions, 9 deletions

diff --git a/src/client/views/EditableView.tsx b/src/client/views/EditableView.tsx
index 4508d00a7..684b948af 100644
--- a/src/client/views/EditableView.tsx
+++ b/src/client/views/EditableView.tsx
@@ -1,3 +1,5 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable jsx-a11y/click-events-have-key-events */
 import { action, IReactionDisposer, makeObservable, observable, reaction, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -70,7 +72,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     constructor(props: EditableProps) {
         super(props);
         makeObservable(this);
-        this._editing = this._props.editing ? true : false;
+        this._editing = !!this._props.editing;
     }
 
     componentDidMount(): void {
@@ -121,6 +123,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
 
     @action
     onKeyDown = (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+        if (e.nativeEvent.defaultPrevented) return; // hack .. DashFieldView grabs native events, but react ignores stoppedPropagation and preventDefault, so we need to check it here
         switch (e.key) {
             case 'Tab':
                 e.stopPropagation();
@@ -165,7 +168,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     this._props.menuCallback(e.currentTarget.getBoundingClientRect().x, e.currentTarget.getBoundingClientRect().y);
                     break;
                 }
-
+            // eslint-disable-next-line no-fallthrough
             default:
                 if (this._props.textCallback?.(e.key)) {
                     e.stopPropagation();
@@ -185,7 +188,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                 this._editing = true;
                 this._props.isEditingCallback?.(true);
             }
-            // e.stopPropagation();
         }
     };
 
@@ -222,6 +224,7 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
     renderEditor() {
         return this._props.autosuggestProps ? (
             <Autosuggest
+                // eslint-disable-next-line react/jsx-props-no-spreading
                 {...this._props.autosuggestProps.autosuggestProps}
                 inputProps={{
                     className: 'editableView-input',
@@ -232,7 +235,6 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                     onPointerDown: this.stopPropagation,
                     onClick: this.stopPropagation,
                     onPointerUp: this.stopPropagation,
-                    onKeyPress: this.stopPropagation,
                     value: this._props.autosuggestProps.value,
                     // @ts-ignore
                     onChange: this._props.autosuggestProps.onChange,
@@ -241,12 +243,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         ) : this._props.oneLine !== false && this._props.GetValue()?.toString().indexOf('\n') === -1 ? (
             <input
                 className="editableView-input"
-                ref={r => (this._inputref = r)}
+                ref={r => { this._inputref = r; }} // prettier-ignore
                 style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minWidth: 20, background: this._props.background }}
                 placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this._props.GetValue()}
-                autoFocus={true}
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
                 onPointerDown={this.stopPropagation}
@@ -256,12 +259,13 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
         ) : (
             <textarea
                 className="editableView-input"
-                ref={r => (this._inputref = r)}
+                ref={r => { this._inputref = r; }} // prettier-ignore
                 style={{ display: this._props.display, overflow: 'auto', fontSize: this._props.fontSize, minHeight: `min(100%, ${(this._props.GetValue()?.split('\n').length || 1) * 15})`, minWidth: 20, background: this._props.background }}
                 placeholder={this._props.placeholder}
                 onBlur={e => this.finalizeEdit(e.currentTarget.value, false, true, false)}
                 defaultValue={this._props.GetValue()}
-                autoFocus={true}
+                // eslint-disable-next-line jsx-a11y/no-autofocus
+                autoFocus
                 onChange={this.onChange}
                 onKeyDown={this.onKeyDown}
                 onPointerDown={this.stopPropagation}
@@ -304,7 +308,10 @@ export class EditableView extends ObservableReactComponent<EditableProps> {
                         fontStyle: this._props.fontStyle,
                         fontSize: this._props.fontSize,
                     }}>
-                    {this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''}
+                    {
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        this._props.fieldContents ? <FieldView {...this._props.fieldContents} /> : this.props.contents ? this._props.contents?.valueOf() : ''
+                    }
                 </span>
             </div>
         );