Buttons on input groups don't get disabled.

Hi, I've a application using ES6 classes, and I wish to know
if there is a way to use formsy-react-components not as mixin.

Best Regards

Thanks for the excellent library! Do you have any interest in adding a component to wrap the react-bootstrap-datetimepicker component? input[type=date] isn't well-supported yet, so I could work on a pull request if you are interested. I understand if you do not want to add any dependencies. Thanks!

htmlFor does not work because "for" in html links with id attributes and not name of the form. If id is not specified we could default it to be the name, possibly prefixed?

Just an idea anyway!

It does not like multiple definitions of property value in this code:

React.createElement(Checkbox, React.__spread({}, 
                        sharedProps, 
                        {name: "checkbox1", 
                        value: "Foo", 
                        label: "Check me out", 
                        rowLabel: "Checkbox (single)", 
                        value: true})
                    ), 

We should remove the form-control class from range inputs.

See:

• twbs/bootstrap#7879 (comment)
• twbs/bootstrap#11177 (comment)

Specifically for rows, I'd want to be able to arrange them on the page with arbitrary class names based on my grid, etc.

Right now we're using Bootstrap, but moving away from it is in the cards.

I can do a PR of what I think I'd do.

I think it would be better that it can scroll to first invalid form control when the form is not validate

Is it possibile to merge latest master commits into bootstrap-4-dev branch? I saw that it still requires react .14 and formsy-react .17.

Thanks

Seems like formsy-react-components requires formsy version 0.13.1 but the current version is 0.14.1

This project have support for react 0.14?

From #31 (comment):

