Mobile focus: tapping on the bottom area does not open the device keyboard

[antoineol]

On mobile, tapping on the bottom area (the 300px bottom padding) does not open the device keyboard. On Android, it seems to set the focus, but doesn't open the keyboard. On iOS, I'm not sure, but it might not even set the focus.

Steps to reproduce:

1. Open the online demo on a mobile device (Android, iOS as well I think): https://editorjs.io/
2. Tap outside the editor to remove the focus
3. Tap in the big white bottom area under the first block (don't tap the block itself)
4. The focus is set on Android, but the keyboard is not opened. On iOS, I'm not even sure the focus is set (TBC).

As a workaround, I tried something like the following (simplified - React), which gives acceptable results on Android, but not on iOS (need to tap twice to get the focus+keyboard):

          onReady: () => {
            const redactor =
              holderRef.current?.querySelector<HTMLElement>('.codex-editor__redactor');
            const handleClick = (e: MouseEvent) => {
              if (e.target === redactor) {
                let lastBlock = editor.blocks.getBlockByIndex(editor.blocks.getBlocksCount() - 1);
                if (!lastBlock?.isEmpty) {
                  lastBlock = editor.blocks.insert('paragraph');
                }

                const editable = lastBlock.holder.querySelector<HTMLElement>('[contenteditable]');
                editable?.focus();
                editable?.click();
                e.preventDefault();
                e.stopImmediatePropagation();
                setTimeout(() => {
                  // Attempt to force the focus and open keyboard on iOS -- KO
                  editable?.focus();
                  editable?.click();
                });
                setTimeout(() => {
                  editable?.focus();
                  editable?.click();
                }, 50);
                focusAtTheEnd(editor, e);
              }
            };
            redactor?.addEventListener('click', handleClick, { capture: true });
          }

Expected behavior:

Tap anywhere in the editor, it sets the focus and opens the device keyboard.

Device, Browser, OS:

• Android: Chrome 114
• iOS: latest iOS and Safari version when testing (16.5 I believe)

Editor.js version and plugins: Your online demo