Comments (10)
Well you must be very non-humor personality so ok... no problem there mate.
I liked your comment till I get to the end...
Guess github have its trolls too... like slack.
oh and let me highlight your username here buddy @gadfly361
from soda-ash.
I am also having the same issue!
from soda-ash.
@ac1dr3d @bcambel Unfortunately this is out of scope for soda-ash (which is an extremely thin translation from react to reagent) as the issue is upstream. This is a known issue with controlled inputs that reagent actually solves (reagent-project/reagent#79), but by using semantic ui react, the bug is reintroduced and you miss out on reagent's cute little hack.
from soda-ash.
bye bye soda then... was fun to use it.
from soda-ash.
@ac1dr3d If this is your main sticking point, an option that you could try is to use semantic ui classes on a [:input ]
rather than the sa/Input
component.
from soda-ash.
@gadfly361 in that case I have to import more libraries and more files... aaand I don't want to do that.
I'll just stick with Bulma from now on... lesson learned.... born to crawl - cant fly. nice try tho...
plus bulma is lighter... coz its on CSS totally.
from soda-ash.
@ac1dr3d You wouldn't need to import anything new (no additional dependencies). You get the semantic ui classes from this:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.0/semantic.min.css"></link>
which you already have to include when using soda-ash. However, I like Bulma and I wont dissuade you from using it.
As an aside, I encourage you to be more respectful in your future communications with the open source community.
from soda-ash.
hello @gadfly361
thank you for this nice and convenient library!
I just wanted to add another annoying issue probably due to this cursor position one that Iโve experienced in case it happens to somebody else. (I donโt expect a fix in soda-ash given its nature of course).
When using input fields for login (one of text type and one of password type) the browser (chrome) upon saving the login password was missing the last character of the password when hitting enter after filling the two inputs.
I spent quite some time trying to understand and indeed the workaround of using regular input fields instead of sa/FormInput solved it.
Thanks,
from soda-ash.
@apostolou Thanks for reporting this issue! You are correct that a fix is out of scope for soda-ash. That said, I'd like to try to reproduce and maybe I can add an FAQs section with inputs and this particular edge case.
Do you happen to have a code snippet to get me started in reproducing this?
from soda-ash.
Hello @gadfly361 ,
thank you for your reply and sorry for taking my time to answer.
You can find a code example below (using re-frame).
When ticking the checkbox, if you type a 6 digit password the browser saves only the 5 digits.
This doesn't happen when the checkbox is not ticked (=> with regular :input html fields).
However, I observe that the cursor position is lost in both cases.
Hope this helps and please let me know if you have some ideas for a workaround for the cursor issue.
thanks
(defn- input-with-icon [semantic? options icon]
[:div.ui.input.left.icon
{:class "large"
:style {:margin "0.5em"
:width "25em"}}
(vector (if semantic? sa/FormInput :input) options)
[:i {:aria-hidden "true" :class (str icon " icon")}]])
(defn login []
(let [{:keys [email password semantic?]} @(rf/subscribe [::subs/display-data [:login-panel]])]
[sa/Grid
{:text-align "center"
:vertical-align "middle"}
[sa/GridColumn {:width "12"}
[sa/GridRow {:text-align "center"
:style {:margin "1em"}}
[sa/Checkbox
{:required true
:label (r/as-component [:label "use react-semantic-ui input"])
:checked (or semantic? false)
:on-change #(rf/dispatch
[::events/display-data [:login-panel :semantic?] (.-checked %2)])}]]
[sa/GridRow
[sa/Header
{:text-align "center",
:color "blue",
:as "h2"
:style {:margin "1em"
:font-size "1.3em"}}
(str "Log-in with " (if semantic? "react-semantic input" "regular input") " fields")]]
[:form {:on-submit #(rf/dispatch [::events/http-post-login email password])}
[sa/Grid
[sa/GridColumn
[sa/GridRow
[input-with-icon
semantic?
{:type "email"
:placeholder "email"
:value (or email "")
:on-change
#(rf/dispatch [::events/display-data [:login-panel :email] (-> % .-target .-value)])}
"user"]]
[sa/GridRow
[input-with-icon
semantic?
{:type "password"
:placeholder "password"
:value (or password "")
:on-change
#(rf/dispatch [::events/display-data [:login-panel :password] (-> % .-target .-value)])}
"lock"]]
[sa/GridRow
[sa/Button
{:style {:margin "1em"}
:color "blue"} "Login"]]]]]]]))
from soda-ash.
Related Issues (10)
- Shape HOT 3
- How to do attributes with no value? HOT 2
- Using Tab and TabPane HOT 5
- how to use `as={Menu}` component class? HOT 2
- Modal HOT 3
- quick documentation note HOT 1
- Name of the Menu Item HOT 2
- Update semantic react to 0.79.1 HOT 5
- How to pass a child component as a prop? HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. ๐๐๐
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google โค๏ธ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from soda-ash.