HTML dialog polyfill

package.json

@@ -26,6 +26,7 @@
     "typescript": "^4.4.3"
   },
   "dependencies": {
+    "dialog-polyfill": "^0.5.6",
     "jsonwebtoken": "^8.5.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"

src/App.tsx

@@ -1,4 +1,5 @@
 import React, {useState} from "react";
+import dialogPolyfill from "dialog-polyfill";
 
 import "./App.scss";
 import {SaiEntryProps, JutEntryProps, ElesuEntryProps, TukEntryProps, Conlang, SearchDirection} from "./types";
@@ -8,15 +9,18 @@ import {setPassword, searchEntry} from "./requests";
 const PasswordDialog = (_props) => {
     const [password, setPasswordStr] = useState("");
 
-    const modal = (): any => document.querySelector(".passwordDialog");
     const save = () => {
         setPassword(password);
-        modal().close();
+        const modal: any = document.querySelector(".passwordDialog");
+        dialogPolyfill.registerDialog(modal);
+        modal.close();
         location.reload(); // TODO this is a hack
     };
 
     const cancel = () => {
-        modal().close();
+        const modal: any = document.querySelector(".passwordDialog");
+        dialogPolyfill.registerDialog(modal);
+        modal.close();
     };
 
     return (
@@ -105,7 +109,7 @@ const Results = (props: ResultsProps) => {
 
 const convertSearchBoxShorthand = (input: string, conlang: Conlang): string => {
     if (conlang === Conlang.Saimiar) {
-        return input
+        return (input as any)
             .replaceAll(/ee/g, "ê")
             .replaceAll(/oo/g, "ô")
             .replaceAll(/o'/g, "ø")
@@ -160,6 +164,7 @@ const App = (_props) => {
 
     const showPasswordBox = () => {
         const modal: any = document.querySelector(".passwordDialog");
+        dialogPolyfill.registerDialog(modal);
         modal.showModal();
     };
 

src/types.ts

@@ -16,6 +16,8 @@ interface SaiEntryProps {
     eng: string;
     syn_category: string;
     morph_type: string;
+    etym: string;
+    semantic_field: string;
     notes: string;
 }
 

yarn.lock

@@ -2088,6 +2088,11 @@ detect-libc@^1.0.3:
   resolved "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
+dialog-polyfill@^0.5.6:
+  version "0.5.6"
+  resolved "https://registry.yarnpkg.com/dialog-polyfill/-/dialog-polyfill-0.5.6.tgz#7507b4c745a82fcee0fa07ce64d835979719599a"
+  integrity sha512-ZbVDJI9uvxPAKze6z146rmfUZjBqNEwcnFTVamQzXH+svluiV7swmVIGr7miwADgfgt1G2JQIytypM9fbyhX4w==
+
 diffie-hellman@^5.0.0:
   version "5.0.3"
   resolved "https://registry.npmjs.org/diffie-hellman/-/diffie-hellman-5.0.3.tgz"