Fix issues with Quill TextEditor focus (#3393)

holoviz · Apr 15, 2022 · a46d415 · a46d415
1 parent d5d6870
commit a46d415
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 5 deletions.
diff --git a/panel/models/quill.py b/panel/models/quill.py
@@ -44,8 +44,6 @@ def __js_skip__(cls):
 
     placeholder = String()
 
-    readonly = Bool(False)
-
     text = String()
 
     toolbar = Either(List(Any), Bool)
diff --git a/panel/models/quill.ts b/panel/models/quill.ts
@@ -25,8 +25,10 @@ export class QuillInputView extends PanelHTMLBoxView {
       if (this._editing)
         return
       this._editing = true
+      this.quill.enable(false)
       this.quill.setContents([])
       this.quill.clipboard.dangerouslyPasteHTML(this.model.text)
+      this.quill.enable(!this.model.disabled)
       this._editing = false
     })
     const {mode, toolbar} = this.model.properties
@@ -54,6 +56,7 @@ export class QuillInputView extends PanelHTMLBoxView {
       modules: {
         toolbar: this.model.toolbar
       },
+      readOnly: true,
       placeholder: this.model.placeholder,
       theme: theme
     });
@@ -67,6 +70,8 @@ export class QuillInputView extends PanelHTMLBoxView {
       this.model.text = this._editor.innerHTML
       this._editing = false
     });
+    if (!this.model.disabled)
+      this.quill.enable(!this.model.disabled)
   }
 
   after_layout(): void {
@@ -81,7 +86,6 @@ export namespace QuillInput {
   export type Props = HTMLBox.Props & {
     mode:        p.Property<string>
     placeholder: p.Property<string>
-    readonly:    p.Property<boolean>
     text:        p.Property<string>
     toolbar:     p.Property<any>
   }
@@ -101,10 +105,9 @@ export class QuillInput extends HTMLBox {
   static init_QuillInput(): void {
     this.prototype.default_view = QuillInputView
 
-    this.define<QuillInput.Props>(({Any, Boolean, String}) => ({
+    this.define<QuillInput.Props>(({Any, String}) => ({
       mode:         [ String, 'toolbar' ],
       placeholder:  [ String,        '' ],
-      readonly:     [ Boolean,    false ],
       text:         [ String,        '' ],
       toolbar:      [ Any,         null ],
     }))