Further work-around for setting importation file picking inconsistencies on Android.

3 files changed, 22 insertions, 5 deletions

diff --git a/src/ui/options.css b/src/ui/options.css
index ca64859..652a9bf 100644
--- a/src/ui/options.css
+++ b/src/ui/options.css
@@ -129,8 +129,20 @@ button.add {
   font-weight: bold;
 }
 
-input[type="file"] {
-  display: none;
+#import-container {
+  position: relative;
+}
+#file-import {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  -moz-appearance: none;
+  appearance: none;
 }
 
 .opt-group {
diff --git a/src/ui/options.html b/src/ui/options.html
index 5053ef7..1ccc62f 100644
--- a/src/ui/options.html
+++ b/src/ui/options.html
@@ -24,8 +24,10 @@
 </div>
 
 <div class="buttons">
-<span><input id="file-import" type="file"/></span>
+<div id="import-container">
+  <input id="file-import" type="file" name="file-import" tabindex="-1" accept=".txt,.json"/>
 <button id="btn-import" accesskey="__MSG_Import_accesskey__">__MSG_Import__</button>
+</div>
 <button id="btn-export" accesskey="__MSG_Export_accesskey__">__MSG_Export__</button>
 <button id="btn-reset" accesskey="__MSG_Reset_accesskey__">__MSG_Reset__</button>
 </div>
diff --git a/src/ui/options.js b/src/ui/options.js
index 4588330..75f1280 100644
--- a/src/ui/options.js
+++ b/src/ui/options.js
@@ -61,8 +61,11 @@
       fr.readAsText(fileInput.files[0]);
     }
 
-    document.querySelector("#btn-import").addEventListener("click",
-      () => fileInput.click());
+    document.querySelector("#btn-import").addEventListener("click", async e => {
+      fileInput.focus();
+      fileInput.click();
+      e.target.focus();
+    });
 
     document.querySelector("#btn-export").addEventListener("click", async e => {
       let button = e.target;