Исправлена реакция AutoComplete на клики мыши

AutoComplete.tsx

@@ -63,8 +63,8 @@ export default class AutoComplete<A=string> extends React.Component<Props<A>, St
 
   // Выполнение действий из ST
   dispatch = (action: ST.Action<A>) => {
-    const { ctx, openOnFocus, source } = this.props;
-    const acCtx = { ...ctx, options: { openOnFocus, source } };
+    const { ctx, openOnFocus, openOnClick, source } = this.props;
+    const acCtx = { ...ctx, options: { openOnFocus, openOnClick, source } };
     this.setState(prev => {
       const [next, command] = ST.update(acCtx, action, prev);
       command.subscribe(ethr => ethr.tag === 'Right' && this.dispatch(ethr.value));
@@ -98,9 +98,7 @@ export default class AutoComplete<A=string> extends React.Component<Props<A>, St
   };
 
   handleClick = (e?: React.SyntheticEvent) => {
-    const { openOnClick } = this.props;
-    const { open } = this.state;
-    if (openOnClick && !open) this.dispatch({ tag: 'Open' });
+    this.dispatch({ tag: 'Click' });
   };
 
   handleToggleVisibility = () => {

AutoComplete/state-machine.ts

@@ -15,6 +15,7 @@ export type Options<A> = {
   printItem?(x: A): string;
   limit?: number;
   openOnFocus?: boolean;
+  openOnClick?: boolean;
 };
 
 
@@ -57,6 +58,7 @@ export type Action<A> =
   | { tag: 'Blur' }
   | { tag: 'Close' }
   | { tag: 'Open' }
+  | { tag: 'Click' }
 
 
 // State
@@ -131,7 +133,9 @@ export function update<A>(ctx: Ctx<A>, action: Action<A>, state: State<A>): [Sta
       return [state, cmd.of<Action<A>>({ tag: 'Query', query: { ...state.query, search: action.value } })];
     }
     case 'Focus': {
-      if (ctx.options.openOnFocus) {
+      if (ctx.options.openOnFocus && !ctx.options.openOnClick) {
+        // Не открываем попап на фокусе если указан
+        // `ctx.options.openOnClick`, тк он откроется на клике
         return [state, cmd.of<Action<A>>({ tag: 'Query', query: state.query })];
       }
       return [state, noop];
@@ -146,6 +150,13 @@ export function update<A>(ctx: Ctx<A>, action: Action<A>, state: State<A>): [Sta
       if (state.open) return [state, noop];
       return [state, cmd.of<Action<A>>({ tag: 'Query', query: defaultQuery })];
     }
+    case 'Click': {
+      if (ctx.options.openOnClick) {
+        if (state.open) return [{ ...state, open: false }, noop];
+        return [state, cmd.of<Action<A>>({ tag: 'Query', query: defaultQuery })];
+      }
+      return [state, noop];
+    }
   }
 }