Stop separately tracking focus for Input

src/UI/Focus.re

@@ -23,21 +23,24 @@ let loseFocus = () => {
   // If there is an active window, with text input active, turn off text input
 };
 
-let focus = (node: Node.node) => {
-  Log.trace("focus()");
-  node#handleEvent(Focus);
-  focused := Some({handler: node#handleEvent, id: node#getInternalId()});
-};
+let isFocused = (node: Node.node) =>
+  switch (focused^) {
+  | Some({id, _}) => node#getInternalId() == id
+  | None => false
+  };
 
 /* TODO perform checks if a node can be focused ? */
-let dispatch = (node: Node.node) =>
+let focus = (node: Node.node) =>
+  if (!isFocused(node)) {
+    loseFocus();
+
+    Log.trace("focus()");
+    node#handleEvent(Focus);
+    focused := Some({handler: node#handleEvent, id: node#getInternalId()});
+  };
+
+let dispatch = event =>
   switch (focused^) {
-  | Some({id, _}) =>
-    if (node#getInternalId() === id) {
-      ();
-    } else {
-      loseFocus();
-      focus(node);
-    }
-  | None => focus(node)
+  | Some({handler, _}) => handler(event)
+  | None => ()
   };

src/UI/Focus.rei

@@ -0,0 +1,9 @@
+open NodeEvents;
+
+let loseFocus: unit => unit;
+
+let isFocused: Node.node => bool;
+
+let focus: Node.node => unit;
+
+let dispatch: event => unit;

src/UI/Keyboard.re

@@ -2,39 +2,33 @@ open Revery_Core;
 open NodeEvents;
 
 let dispatch = (event: Revery_Core.Events.internalKeyboardEvent) => {
-  let focused = Focus.focused^;
-
-  switch (focused) {
-  | None => ()
-  | Some({handler, _}) =>
-    switch (event) {
-    | InternalTextEditEvent({text, start, length}) =>
-      handler(TextEdit({text, start, length}))
-    | InternalTextInputEvent(e) => handler(TextInput({text: e.text}))
-    | InternalKeyUpEvent(e) =>
-      handler(
-        KeyUp({
-          keycode: e.keycode,
-          scancode: e.scancode,
-          repeat: e.repeat,
-          keymod: e.keymod,
-          ctrlKey: Key.Keymod.isControlDown(e.keymod),
-          altKey: Key.Keymod.isAltDown(e.keymod),
-          shiftKey: Key.Keymod.isShiftDown(e.keymod),
-        }),
-      )
-    | InternalKeyDownEvent(e) =>
-      handler(
-        KeyDown({
-          keycode: e.keycode,
-          scancode: e.scancode,
-          repeat: e.repeat,
-          keymod: e.keymod,
-          ctrlKey: Key.Keymod.isControlDown(e.keymod),
-          altKey: Key.Keymod.isAltDown(e.keymod),
-          shiftKey: Key.Keymod.isShiftDown(e.keymod),
-        }),
-      )
-    }
+  switch (event) {
+  | InternalTextEditEvent({text, start, length}) =>
+    Focus.dispatch(TextEdit({text, start, length}))
+  | InternalTextInputEvent(e) => Focus.dispatch(TextInput({text: e.text}))
+  | InternalKeyUpEvent(e) =>
+    Focus.dispatch(
+      KeyUp({
+        keycode: e.keycode,
+        scancode: e.scancode,
+        repeat: e.repeat,
+        keymod: e.keymod,
+        ctrlKey: Key.Keymod.isControlDown(e.keymod),
+        altKey: Key.Keymod.isAltDown(e.keymod),
+        shiftKey: Key.Keymod.isShiftDown(e.keymod),
+      }),
+    )
+  | InternalKeyDownEvent(e) =>
+    Focus.dispatch(
+      KeyDown({
+        keycode: e.keycode,
+        scancode: e.scancode,
+        repeat: e.repeat,
+        keymod: e.keymod,
+        ctrlKey: Key.Keymod.isControlDown(e.keymod),
+        altKey: Key.Keymod.isAltDown(e.keymod),
+        shiftKey: Key.Keymod.isShiftDown(e.keymod),
+      }),
+    )
   };
 };

src/UI/Mouse.re

@@ -287,7 +287,7 @@ let dispatch =
 
     if (isMouseDownEv(eventToSend)) {
       switch (getFirstFocusable(node, mouseX, mouseY)) {
-      | Some(node) => Focus.dispatch(node)
+      | Some(node) => Focus.focus(node)
       | None => Focus.loseFocus()
       };
     };

src/UI_Components/Input.re

@@ -48,16 +48,18 @@ module Cursor = {
 };
 
 type state = {
-  isFocused: bool, // TODO: Violates single source of truth
   value: string,
   cursorPosition: int,
 };
 
 type action =
-  | Focus
-  | Blur
   | TextInput(string, int);
 
+let reducer = (action, state) =>
+  switch (action) {
+  | TextInput(value, cursorPosition) => {value, cursorPosition}
+  };
+
 let getStringParts = (index, str) => {
   switch (index) {
   | 0 => ("", str)
@@ -106,13 +108,6 @@ let addCharacter = (word, char, index) => {
   (startStr ++ char ++ endStr, String.length(startStr) + 1);
 };
 
-let reducer = (action, state) =>
-  switch (action) {
-  | Focus => {...state, isFocused: true}
-  | Blur => {...state, isFocused: false}
-  | TextInput(value, cursorPosition) => {...state, value, cursorPosition}
-  };
-
 module Constants = {
   let defaultHeight = 50;
   let defaultWidth = 200;
@@ -209,10 +204,13 @@ let%component make =
                 ~isPassword=false,
                 (),
               ) => {
+  // TODO: This ought to be a state hook not reducer but
+  // a bug with stale hook setters might happen.
+  //
+  // Refactor when https://github.com/briskml/brisk-reconciler/issues/74 has been fixed
   let%hook (state, dispatch) =
     Hooks.reducer(
       ~initialState={
-        isFocused: false,
         value: Option.value(value, ~default=""),
         cursorPosition: Option.value(cursorPosition, ~default=0),
       },
@@ -248,8 +246,16 @@ let%component make =
     dimensions.width |> int_of_float;
   };
 
+  let%hook clickableRef = Hooks.ref(None);
+  let isFocused = () => {
+    switch (clickableRef^) {
+    | Some(node) => Focus.isFocused(node)
+    | None => false
+    };
+  };
+
   let%hook (cursorOpacity, resetCursor) =
-    Cursor.use(~interval=Time.ms(500), ~isFocused=state.isFocused);
+    Cursor.use(~interval=Time.ms(500), ~isFocused=isFocused());
 
   let () = {
     let cursorOffset =
@@ -275,14 +281,12 @@ let%component make =
     resetCursor();
     onFocus();
     Sdl2.TextInput.start();
-    dispatch(Focus);
   };
 
   let handleBlur = () => {
     resetCursor();
     onBlur();
     Sdl2.TextInput.stop();
-    dispatch(Blur);
   };
 
   // TODO:This ought to be in the reducer, but since reducer calls are deferred
@@ -350,6 +354,13 @@ let%component make =
     };
   };
 
+  let handleRef = node => {
+    clickableRef := Some(node);
+    if (autofocus) {
+      Focus.focus(node);
+    };
+  };
+
   let cursor = () => {
     let (startStr, _) = getStringParts(cursorPosition, value);
     let textWidth = measureTextWidth(startStr);
@@ -392,7 +403,7 @@ let%component make =
   <Clickable
     onFocus=handleFocus
     onBlur=handleBlur
-    componentRef={autofocus ? Focus.focus : ignore}
+    componentRef=handleRef
     onAnyClick=handleClick
     onKeyDown=handleKeyDown
     onTextInput=handleTextInput>