Tag Use Case

proof-of-concepts/features/stories/combobox/hooks/types.ts

@@ -32,18 +32,16 @@ export namespace BL {
   export type ItemsList = Record<string, any>;
 
   // Prop Getters
-
-  export interface ComboboxInputProps {
-    ariaAutoComplete?: ComboboxAriaAutoComplete;
-  }
-
   export interface ComboboxLabelGetterProps {
     id?: string;
     inputId?: string;
   }
 
-  export interface ComboboxInputGetterProps {
+  export interface ComboboxInputGetterProps<T> {
     controlDispatch?: (...args: any[]) => any;
+    ref?: React.MutableRefObject<T>;
+    onFocus?: (...args: any[]) => any;
+    onBlur?: (...args: any[]) => any;
   }
 
   export interface ComboboxGetterProps {

proof-of-concepts/features/stories/combobox/hooks/useCombobox.ts

@@ -6,6 +6,7 @@ import {
   useControlledReducer,
   computeInitialState
 } from './utils';
+import { mergeRefs, callAllEventHandlers, noop } from '../../utils';
 import { BL } from './types';
 
 export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
@@ -92,7 +93,7 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
    *
    */
   React.useEffect(() => {
-    if (inputRef.current && isOpen) {
+    if (inputRef.current && (isOpen || props.initialIsOpen)) {
       inputRef.current.focus();
     }
   }, [isOpen]);
@@ -231,7 +232,11 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
   // this is the entry point for handling the change event for the input value
   // I think that we can add a debounce function here as a prop
   // onchange prop will let the user control when the state updates
-  function getInputProps(props?: BL.ComboboxInputGetterProps) {
+  function getInputProps<T>({
+    onBlur = noop,
+    onFocus = noop,
+    controlDispatch
+  }: BL.ComboboxInputGetterProps<T> = {}) {
     const inputKeyDownHandler = (e: React.KeyboardEvent) => {
       const keyEvt = normalizeKey(e);
       if (keyEvt.name in inputKeyDownHandlers) {
@@ -241,22 +246,21 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
 
     const inputBlurHandler = (e: React.FocusEvent<HTMLInputElement>) => {
       e.preventDefault();
-      console.log('[INPUT_BLUR]');
       dispatch({
         type: BL.ComboboxActions.INPUT_BLUR
       });
     };
 
     const inputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
       const val = e.currentTarget.value;
-      if (props?.controlDispatch) {
+      if (controlDispatch) {
         const fn = () => {
           dispatch({
             type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
             text: val
           });
         };
-        props.controlDispatch(fn);
+        controlDispatch(fn);
       } else {
         dispatch({
           type: BL.ComboboxActions.INPUT_VALUE_CHANGE,
@@ -265,14 +269,15 @@ export function useCombobox<Item>(props: BL.ComboboxProps<Item> = {}) {
       }
     };
 
-    const eventHandlers = {
-      onKeyDown: inputKeyDownHandler
+    let eventHandlers = {
+      onKeyDown: inputKeyDownHandler,
+      onChange: inputChangeHandler,
+      onBlur: callAllEventHandlers(inputBlurHandler, onBlur),
+      onFocus
     };
 
     return {
-      ref: inputRef,
-      onChange: inputChangeHandler,
-      onBlur: inputBlurHandler,
+      ref: props.ref,
       role: 'textbox',
       'aria-labelledby': elementIds.labelId,
       'aria-controls': elementIds.menuId,

proof-of-concepts/features/stories/tags/TagEditor/TagEditor.scss

@@ -40,7 +40,7 @@
   border-radius: 6px;
 }
 
-.tag-search-container:focus {
+.tag-search-container--focused {
   border: 1px solid #0978d9;
   box-shadow: 0px 0px 0px 2px rgba(9, 120, 217, 0.3);
   outline: none;
@@ -79,7 +79,7 @@
 
 .tag-result {
   padding: spacing.$Size-1;
-  margin: 0;
+  margin: spacing.$Size-0;
   border-radius: 4px;
   display: inline-flex;
   flex-direction: column;
@@ -91,7 +91,7 @@
 }
 .tag-result--focused {
   outline: none;
-  box-shadow: 0px 0px 0px 2px rgba(9, 120, 217, 0.3);
+  box-shadow: 0px 0px 0px 2px rgba(9, 120, 217, 1);
   background-color: colors.$Gray-1;
 }
 

proof-of-concepts/features/stories/tags/TagEditor/TagEditor.tsx

@@ -44,7 +44,13 @@ export const TagEditor = () => {
   const [selectedTags, setSelectedTags] = React.useState<BottomlineTags>({});
   const [tagSuggestions, setTagSuggestions] = React.useState<
     BottomlineTag[] | undefined
-  >(undefined);
+  >();
+
+  // we define state and change handler callbacks instead of a ref because we don't need to handle
+  // we need the "appearance" of focus handling for the container when the input element is focused
+  const [inputFocused, setInputFocused] = React.useState(false);
+  const inputOnFocus = () => setInputFocused(true);
+  const inputOnBlur = () => setInputFocused(false);
   let derivedLoaderState = false;
 
   const debounce = useDebouncedCallback(
@@ -66,16 +72,10 @@ export const TagEditor = () => {
     run(fetchTags(input));
   }, [input, run]);
 
-  if (status === UseAsyncStatus.PENDING) {
-    console.log('[TAG_EDITOR_PENDING]');
-    derivedLoaderState = true;
-  }
+  if (status === UseAsyncStatus.PENDING) derivedLoaderState = true;
 
   React.useEffect(() => {
-    if (tags) {
-      console.log('Use Effect, Setting Tags');
-      setTagSuggestions(tags);
-    }
+    if (tags) setTagSuggestions(tags);
   }, [tags]);
 
   function stateReducer(
@@ -123,6 +123,10 @@ export const TagEditor = () => {
     initialIsOpen: tagSuggestions ? true : false
   });
 
+  // place our own ref on the input
+  // we use a useeffect to detect when the input ref is focused
+  // when the input ref is focused, then we focus the div
+
   return (
     <section className="tag-editor-section">
       <div className="tag-editor">
@@ -149,9 +153,20 @@ export const TagEditor = () => {
           ) : null}
         </div>
         {/*{duplicateTagAlert ? <p role="alert">{duplicateTagAlert}</p> : null}*/}
-        <div className="tag-search-container" {...getComboboxProps()}>
+        <div
+          className={
+            inputFocused
+              ? 'tag-search-container tag-search-container--focused'
+              : 'tag-search-container'
+          }
+          {...getComboboxProps()}
+        >
           <input
-            {...getInputProps({ controlDispatch: debounce })}
+            {...getInputProps<HTMLInputElement | undefined>({
+              controlDispatch: debounce,
+              onFocus: inputOnFocus,
+              onBlur: inputOnBlur
+            })}
             type="text"
             autoComplete="off"
             className="tag-search-input"
@@ -169,7 +184,9 @@ export const TagEditor = () => {
               {tagSuggestions.map((tag, index: number) => (
                 <li
                   className={
-                    highlightedIndex === index ? 'tag-result--focused' : 'tag-result'
+                    highlightedIndex === index
+                      ? 'tag-result tag-result--focused'
+                      : 'tag-result'
                   }
                   {...getItemProps(index)}
                 >

proof-of-concepts/features/stories/utils.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+export function mergeRefs(...refs: React.MutableRefObject<any>[]) {
+  return function(node: React.ReactElement) {
+    // iterate over every ref
+    // assign the node to the current ref
+    refs.forEach((ref) => {
+      ref.current = node;
+    });
+  };
+}
+
+export function callAllEventHandlers(...fns: ((...args: any[]) => any)[]) {
+  return function(...args: any[]) {
+    fns.forEach((fn) => {
+      if (typeof fn === 'function') {
+        fn(...args);
+      }
+    });
+  };
+}
+
+export const noop = () => {};
+// the ref property refers to?
+
+// ref is a property on a JSX element
+// react is a UI runtime that creates predictable UI
+// so how is a ref actually assigned?
+// well, we wait until all the elements are rendered on the page
+// then the ref is assigned that node
+// ref={fn()}