feat: add option to disable modal inputs on mobile (#6625)

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;

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(

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);

tests/mocha/field_textinput_test.js

@@ -173,6 +173,7 @@ suite('Text Input Fields', function() {
               };
             },
             markFocused: function() {},
+            options: {},
           };
           field.sourceBlock_ = {
             workspace: workspace,