From be4b8323c5a8049fadbaa0be5a59ee8a94832b54 Mon Sep 17 00:00:00 2001
From: Maribeth Bottorff <maribethb@google.com>
Date: Tue, 22 Nov 2022 11:52:46 -0800
Subject: [PATCH] feat: add option to disable modal inputs on mobile (#6625)

---
 core/blockly_options.ts             |  1 +
 core/field_input.ts                 | 10 +++++++---
 core/options.ts                     |  7 +++++++
 tests/mocha/field_textinput_test.js |  1 +
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/core/blockly_options.ts b/core/blockly_options.ts
index 0cf4c851d..8933bd637 100644
--- a/core/blockly_options.ts
+++ b/core/blockly_options.ts
@@ -32,6 +32,7 @@ export interface BlocklyOptions {
   maxBlocks?: number;
   maxInstances?: {[blockType: string]: number};
   media?: string;
+  modalInputs?: boolean;
   move?: MoveOptions;
   oneBasedIndex?: boolean;
   readOnly?: boolean;
diff --git a/core/field_input.ts b/core/field_input.ts
index fe58b91d3..78fd63c7d 100644
--- a/core/field_input.ts
+++ b/core/field_input.ts
@@ -273,7 +273,10 @@ export abstract class FieldInput<T extends InputTypes> extends Field<T> {
   }
 
   /**
-   * Show the inline free-text editor on top of the text.
+   * Show an editor for the field.
+   * Shows the inline free-text editor on top of the text by default.
+   * Shows a prompt editor for mobile browsers if the modalInputs option is
+   * enabled.
    *
    * @param _opt_e Optional mouse event that triggered the field to open, or
    *     undefined if triggered programmatically.
@@ -283,7 +286,7 @@ export abstract class FieldInput<T extends InputTypes> extends Field<T> {
   protected override showEditor_(_opt_e?: Event, opt_quietInput?: boolean) {
     this.workspace_ = (this.sourceBlock_ as BlockSvg).workspace;
     const quietInput = opt_quietInput || false;
-    if (!quietInput &&
+    if (!quietInput && this.workspace_.options.modalInputs &&
         (userAgent.MOBILE || userAgent.ANDROID || userAgent.IPAD)) {
       this.showPromptEditor_();
     } else {
@@ -293,7 +296,8 @@ export abstract class FieldInput<T extends InputTypes> extends Field<T> {
 
   /**
    * Create and show a text input editor that is a prompt (usually a popup).
-   * Mobile browsers have issues with in-line textareas (focus and keyboards).
+   * Mobile browsers may have issues with in-line textareas (focus and
+   * keyboards).
    */
   private showPromptEditor_() {
     dialog.prompt(
diff --git a/core/options.ts b/core/options.ts
index c1efdee25..92fd7182e 100644
--- a/core/options.ts
+++ b/core/options.ts
@@ -38,6 +38,7 @@ export class Options {
   readOnly: boolean;
   maxBlocks: number;
   maxInstances: {[key: string]: number}|null;
+  modalInputs: boolean;
   pathToMedia: string;
   hasCategories: boolean;
   moveOptions: MoveOptions;
@@ -155,6 +156,11 @@ export class Options {
 
     const plugins = options['plugins'] || {};
 
+    let modalInputs = options['modalInputs'];
+    if (modalInputs === undefined) {
+      modalInputs = true;
+    }
+
     this.RTL = rtl;
     this.oneBasedIndex = oneBasedIndex;
     this.collapse = hasCollapse;
@@ -163,6 +169,7 @@ export class Options {
     this.readOnly = readOnly;
     this.maxBlocks = options['maxBlocks'] || Infinity;
     this.maxInstances = options['maxInstances'] ?? null;
+    this.modalInputs = modalInputs;
     this.pathToMedia = pathToMedia;
     this.hasCategories = hasCategories;
     this.moveOptions = Options.parseMoveOptions_(options, hasCategories);
diff --git a/tests/mocha/field_textinput_test.js b/tests/mocha/field_textinput_test.js
index f37e6d885..cf5b9c26d 100644
--- a/tests/mocha/field_textinput_test.js
+++ b/tests/mocha/field_textinput_test.js
@@ -173,6 +173,7 @@ suite('Text Input Fields', function() {
               };
             },
             markFocused: function() {},
+            options: {},
           };
           field.sourceBlock_ = {
             workspace: workspace,