Comments (11)
Good catch. I actually thought it did this already! Must get around to writing tests and docs!
Your idea of using the element name for an ID is sound, although this might get a bit hairy as I think name properties might be getting a bit more complex.
Where no ID is supplied, perhaps we should just generate a UID for the element ID?
from formsy-react-components.
Yeah I suppose you could do this... I hate the idea of UUIDs floating round in the markup but it's all change in the world of react :-D Go for it!
Be aware that I've had incredibly strange results in the past with duplicate ids in the same document so this must be something to avoid. I would personally just convert the name into something sensible i.e. addresses[0][street] -> address_0_street would be a fine and descriptive id and no need to come up with UUID generation stuff.
from formsy-react-components.
"addresses[0][street]".split('[').join('_').replace(']', ''); // might be all you need.
from formsy-react-components.
That should do it, thanks! Ideally I'd prepend a unique ID of the enclosing form, but not sure how to do that at the moment without making the parent-context mixin mandatory. So for now I'll append a hash of the component's props for added uniqueness.
I've got mixed feelings on the aesthetics of generated IDs in markup. Perhaps it's better that they look machine-generated so they're differentiated from hand crafted markup that's more likely to embody the intent of the author. Maybe having the name slug and bit of uniqueness is the happy medium!
from formsy-react-components.
Thanks for that! Works great 👍
from formsy-react-components.
Another option is to wrap the input with a label, without htmlFor and unique ID:
<label><span>Name</span> <input type="text" /></label>
from formsy-react-components.
It works for me! We try to generate code as close as possible to that in
the Bootstrap docs, so unlikely to change to your suggestion (although I'm
sure it works!). Maybe post a snippet of the generated code that isn't
working.
On Thu, 30 Jun 2016 at 19:06 Elad Ossadon [email protected] wrote:
Another option is to wrap the input with a label, without htmlFor and
unique ID:Name
—
You are receiving this because you modified the open/close state.
Reply to this email directly, view it on GitHub
#13 (comment),
or mute the thread
https://github.com/notifications/unsubscribe/AAA_dGDc8INJ42WT0tY5ykM65l2cAxBsks5qRAWggaJpZM4FEtXd
.
from formsy-react-components.
Oops sorry @elado, excuse the curt reply. I read your comment in email and thought it was a new issue.
Clicking labels to focus the form control should work out-of-the-box with these components. If they don't, feel free to open another issue outlining the circumstances where there is a problem.
In some cases -- like checkbox groups -- we style a "fake label" to identify a group of form controls, in this case clicking the "fake label" won't focus the group, but individual labels within that group should work okay (I think these use the pattern you have outlined above).
from formsy-react-components.
Was this issue fixed? My form isn't focusing it when using React syntax.
<div className="form-group">
<label htmlFor="email" className="h4">Target email:</label>
<input type="email" name="email" className="form-control" />
</div>
from formsy-react-components.
Can you show us the react code you are using - the example there you are giving does not appear to use formsy-react-components but rather the internal base react versions that map to pure HTML elements.
If you are using formsy-react then you should try requiring or including say an Input element:
var FRC = require('formsy-react-components'),
Input = FRC.Input;
Then in your render method we can do something like:
<Formsy.Form>
<Input type="email" name="email" label="Target Email:" validations="isEmail" required />
</Formsy.Form>
This will generate all the bootstrap stuff for you. Maybe read the docs :^)
from formsy-react-components.
I apologize, direct organic search brought me here and I didn't read what repo this was from.
from formsy-react-components.
Related Issues (20)
- React 16.1.1, Formsy 1.1: mixins problem HOT 4
- No Negative Numbers in Input HOT 4
- Change label prop to support PropTypes.node HOT 3
- Doubt/Feature: Prevent Select setValue HOT 2
- wrong install documentation ?
- Overriding icons HOT 1
- React.createElement: Type is invalid when creating a Form HOT 1
- Input component with numeric/alphanumeric/alpha value restriction HOT 2
- Select with numerical values HOT 1
- validatePristine textarea not displaying validation error HOT 4
- render elements within 'form-group'
- onChange is called before the value has been set on formsy
- Does this work with bootstrap 4? HOT 1
- New package release request HOT 2
- Refactor UNSAFE_componentWillReceiveProps
- Build correct releases HOT 5
- Editable input for Select component HOT 2
- Release of 2.0.0 - what remains? HOT 1
- add support for 2.1.0. and higher versions of formsy-react HOT 1
- Publish latest fixes to npm
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 formsy-react-components.