Typeahead input throwing "Uncaught Error: Index Out Of Bounds"

al3x commented 9 years ago

I'm using the typeahead input in a project. It renders fine, and I can successfully use it to populate the input field and submit my form once. However, that form remains on the page (it's a single page app), and on any subsequent uses I get the following error:

Uncaught Error: Index out of bounds
cljs.core.linear_traversal_nth.cljs$core$IFn$_invoke$arity$2 @ core.cljs:1603
cljs.core.nth.cljs$core$IFn$_invoke$arity$2 @ core.cljs:1642
cljs$core$nth @ core.cljs:1617
(anonymous function) @ core.cljs:202
(anonymous function) @ core.cljs:233
executeDispatch @ react.inc.js:3297
SimpleEventPlugin.execute
Dispatch @ react.inc.js:15709
forEachEventDispatch @ react.inc.js:3285
executeDispatchesInOrder @ react.inc.js:3306
executeDispatchesAndRelease @ react.inc.js:2679
forEachAccumulated @ react.inc.js:17600
EventPluginHub.processEventQueue @ react.inc.js:2886
runEventQueueInBatch @ react.inc.js:10747
ReactEventEmitterMixin.handleTopLevel @ react.inc.js:10773
handleTopLevelImpl @ react.inc.js:10859
Mixin.perform @ react.inc.js:16683
ReactDefaultBatchingStrategy.batchedUpdates @ react.inc.js:9199
batchedUpdates @ react.inc.js:14914
ReactEventListener.dispatchEvent @ react.inc.js:10953

The issue seems to be in the choose-selected function. I'm not sure how it's getting out of bounds, but the issue is replicable even using the sample data source provided in the README.

yogthos commented 9 years ago

I'm not able to reproduce the issue myself. For example, something like this works fine:

(defn friend-source [text]
  (filter
   #(-> % (.toLowerCase %) (.indexOf text) (> -1))
   ["Alice" "Alan" "Bob" "Beth" "Jim" "Jane" "Kim" "Rob" "Zoe"]))

(defn home-page []
  (let [doc (atom {})]
    (fn []
      [:div [:h2 "numeric test"]
       [:p "selected value is: " (str @doc)]
       [bind-fields
        [:div {:field :typeahead 
               :id :ta 
               :input-placeholder "pick a friend"
               :data-source friend-source 
               :input-class "form-control" 
               :list-class "typeahead-list" 
               :item-class "typeahead-item" 
               :highlight-class "highlighted"}]
        doc]
       [:button
        {:on-click #(reset! doc {})}
        "submit"]])))

The typeahead sets a value in the atom and then the submit button clears it. I'm not seeing any errors in the log. Could you provide a sampler project exhibiting the issue by any chance?

al3x commented 9 years ago

That's strange, I'm seeing the same error when using your example code. Here's what I'm doing:

Typing some text into the input field. Doesn't matter whether I click on the autocomplete item or not.
Hit "enter" to submit.
Type some text again.
Hit "enter" to submit. The error occurs.

Also, is it a requirement that the "doc" atom be reset after every form submission? That isn't documented, IIRC.

yogthos commented 9 years ago

Ah ok yeah I can see that with hitting enter, I was using the mouse before. As for resetting the doc, that's not required by the library. I was just resetting it to see if that would cause the problem. In practice, you probably would want to reset it on successful submission to clear the form though.

I'll take a look at fixing the enter issue though.

yogthos commented 9 years ago

Ok just pushed out 0.5.9 to Clojars with the fix, let me know if everything looks good on your end.

al3x commented 9 years ago

Unfortunately, I'm seeing the same behavior with 0.5.9.

al3x commented 9 years ago

Actually, my apologies, this does seem to be resolved for me. My CLJS build hadn't updated to reflect the latest version of the dep. Thanks very much for the fix! :tada:

yogthos commented 9 years ago

yeah I get burned by the cljsbuild stuff all the time :)

reagent-project / reagent-forms

Typeahead input throwing "Uncaught Error: Index Out Of Bounds" #71