CODEWITHSUNDEEP
javascripthtmlclojureclojurescript
Turmolt
Turmolt

Reputation: 123

Stop page reload when user hits "ENTER" in input field - ClojureScript

I am learning web development using Clojurescript and shadow-cljs and so far it has been awesome. I created a really bad reddit viewing webapp but have found that when the user first navigates to the site and clicks in the search field, then hits "ENTER" it will reload the page. I have added a (.preventDefault e) subscription to the onSubmit event, but it still reloads unless the user changes to the chart and back (adding # to the web-address).

Here is the reagent code that generates the input field:

[:input.form-control.mr-sm-2
  {:type "text"
   :placeholder "Aww"
   :aria-label "Search"
   :on-change #(rf/dispatch [:set-search-val  (-> % .-target .-value)])
   :onSubmit (fn [e] (do (.preventDefault e)
                         (identity false)))}]

2 Questions:

  1. What am I doing wrong? I would like for the subreddit to refresh on enter, but if I can just get it to stop reloading I will be happy

  2. Why does having # in the web address solve the problem?

Here is the source code for anyone interested

Upvotes: 1

Views: 588

Answers (1)

Svante
Svante

Reputation: 51501

You need to spell the attribute :on-submit (lower case, dashed), (edit) and it needs to be on the form, not the input.

Aside: you do not need a do to wrap the function body, and returning false in addition to calling .preventDefault on the event is redundant.

Upvotes: 3

Related Questions