Fixes #432

src/App/Utilities/Activatable/activatableInactiveViewUtils.tsx

@@ -5,7 +5,7 @@ import { Functn, ident } from "../../../Data/Function"
 import { fmap, fmapF } from "../../../Data/Functor"
 import { over, set } from "../../../Data/Lens"
 import { cons, countWith, elemF, filter, find, flength, foldr, imap, isList, List, map, notElem, notElemF, notNull, subscriptF, sum, take } from "../../../Data/List"
-import { alt, altF, altF_, any, bind, bindF, ensure, fromJust, fromMaybe, guard, isJust, isNothing, join, joinMaybeList, Just, liftM2, mapMaybe, Maybe, maybe, Nothing, or, then, thenF } from "../../../Data/Maybe"
+import { alt, altF, altF_, any, bind, bindF, ensure, fromJust, fromMaybe, guard, isJust, isNothing, join, joinMaybeList, Just, liftM2, mapMaybe, Maybe, maybe, maybeToUndefined, Nothing, or, then, thenF } from "../../../Data/Maybe"
 import { dec, gte, max, min, multiply, negate } from "../../../Data/Num"
 import { elems, lookupF } from "../../../Data/OrderedMap"
 import { fromDefault, makeLenses, Record } from "../../../Data/Record"
@@ -370,7 +370,7 @@ export const getIdSpecificAffectedAndDispatchProps =
               Just (
                 <TextField
                   hint={then (guard (is_text_input_required)) (name)}
-                  value={minput_text}
+                  value={maybeToUndefined (minput_text)}
                   onChange={inputHandlers.handleInput}
                   disabled={!is_text_input_required}
                   everyKeyDown
@@ -805,7 +805,7 @@ export const getInactiveActivatableControlElements =
                 const max_level =
                   fromMaybe (levels) (pipe_ (entry, IAA.maxLevel, fmap (min (levels))))
 
-                const levelOptions =
+                const levelOptions: List<Record<DropdownOption<number>>> =
                   pipe_ (
                     getLevelElementsWithMin (min_level) (max_level),
                     ls => SpecialAbilityId.language === id && isEditingAllowed
@@ -889,7 +889,7 @@ export const getInactiveActivatableControlElements =
                     Just (
                       <TextField
                         hint={input}
-                        value={minput_text}
+                        value={maybeToUndefined (minput_text)}
                         onChange={inputHandlers.handleInput}
                         everyKeyDown
                         />
@@ -903,7 +903,7 @@ export const getInactiveActivatableControlElements =
                 (Just (
                   <TextField
                     hint={fromMaybe ("") (minput_desc)}
-                    value={minput_text}
+                    value={maybeToUndefined (minput_text)}
                     onChange={inputHandlers.handleInput}
                     disabled={isNothing (minput_desc)}
                     everyKeyDown

src/App/Views/Activatable/ActivatableAddListItem.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { List, notNullStr } from "../../../Data/List"
-import { any, ensure, fromMaybe, guardReplace, isJust, isNothing, Just, Maybe, maybe, Nothing, orN } from "../../../Data/Maybe"
+import { any, ensure, fromMaybe, guardReplace, isJust, isNothing, Just, Maybe, maybe, maybeToUndefined, Nothing, orN } from "../../../Data/Maybe"
 import { lookup } from "../../../Data/OrderedMap"
 import { Record } from "../../../Data/Record"
 import { fst, snd } from "../../../Data/Tuple"
@@ -296,7 +296,7 @@ export const ActivatableAddListItem: React.FC<ActivatableAddListItemProps> = pro
         description={
           `${translate (staticData) ("advantagesdisadvantages.dialogs.customcost.for")} ${IAA.name (item)}`
         }
-        value={mcustom_cost_preview}
+        value={maybeToUndefined (mcustom_cost_preview)}
         acceptLabel={translate (staticData) ("general.dialogs.donebtn")}
         rejectLabel={translate (staticData) ("general.dialogs.deletebtn")}
         rejectDisabled={isNothing (mcustom_cost)}

src/App/Views/Equipment/ItemEditorCommonSection.tsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import { consF, filter, List, map } from "../../../Data/List"
-import { any, isJust, isNothing, Just, Maybe } from "../../../Data/Maybe"
+import { any, isJust, isNothing, Just, Maybe, maybeToUndefined } from "../../../Data/Maybe"
 import { lt } from "../../../Data/Num"
 import { elems } from "../../../Data/OrderedMap"
 import { Record } from "../../../Data/Record"
@@ -139,7 +139,7 @@ export const ItemEditorCommonSection: React.FC<ItemEditorCommonSectionProps> = p
           <TextField
             className="where"
             label={translate (staticData) ("equipment.dialogs.addedit.carriedwhere")}
-            value={EIA.where (item)}
+            value={maybeToUndefined (EIA.where (item))}
             onChange={setWhere}
             everyKeyDown
             />

src/App/Views/Equipment/ItemEditorRangedSection.tsx

@@ -2,7 +2,7 @@ import * as React from "react"
 import { equals } from "../../../Data/Eq"
 import { fmap } from "../../../Data/Functor"
 import { consF, List, map, subscript } from "../../../Data/List"
-import { ensure, Just, mapMaybe, Maybe } from "../../../Data/Maybe"
+import { ensure, Just, mapMaybe, Maybe, maybeToUndefined } from "../../../Data/Maybe"
 import { elems, OrderedMap } from "../../../Data/OrderedMap"
 import { Record } from "../../../Data/Record"
 import { EditItem } from "../../Models/Hero/EditItem"
@@ -169,7 +169,7 @@ export function ItemEditorRangedSection (props: ItemEditorRangedSectionProps) {
               <TextField
                 className="range1"
                 label={translate (staticData) ("equipment.dialogs.addedit.rangeclose")}
-                value={subscript (EIA.range (item)) (0)}
+                value={maybeToUndefined (subscript (EIA.range (item)) (0))}
                 onChange={setRange (1)}
                 disabled={locked}
                 valid={IEIVA.range1 (inputValidation)}
@@ -178,7 +178,7 @@ export function ItemEditorRangedSection (props: ItemEditorRangedSectionProps) {
               <TextField
                 className="range2"
                 label={translate (staticData) ("equipment.dialogs.addedit.rangemedium")}
-                value={subscript (EIA.range (item)) (1)}
+                value={maybeToUndefined (subscript (EIA.range (item)) (1))}
                 onChange={setRange (2)}
                 disabled={locked}
                 valid={IEIVA.range2 (inputValidation)}
@@ -187,7 +187,7 @@ export function ItemEditorRangedSection (props: ItemEditorRangedSectionProps) {
               <TextField
                 className="range3"
                 label={translate (staticData) ("equipment.dialogs.addedit.rangefar")}
-                value={subscript (EIA.range (item)) (2)}
+                value={maybeToUndefined (subscript (EIA.range (item)) (2))}
                 onChange={setRange (3)}
                 disabled={locked}
                 valid={IEIVA.range3 (inputValidation)}

src/App/Views/Equipment/PurseAndTotals.tsx

@@ -1,12 +1,12 @@
 import * as React from "react"
-import { fmapF } from "../../../Data/Functor"
+import { fmap } from "../../../Data/Functor"
 import { List } from "../../../Data/List"
-import { fromMaybe, isJust, Maybe } from "../../../Data/Maybe"
+import { fromMaybe, isJust, Maybe, maybeToUndefined } from "../../../Data/Maybe"
 import { Record } from "../../../Data/Record"
 import { Purse } from "../../Models/Hero/Purse"
 import { StaticDataRecord } from "../../Models/Wiki/WikiModel"
 import { localizeNumber, localizeWeight, translate, translateP } from "../../Utilities/I18n"
-import { pipe } from "../../Utilities/pipe"
+import { pipe, pipe_ } from "../../Utilities/pipe"
 import { TextField } from "../Universal/TextField"
 
 export interface PurseAndTotalsProps {
@@ -71,22 +71,22 @@ export const PurseAndTotals: React.FC<PurseAndTotalsProps> = props => {
         <div className="fields">
           <TextField
             label={translate (staticData) ("equipment.purse.ducats")}
-            value={fmapF (purse) (PA.d)}
+            value={pipe_ (purse, fmap (PA.d), maybeToUndefined)}
             onChange={setDucates}
             />
           <TextField
             label={translate (staticData) ("equipment.purse.silverthalers")}
-            value={fmapF (purse) (PA.s)}
+            value={pipe_ (purse, fmap (PA.s), maybeToUndefined)}
             onChange={setSilverthalers}
             />
           <TextField
             label={translate (staticData) ("equipment.purse.halers")}
-            value={fmapF (purse) (PA.h)}
+            value={pipe_ (purse, fmap (PA.h), maybeToUndefined)}
             onChange={setHellers}
             />
           <TextField
             label={translate (staticData) ("equipment.purse.kreutzers")}
-            value={fmapF (purse) (PA.k)}
+            value={pipe_ (purse, fmap (PA.k), maybeToUndefined)}
             onChange={setKreutzers}
             />
         </div>

src/App/Views/Pact/Pact.tsx

@@ -4,7 +4,7 @@ import { equals } from "../../../Data/Eq"
 import { flip } from "../../../Data/Function"
 import { fmap, fmapF } from "../../../Data/Functor"
 import { consF, drop, find, List, map, notNullStr, take } from "../../../Data/List"
-import { and, ap, bind, bindF, ensure, fromJust, isJust, isNothing, join, Just, Maybe, maybe } from "../../../Data/Maybe"
+import { and, ap, bind, bindF, ensure, fromJust, isJust, isNothing, join, Just, Maybe, maybe, maybeToUndefined } from "../../../Data/Maybe"
 import { gte } from "../../../Data/Num"
 import { elems, lookupF } from "../../../Data/OrderedMap"
 import { Record } from "../../../Data/Record"
@@ -251,7 +251,7 @@ export const PactSettings: React.FC<PactSettingsProps> = props => {
             fmap (PDA.name)
           )}
           onChange={setCustomTargetDomain}
-          value={pipe_ (mpact, fmap (Pact.A.domain), misStringM)}
+          value={pipe_ (mpact, fmap (Pact.A.domain), misStringM, maybeToUndefined)}
           disabled={
             !isPactEditable
             || isNothing (mpact)
@@ -261,7 +261,7 @@ export const PactSettings: React.FC<PactSettingsProps> = props => {
         <TextField
           label={translate (staticData) ("pacts.name")}
           onChange={setTargetName}
-          value={fmapF (mpact) (Pact.A.name)}
+          value={maybeToUndefined (fmapF (mpact) (Pact.A.name))}
           disabled={
             !isPactEditable
             || isNothing (mpact)

src/App/Views/Profile/OverviewPersonalData.tsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { equals } from "../../../Data/Eq"
 import { flength, List } from "../../../Data/List"
-import { all, bind, listToMaybe, Maybe } from "../../../Data/Maybe"
+import { all, bind, listToMaybe, Maybe, maybeToUndefined } from "../../../Data/Maybe"
 import { Record } from "../../../Data/Record"
 import { SocialStatusId } from "../../Constants/Ids"
 import { PersonalData } from "../../Models/Hero/PersonalData"
@@ -98,28 +98,28 @@ export const OverviewPersonalData: React.FC<OverviewPersonalDataProps> = props =
       <div>
         <TextField
           label={translate (staticData) ("personaldata.family")}
-          value={PDA.family (profile)}
+          value={maybeToUndefined (PDA.family (profile))}
           onChange={changeFamily}
           />
       </div>
       <div>
         <TextField
           label={translate (staticData) ("personaldata.placeofbirth")}
-          value={PDA.placeOfBirth (profile)}
+          value={maybeToUndefined (PDA.placeOfBirth (profile))}
           onChange={changePlaceOfBirth}
           />
       </div>
       <div>
         <TextField
           label={translate (staticData) ("personaldata.dateofbirth")}
-          value={PDA.dateOfBirth (profile)}
+          value={maybeToUndefined (PDA.dateOfBirth (profile))}
           onChange={changeDateOfBirth}
           />
       </div>
       <div>
         <TextField
           label={translate (staticData) ("personaldata.age")}
-          value={age}
+          value={maybeToUndefined (age)}
           onChange={changeAge}
           valid={all (isEmptyOr (isNaturalNumber)) (age)}
           />
@@ -146,7 +146,7 @@ export const OverviewPersonalData: React.FC<OverviewPersonalDataProps> = props =
       <InputButtonGroup className="reroll">
         <TextField
           label={`${translate (staticData) ("personaldata.size")}${wrapParenSpace (sizeCalcStr)}`}
-          value={PDA.size (profile)}
+          value={maybeToUndefined (PDA.size (profile))}
           onChange={changeSize}
           valid={all (isEmptyOr (isFloat)) (size)}
           />
@@ -157,7 +157,7 @@ export const OverviewPersonalData: React.FC<OverviewPersonalDataProps> = props =
           label={
             `${translate (staticData) ("personaldata.weight")}${wrapParenSpace (weightCalcStr)}`
           }
-          value={PDA.weight (profile)}
+          value={maybeToUndefined (PDA.weight (profile))}
           onChange={changeWeight}
           valid={all (isEmptyOr (isNaturalNumber)) (weight)}
           />
@@ -166,7 +166,7 @@ export const OverviewPersonalData: React.FC<OverviewPersonalDataProps> = props =
       <div>
         <TextField
           label={translate (staticData) ("personaldata.title")}
-          value={PDA.title (profile)}
+          value={maybeToUndefined (PDA.title (profile))}
           onChange={changeTitle}
           />
       </div>
@@ -181,21 +181,21 @@ export const OverviewPersonalData: React.FC<OverviewPersonalDataProps> = props =
       <div>
         <TextField
           label={translate (staticData) ("personaldata.characteristics")}
-          value={PDA.characteristics (profile)}
+          value={maybeToUndefined (PDA.characteristics (profile))}
           onChange={changeCharacteristics}
           />
       </div>
       <div>
         <TextField
           label={translate (staticData) ("personaldata.otherinfo")}
-          value={PDA.otherInfo (profile)}
+          value={maybeToUndefined (PDA.otherInfo (profile))}
           onChange={changeOtherInfo}
           />
       </div>
       <div>
         <TextField
           label={translate (staticData) ("personaldata.cultureareaknowledge")}
-          value={PDA.cultureAreaKnowledge (profile)}
+          value={maybeToUndefined (PDA.cultureAreaKnowledge (profile))}
           onChange={changeCultureAreaKnowledge}
           />
       </div>

src/App/Views/Universal/BasicInputDialog.tsx

@@ -12,7 +12,7 @@ interface Dialog {
   isOpen: boolean
   title: string
   description: string
-  value: string | Maybe<string>
+  value: string | undefined
   invalid?: Maybe<string>
   acceptLabel: string
   rejectLabel: string

src/App/Views/Universal/SearchField.tsx

@@ -13,7 +13,7 @@ interface Props {
   fullWidth?: boolean
   staticData: StaticDataRecord
   onChange (newText: string): void
-  value?: string | number | Maybe<string | number>
+  value?: string | number
   valid?: boolean
 }
 

src/App/Views/Universal/TextField.tsx

@@ -2,14 +2,15 @@
 import * as React from "react"
 import { Either, isEither, isLeft } from "../../../Data/Either"
 import { List } from "../../../Data/List"
-import { guardReplace, isJust, isMaybe, Just, Maybe, normalize, orN } from "../../../Data/Maybe"
-import { InputKeyEvent, InputTextEvent } from "../../Models/Hero/heroTypeHelpers"
+import { guardReplace, isJust, isMaybe, Just, Maybe, maybeToUndefined, orN } from "../../../Data/Maybe"
+import { InputKeyEvent } from "../../Models/Hero/heroTypeHelpers"
 import { classListMaybe } from "../../Utilities/CSS"
-import { renderMaybe } from "../../Utilities/ReactUtils"
 import { TextFieldCounter } from "./TextFieldCounter"
+import { TextFieldDeferred } from "./TextFieldDeferred"
 import { TextFieldError } from "./TextFieldError"
 import { TextFieldHint } from "./TextFieldHint"
 import { TextFieldLabel } from "./TextFieldLabel"
+import { TextFieldSync } from "./TextFieldSync"
 
 export interface TextFieldProps {
   autoFocus?: boolean | Maybe<boolean>
@@ -21,9 +22,8 @@ export interface TextFieldProps {
   fullWidth?: boolean
   hint?: Maybe<string> | string
   label?: Maybe<string> | string
-  multiLine?: boolean
   type?: string
-  value?: string | number | Maybe<string | number>
+  value?: string | number
   valid?: boolean
   everyKeyDown?: boolean
   onChange (newText: string): void
@@ -46,55 +46,16 @@ export const TextField: React.FC<TextFieldProps> = props => {
     onKeyUp,
     type = "text",
     valid,
-    value: mvalue,
+    value: defaultValue,
     hint,
     everyKeyDown,
   } = props
 
-  const saved_value = renderMaybe (normalize (mvalue))
-
-  const inputRef = React.useRef<HTMLInputElement | null> (null)
-
-  const defaultValue = typeof saved_value === "number" ? saved_value .toString () : saved_value
-
-  const [ value, setValue ] = React.useState (defaultValue)
-  const [ prevValue, setPrevValue ] = React.useState (defaultValue)
-
-  if (prevValue !== defaultValue) {
-    setValue (defaultValue)
-    setPrevValue (defaultValue)
-  }
-
-  React.useEffect (
-    () => {
-      if (Maybe.elem (true) (Maybe.normalize (autoFocus)) && inputRef.current !== null) {
-        inputRef.current.focus ()
-      }
-    },
-    [ autoFocus ]
-  )
-
-  const handleChange =
-    React.useCallback (
-      everyKeyDown === true
-        ? (event: InputTextEvent) => {
-          setValue (event.target.value)
-          setPrevValue (event.target.value)
-          onChange (event.target.value)
-        }
-        : orN (disabled)
-        ? () => undefined
-        : (event: InputTextEvent) => setValue (event.target.value),
-      [ disabled, onChange, onChange ]
-    )
-
-  const handleBlur =
-    React.useCallback (
-      orN (disabled) || everyKeyDown === true
-        ? () => undefined
-        : () => defaultValue === value ? undefined : onChange (value),
-      [ disabled, onChange, value ]
-    )
+  const value = defaultValue === undefined
+                ? ""
+                : typeof defaultValue === "number"
+                ? defaultValue .toString ()
+                : defaultValue
 
   return (
     <div
@@ -110,16 +71,29 @@ export const TextField: React.FC<TextFieldProps> = props => {
       ))}
       >
       <TextFieldLabel label={label} />
-      <input
-        type={type}
-        value={value}
-        onChange={handleChange}
-        onKeyPress={orN (disabled) ? undefined : onKeyDown}
-        onKeyUp={orN (disabled) ? undefined : onKeyUp}
-        readOnly={disabled}
-        ref={inputRef}
-        onBlur={handleBlur}
-        />
+      {orN (everyKeyDown)
+        ? (
+          <TextFieldSync
+            autoFocus={maybeToUndefined (Maybe.normalize (autoFocus))}
+            disabled={disabled}
+            type={type}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+            />
+        )
+        : (
+          <TextFieldDeferred
+            autoFocus={maybeToUndefined (Maybe.normalize (autoFocus))}
+            disabled={disabled}
+            type={type}
+            value={value}
+            onChange={onChange}
+            onKeyDown={onKeyDown}
+            onKeyUp={onKeyUp}
+            />
+        )}
       <TextFieldHint hint={hint} value={value} />
       <TextFieldCounter current={countCurrent} max={countMax} />
       <TextFieldError error={error} />

src/App/Views/Universal/TextFieldDeferred.tsx

@@ -0,0 +1,78 @@
+// import { TextareaAutosize } from 'react-textarea-autosize'
+import * as React from "react"
+import { orN } from "../../../Data/Maybe"
+import { InputKeyEvent } from "../../Models/Hero/heroTypeHelpers"
+
+interface Props {
+  autoFocus?: boolean
+  disabled?: boolean
+  type: string
+  value: string
+  onChange (newText: string): void
+  onKeyDown? (event: InputKeyEvent): void
+  onKeyUp? (event: InputKeyEvent): void
+}
+
+export const TextFieldDeferred: React.FC<Props> = props => {
+  const {
+    autoFocus,
+    disabled,
+    type,
+    value: defaultValue,
+    onChange,
+    onKeyDown,
+    onKeyUp,
+  } = props
+
+  const inputRef = React.useRef<HTMLInputElement | null> (null)
+
+  const [ value, setValue ] = React.useState (defaultValue)
+  const [ prevValue, setPrevValue ] = React.useState (defaultValue)
+
+  if (prevValue !== defaultValue) {
+    setValue (defaultValue)
+    setPrevValue (defaultValue)
+  }
+
+  React.useEffect (
+    () => {
+      if (orN (autoFocus) && inputRef.current !== null) {
+        inputRef.current.focus ()
+      }
+    },
+    [ autoFocus ]
+  )
+
+  const handleChange =
+    React.useCallback (
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!orN (disabled)) {
+          setValue (e.target.value)
+        }
+      },
+      [ disabled ]
+    )
+
+  const handleBlur =
+    React.useCallback (
+      (e: React.FocusEvent<HTMLInputElement>) => {
+        if (!orN (disabled) && defaultValue !== value) {
+          onChange (e.target.value)
+        }
+      },
+      [ defaultValue, disabled, onChange, value ]
+    )
+
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={handleChange}
+      onKeyPress={orN (disabled) ? undefined : onKeyDown}
+      onKeyUp={orN (disabled) ? undefined : onKeyUp}
+      readOnly={disabled}
+      ref={inputRef}
+      onBlur={handleBlur}
+      />
+  )
+}

src/App/Views/Universal/TextFieldSync.tsx

@@ -0,0 +1,59 @@
+// import { TextareaAutosize } from 'react-textarea-autosize'
+import * as React from "react"
+import { Maybe, orN } from "../../../Data/Maybe"
+import { InputKeyEvent } from "../../Models/Hero/heroTypeHelpers"
+
+interface Props {
+  autoFocus?: boolean
+  disabled?: boolean
+  type: string
+  value: string
+  onChange (newText: string): void
+  onKeyDown? (event: InputKeyEvent): void
+  onKeyUp? (event: InputKeyEvent): void
+}
+
+export const TextFieldSync: React.FC<Props> = props => {
+  const {
+    autoFocus,
+    disabled,
+    type,
+    value,
+    onChange,
+    onKeyDown,
+    onKeyUp,
+  } = props
+
+  const inputRef = React.useRef<HTMLInputElement | null> (null)
+
+  React.useEffect (
+    () => {
+      if (Maybe.elem (true) (Maybe.normalize (autoFocus)) && inputRef.current !== null) {
+        inputRef.current.focus ()
+      }
+    },
+    [ autoFocus ]
+  )
+
+  const handleChange =
+    React.useCallback (
+      (e: React.ChangeEvent<HTMLInputElement>) => {
+        if (!orN (disabled)) {
+          onChange (e.target.value)
+        }
+      },
+      [ disabled, onChange ]
+    )
+
+  return (
+    <input
+      type={type}
+      value={value}
+      onChange={handleChange}
+      onKeyPress={orN (disabled) ? undefined : onKeyDown}
+      onKeyUp={orN (disabled) ? undefined : onKeyUp}
+      readOnly={disabled}
+      ref={inputRef}
+      />
+  )
+}

tsconfig.json

@@ -3,6 +3,7 @@
     "allowJs": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
+    "incremental": true,
     "importHelpers": true,
     "jsx": "react",
     "lib": ["esnext", "dom"],