Cacher is the code snippet organizer for pro developers

const InputCommon = observer(({ id, onKeyDown, badge, ...props }) => {
  const { uiStore } = useStores()
  const inputRef = useRef(null)

  useEffect(() => {
    uiStore.focus.isInFocus(id) && setTimeout(() => inputRef.current.focus(), 0)
    reaction(
      () => uiStore.focus.current,
      (current) => {
        uiStore.focus.isInFocus(id) ? setTimeout(() => inputRef.current.focus(), 0) : false
      }
    )
  }, [])

  return (
    <React.Fragment>
      <InputText
        inputRef={inputRef}
        autoFocus
        value={uiStore.input.map.get(id) || ''}
        onChange={(e) => uiStore.input.setValue(id, e.target.value)}
        onBlur={() =>
          uiStore.focus.isInFocus(id) ? setTimeout(() => inputRef.current.focus(), 0) : true
        }
        onFocus={() => inputRef.current && inputRef.current.select()}
        onKeyDown={(e) => (e.target.value ? onKeyDown(e) : false)}
        disabled={!uiStore.focus.isInFocus(id)}
        {...props}
      />
      {badge && badge.trigger && (
        <span
          className={`badge badge-${badge.context}`}
          style={{ position: 'absolute', top: '10px', right: '25px' }}
        >
          {badge.description || ''}
        </span>
      )}
    </React.Fragment>
  )
})