Merge pull request #25 from IBM/feature/select-text-when-number-cleared

Fix UX for "cleared" numbers
IBM · Apr 25, 2024 · e583757 · e583757
2 parents e3beec4 + bc9b3a0
commit e583757
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 7 deletions.
diff --git a/json-form/src/JsonEditor.tsx b/json-form/src/JsonEditor.tsx
@@ -25,11 +25,12 @@ import {
   nothing,
   Port,
   Sub,
+  Task,
   Tuple,
   updatePiped,
 } from 'tea-cup-core';
-import { DevTools, Program } from 'react-tea-cup';
-import { contextMenuMsg, Msg, setJsonStr, setStrictModeMsg } from './Msg';
+import { Program } from 'react-tea-cup';
+import { contextMenuMsg, Msg, noOp, setJsonStr, setStrictModeMsg } from './Msg';
 import {
   computeAll,
   CustomRendererModel,
@@ -199,6 +200,21 @@ function withOutValueChanged(
   ];
 }
 
+function selectTextCmd(path: JsPath): Cmd<Msg> {
+  const selectTask: Task<Error, string> = Task.fromLambda(() => {
+    const inputId = `input-${path.format('_')}`;
+    const input = document.getElementById(inputId);
+    if (!input) {
+      throw new Error(`input not found for path ${path.format()}`);
+    }
+    if (input instanceof HTMLInputElement) {
+      input.select();
+    }
+    return 'ok';
+  });
+  return Task.attempt(selectTask, () => noOp);
+}
+
 export function update(
   msg: Msg,
   model: Model,
@@ -207,11 +223,18 @@ export function update(
   switch (msg.tag) {
     case 'delete-property':
       return withOutValueChanged(model, actionDeleteValue(model, msg.path));
-    case 'update-property':
-      return withOutValueChanged(
+    case 'update-property': {
+      const mac = updatePiped(
         model,
-        actionUpdateValue(model, msg.path, msg.value),
+        (model) => actionUpdateValue(model, msg.path, msg.value),
+        (model) => {
+          const cmd: Cmd<Msg> =
+            msg.selectText === true ? selectTextCmd(msg.path) : Cmd.none();
+          return [model, cmd];
+        },
       );
+      return withOutValueChanged(model, mac);
+    }
     case 'add-property-clicked':
       return noOut(actionAddPropertyClicked(model, msg.path));
     case 'new-property-name-changed':
@@ -437,7 +460,7 @@ export function JsonEditor(props: JsonEditorProps): React.ReactElement {
         return [maco[0], maco[1]];
       }}
       subscriptions={subscriptions}
-      devTools={DevTools.init<Model, Msg>(window)}
+      // devTools={DevTools.init<Model, Msg>(window)}
     />
   );
 }
diff --git a/json-form/src/Msg.ts b/json-form/src/Msg.ts
@@ -99,6 +99,7 @@ export interface DeleteProperty extends HasPath {
 export interface UpdateProperty extends HasPath {
   tag: 'update-property';
   value: JsonValue;
+  selectText?: boolean;
 }
 
 export interface AddPropertyClicked extends HasPath {

diff --git a/json-form/src/renderer/Renderer.tsx b/json-form/src/renderer/Renderer.tsx
@@ -397,11 +397,13 @@ function ViewArray(p: ViewValueProps<JvArray>): React.ReactElement {
 function dispatchUpdateProperty(
   p: ViewValueProps<JsonValue>,
   newValue: JsonValue,
+  selectText?: boolean,
 ) {
   p.dispatch({
     tag: 'update-property',
     path: p.path,
     value: newValue,
+    selectText,
   });
 }
 
@@ -419,10 +421,16 @@ function ViewNumber(p: ViewValueProps<JvNumber>): React.ReactElement {
       invalid={isInvalid(p)}
       onChange={(evt) => {
         let newValue = parseFloat(evt.target.value);
+        let selectText = false;
         if (isNaN(newValue)) {
           newValue = 0;
+          selectText = true;
         }
-        dispatchUpdateProperty(p, { tag: 'jv-number', value: newValue });
+        dispatchUpdateProperty(
+          p,
+          { tag: 'jv-number', value: newValue },
+          selectText,
+        );
       }}
     />
   );