So in the component.js mixin there is a getId function which is trying to do a hash of stringifyed props.
this.hashString(JSON.stringify(this.props)
The props has a circular structure so cannot be stringifyed when we pass in a node. By just supplying an ID props the function wont run this code and I can use a node. Wondering if we need to make some changes to not call stringify on the props.

Here is the function: https://github.com/twisty/formsy-react-components/blob/master/src/mixins/component.js#L33-L35

Need to tweak the strategy for generating the ID.

https://github.com/twisty/formsy-react-components/blob/master/src/row.js#L76

Why? Ordinary labels, say for Input, do not.

Result is CheckboxGroup with rowLabel is bold, other form labels are not.

(Thanks for the project BTW, very useful.)

Current source:

layout: this.props.layout || 'horizontal',

Suggested source:

layout: this.props.layout || FormsyReactComponents.defaults.layout || 'horizontal'

Shall I send a PR?

I only bring this up as an issue because I am personally starting to use the alpha. I started using this package a week ago and it has been a life saver. I have been updating some of the components to use the new classes. If you are cool with it I will fork and create a pull request when I think its ready. I am guessing it would need to live in a separate branch unless we added some type of switch that tells the package what components to use.

Anyway thanks for this either way!

Brought to my attention PR #35, we should really be able to render any valid attribute on individual options within HTML select elements.

See: option attributes and global attributes.

After upgrade to React v15, getting the following warning:

warning.js?0260:44 Warning: Input is changing an uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

This is happening only when Input is used without value prop (no initial value). I believe this could be fixed if initial value is assumed to be undefined or an empty string when none is provided (React v15 will also emit a warning if null is used).

solved -> my mistake

I'm thinking of bringing the playground app into the main repo, as it's a poor man's test suite for this project at the moment, and would benefit from being more closely tied to the source.

anyone working with electron example using formsy?

I just started getting Only a ReactOwner can have refs errors when using the CheckboxGroup component. What's weird is that it doesn't happen for any other component, including RadioGroup. Does CheckboxGroup do anything different that might be triggering the issue?

Here's the full error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

Hidden input elements fail to render in 0.6.5

When this

render: function () {
    return (
      <Formsy.Form className="form-signin" role="form" onSubmit={this.handleSubmit} method="post">
        <h3 className="form-signin-heading">Please sign in</h3>
        <Input type="hidden" name="provider" value="WindowsAuthentication"/>
        <Input className="form-control username" layout="vertical" type="text" name="username" placeholder="Username"/>
        <Input className="form-control password" layout="vertical" type="password" name="password"
               placeholder="Password"/>
        <button className="btn btn-lg btn-primary btn-block" type="submit">Sign in</button>
      </Formsy.Form>
    )
  }

Then this

Uncaught TypeError: Cannot read property 'length' of undefined
hashString  @   app.0.0.0.js:24317 (React.hashString)
getId   @   app.0.0.0.js:24336 (Input.renderElement)
renderElement   @   app.0.0.0.js:24177
render  @   app.0.0.0.js:24138

There is a mistyped line for the demo. First email input should be

<Input
    {...sharedProps}
    name="email"
    value=""
    label="Email"
    type="email"
    autoComplete="off"
    placeholder="This is an email input."
    validations="isEmail"
/>

Mentioned in #38

When using addonAfter, addtional styling for the Input component may be necessary to correctly display the error icon.

Reproduced with RadioGroup usage but probably hit also other fields.

If a label is not provided but you want the field required, you'll get a layout like this:

Probably the required marker must not be displayed in this case (or maybe a new attribute for not displaying it can be useful?)

Just noticed this. The error class is applied to the containing div and not the element.

Hi, I updated formsy-react to 0.18.0 to make it satisfied with react 15. The problem now is that formsy-react-components does not work anymore. It might well be something I'm doing wrong, so just let me know if there is any info that I can give that might be helpful.

Currently, the onChange for <Input type="file" /> sets the formsy value to be event.currentTarget.value (this is how all our other input types work).

This value maybe isn't the most useful data the element collects.

Instead, using event.currentTarget.files as the element's returned value could be more useful.

Considering changing this to be the default behaviour.

See: christianalfoni/formsy-react#126

Suggestion of integration with react-select2-wrapper

Select2.js

define(function (require, exports, module) {/*jshint node:true */

'use strict';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var React = require('react');
var ReactDOM = require('react-dom')
var Formsy = require('formsy-react');
var ComponentMixin = require('./mixins/component');
var Row = require('./row');
var select2 = require('select2')

var Select = React.createClass({
    mixins: [Formsy.Mixin, ComponentMixin],

    displayName: 'Select',

    getDefaultProps: function(){
        return {
            data: [],
            events: [
              ['change', 'changeValue'],
              // ['select2:open', 'onOpen'],
              // ['select2:close', 'onClose'],
              ['select2:select', 'changeValue'],
              ['select2:unselect', 'changeValue'],
            ],
            options: {},
            multiple: false
        };
    },

    getInitialState: function() {
        return {
          el: null,
        };
    },

    changeValue: function changeValue(event) {
        console.log("changeValue", event);
        var target = event.currentTarget;
        var value;
        if (this.props.multiple) {
            value = [];
            for (var i = 0; i < target.length; i++) {
                var option = target.options[i];
                if (option.selected) {
                    value.push(option.value);
                }
            }
        } else {
            value = target.value;
        }
        this.setValue(value);
        this.props.onChange(this.props.name, value);
    },

    componentDidMount() {
        if (this.props.select2 != undefined){
            this.el = $(ReactDOM.findDOMNode(this));
            this.el.select2(this.props.select2);
            this.props.events.forEach(event => {
              this.el.on(event[0], this.changeValue);
            });
        }
    },

    componentWillUnmount() {
        if (this.props.select2 != undefined){
            this.props.events.forEach(event => {
              this.el.off(event[0], this.changeValue);
            });
            this.el.select2('destroy');
        }
    },

    renderElement: function renderElement() {
        var optionNodes = this.props.options.map(function (item, index) {
            return React.createElement(
                'option',
                _extends({ key: index }, item, { label: null }),
                item.label
            );
        });
        return React.createElement(
            'select',
            _extends({
                className: 'form-control'
            }, this.props, {
                id: this.getId(),
                value: this.getValue(),
                onChange: this.changeValue,
                disabled: this.isFormDisabled() || this.props.disabled
            }),
            optionNodes
        );
    },

    render: function render() {

        if (this.getLayout() === 'elementOnly') {
            return this.renderElement();
        }

        return React.createElement(
            Row,
            _extends({}, this.getRowProperties(), {
                htmlFor: this.getId()
            }),
            this.renderElement(),
            this.renderHelp(),
            this.renderErrorMessage()
        );
    },
});

module.exports = Select;
});

It seems formsy-react has been abandoned by it's owner.

At the moment it still works, but there are plenty of issues with fixes submitted by the community that can't be released without the owner's participation.

See:

• Contributors need NPM publish access
• Further development
• Is it logical to still use formsy-react?

Could you please move on to the newer release of React (v15)? In the moment no breaking error can be experienced when using the components in v15 environment.
The only problem right now is the package.json which requires v0.14 in its dependencies section. Moving it to devDependencies, npm-install won't pull React v0.14 into its modules tree and therefore it won't result in a conflict caused by the two React versions.

I would like to pass in a tooltip as a node for my label but looking at the source code the label propType is set to a string. Would we be able to change it to accept and object as well?

<Input
  name="cvv"
  label={<OverlayTrigger placement='top' overlay={<Tooltip><strong>Holy guacamole!</strong></Tooltip>}><p>Check this info.</p></OverlayTrigger>}
  type="text"
  value={this.props.cvv}
  />

How about make inputs more accessibility with aria-invalid and aria-describedby? ♿
See https://medium.com/@roblcopeland/how-can-i-make-my-forms-a-little-more-accessible-1726d63210f2
It would be cool

Execute:

node r.js -convert path/to/commonjs/modules/ path/to/output

When I set a addon with an element

addonBefore = { <i name="test" className='ion-person' /> }

It throws Uncaught TypeError: Converting circular structure to JSON, when I doesn't set a ID
I found that error is on this line, by hashing the addon prop
https://github.com/twisty/formsy-react-components/blob/master/src/mixins/component.js#L119

But I don't have a "clean" solution for this now.

Right now this codebase uses the ref="string" pattern a lot:

https://github.com/twisty/formsy-react-components/search?utf8=✓&q=ref

But the React docs mention this approach will be deprecated in favor of callbacks:

https://facebook.github.io/react/docs/more-about-refs.html

Also, for some weird reason string refs have been causing errors in certain situations, while callback refs don't. Would you consider a PR to replace the strings by callbacks?

I mean I'm unable to set refs to inner input element.

Is there a way or hiding the icons? I have looked at the source and can't see a way of doing it. Have I missed something? If not I will add this option in.

May be worth considering something like:

• http://www.abeautifulsite.net/whipping-file-inputs-into-shape-with-bootstrap-3/

Input is changing a uncontrolled input of type text to be controlled. Input elements should not switch from uncontrolled to controlled (or vice versa). Decide between using a controlled or uncontrolled input element for the lifetime of the component. More info: https://fb.me/react-controlled-components

This happens on a few of my forms.. not sure why

How about improve performance with pure-render-mixin?

I love this project. Thanks for doing a lot of work for me!

I'm confused by some things I see:

In input.js:

changeValue: function changeValue(event) {
    var value = event.currentTarget.value;
    this.setValue(value);
    this.props.onChange(this.props.name, value);
},

On the last line, why wouldn't you call this.props.onChange(event)?

My motivation here is that I'm using redux-form, and trying to use this library alongside it, as formsy-react's validation is much better. redux-form's onChange expects an event OR a value, and you are passing the input name and then the value, which seems odd.

I thought about modifying changeValue myself, by creating my own React component. My idea was to use input.js's Input class as a mixin for my component (with a slightly modified changeValue), but you can't use a react class as a mixin, you can only use a plain javascript object. input.js does not expose a plain object. Would you consider exposing the plain javascript object?

Will / Does this library support IE8? The current site that I am working on has a large IE8 audience and unfortunately cannot be ignored 😞

See https://travis-ci.org/twisty/formsy-react-components/jobs/67965975

Error: Please run node with the --harmony flag!

Possibly related to jestjs/jest#243

This: https://github.com/andreypopp/reactify#code-in-3rd-party-packages-isnt-being-transformed-by-reactify

Seems like there is no way to disable autocomplete on forms? Please let me know if there is.