zabute / formsy-semantic-ui-react Goto Github PK

Using TextArea without label still creates a label.

The following code will create a red * even though no label is set:

<TextArea required name='textarea' />

Using Input on the other hand won't have this problem:

<Input required name='input' />

I'm expecting no label when it is not set like the Input component.

autoComplete is supported/works on all semantic-ui-react input components, but only on the Input for formsy-semantic-ui-react.

Expected Behavior

autoComplete would be allowed/working here.

Current Behavior

Typescript Error:

Property 'autoComplete' does not exist on type 'IntrinsicAttributes & Omit<IFormsyDropdownProps, keyof InjectedProps<any>>'.ts(2322)

Wen using:

The autocomplete attr is not visible in the rendered HTML.

Steps to Reproduce

<Form.Select
  autoComplete="tel-country-code"
  defaultValue={defaults.PhoneCode}
  options={getCountries().map((country: countryCode) => {
    return {
      description: `+${getCountryCallingCode(country)}`,
      key: country,
      flag: country.toLowerCase(),
      text: en[country],
      value: country,
    }
  })}
  label="Phone Country Code"
  name="PhoneCode"
  search
/>

Context (Environment)

Required for creating a Phone Number Input (with Country Code Dropdown) autofill correctly in Chrome.

I set the value of input as '' after submitted.
Input validation appears after submitted.

The desired result is to hide validation after submit.

the desired result

I have a form where all fields must be filled and the checkbox must be set to 'true' in order to enable the submit button.
The issue (see GIF) is that Checkbox looses 'isRequired' and after first click it can be unclicked, but the Form will still be valid and the button will be enabled.
Checkbox should keep its 'isRequired' prop.

when you provide a name prop in semantic-ui-react input, the "for" label is populated in the rendered HTML.

Semantic UI React

<Form.Input
  id="name"
  name="name"
  value={this.state.name}
  icon="shopping bag"
  iconPosition="left"
  onChange={this.handleChange}
  width
/>

Rendered HTML

<label for="name">Name</label>
<div class="field">
  <div class="ui left icon input">
    <i aria-hidden="true" class="shopping bag icon"></i>
    <input type="text" id="name" name="name" value="">
  </div>
</div>

formsy-semantic-ui-react

<Form.Input
  required
  name="firstName"
  label="First name"
  placeholder="First name"
  validations="isWords"
  errorLabel={ <Label color="red" pointing/> }
  validationErrors={{
    isWords: 'No numbers or special characters allowed',
    isDefaultRequiredValue: 'Fist Name is Required',
  }}
/>

rendered html

<label><!-- react-text: 92 --> <!-- /react-text --><!-- react-text: 93 -->First name<!-- /react-text --><!-- react-text: 94 --> <!-- /react-text --></label>
<div class="ui input">
  <input type="text" required="" name="firstName" placeholder="First name" value="">
</div>

This enables the input to be focused when you click the label.

Hi,

the updateInputWithErrors() should call this.formsyForm.updateInputsWithError().

Currently it calls this.formsyForm.updateInputWithErrors(). (https://github.com/zabute/formsy-semantic-ui-react/blob/master/src/Form.js#L34)

See here: https://github.com/christianalfoni/formsy-react/blob/master/API.md#updateinputswitherrorerrors

Is there a proper way to retrieve selected value from the Select component? This is a stateless component, when using refs to get the value from it, react warning will show up saying calling refs on a stateless component might fail.

Formsy provided validationErrors (object) and validationError (string) https://github.com/formsy/formsy-react/blob/master/API.md#validationerror The latter is used when one doesn't want specific error messages. This works when the validation error is from one of the specified validators, but doesn't when it comes from required.

As an example, the following should produce the same error message when the field is empty and when it's an invalid email.

              const errorLabel = <Label color='red' pointing />

              <Form.Input
                label='Email'
                type='email'
                name='username'
                validations='isEmail'
                errorLabel={errorLabel}
                validationError='Please enter valid email address.'
                required
              />

However it produces the below:

This is reproducible on the examples in the repo as well.

2 quick things.

1. Is there any reason you can't update the peer dependencies for React to include 16? It looks like formsy uses 15 or 16.
   https://github.com/formsy/formsy-react/blob/master/package.json

2. The link in the documentation that points to formsy-react is for the old repo. The new repo is at the link below
   https://github.com/formsy/formsy-react/

The following code

const errorLabel = <Label basic pointing />
...
<Form.Input type='text' name='username' placeholder='E-mail address' icon='at' 
  required
  errorLabel={errorLabel}
  validations='isEmail'
  validationErrors={{
    isEmail: 'This is not a valid e-mail address',
  }} />

Produces this in the DOM

<div class="field">
  <div class="error required field">
    <div class="ui icon input">
      <input type="text" value="sdfsdf" name="username" placeholder="E-mail address" required="">
      <i aria-hidden="true" class="at icon"></i>
    </div>
  </div>
  <div class="ui pointing basic label">This is not a valid e-mail address</div>
</div>

Notice the <div class="error required field"> in the <div class="field">

This creates unwanted margin between the field and the validation error label

Hi,

I've copied the example from the readme, however, the form is still submitting and no validations seem to be working?

Here are my versions: "semantic-ui-react": "^0.77.2","formsy-react": "^1.1.4", "formsy-semantic-ui-react": "^0.3.2",

Is it possible to have input without a label? setting label prop to null doesn't work.

Looks like is not possible to provide extra params to Form.RadioGroup like:

• as
• inline
• grouped

Since you are using <Form.Group> from semantic-ui-react in src/FormsyRadioGroup.js:60, maybe something like this can solve the issue:

// src/FormsyRadioGroup.js

  render() {
    const {  
      label,
      required,
      formRadioGroup,
      children,
      getValue,
      errorLabel,
      isValid,
      isPristine,
      getErrorMessage,
      ...otherProps, // <== here
    } = this.props;

    return (
      <Form.Group {...otherProps}> // <== and here
        ...
      </Form.Group>
    )
  }

Thanks!

Hello. I would to use formsy with telephone number pattern (EX. 012-345-6789 or 012-345-678) and time pattern (EX 17:00). Have some guide for this?
PS.I love you work so much.

Trying to add custom validationRule but don't have access to formsy. Would like to do something like this below.

import { Form } from 'formsy-semantic-ui-react';

Form.formsy.addValidationRule('isMoreThan', function (values, value, otherField) {
    return Number(value) > Number(values[otherField]);
  });

Is there a different work-around?

Dropdown is fine to use, however, when using <Select/>, it prompts errors:

Warning: Failed prop type: Invalid prop as of value select supplied to FormsyDropdown, expected one of [null,null,null,null].

Module not found:
Can't resolve 'formsy-react' in 'C:\Source\node_modules\formsy-semantic-ui-react\lib'

Although it is possible to pass a node as the value of label e.g.

<FormsyInput label={<span>Label<em> - Instruction</em>} />

React displays the following warning:

Warning: Failed prop type: Invalid prop label of type object supplied to FormsyInput, expected string.

Steps to reproduce:

$ npm i --save formsy-semantic-ui-react formsy-react
$ cd node_modules/formsy-semantic-ui-react
$ npm i
$ npm run example-app

ERROR in ./example/index.js
Module parse failed: /home/gardner/src/mobile/node_modules/formsy-semantic-ui-react/example/index.js Line 2: Unexpected token
You may need an appropriate loader to handle this file type.
| // import 'babel-polyfill';
| import React from 'react';
| import { render } from 'react-dom';
| import App from './App';
 @ multi main

Hi,

formsy-react gonna release a major version 2, is should solve many bugs in v1.
Let's open to discussion of how would we want this lib to adjust to v2 at this thread.

I want to contribute :]

Formsy: React.createClass is deprecated and will be removed in version 16. Use plain JavaScript classes instead. If you're not yet ready to migrate, create-react-class is available on npm as a drop-in replacement

Can you update the package to the new react please?

Adding inline attribute to a <Form.Input> produces the following error:

Warning: Received true for a non-boolean attribute inline.
If you want to write it to the DOM, pass a string instead: inline="true" or inline={value.toString()}.

Adding inline="true" makes formsy complain about a non-boolean value given to a boolean prop.

This does not occur with normal semantic-ui <Form>.

I already love the way zabute/formsy provides a clean structure to SUR Forms.
But would be glad if someone adds support for @types/formsy-semantic-ui-react for the apps build in ts.

It seems that Input is missing support for the defaultValue attribute. How do I assign a default value to the input field ?

I made a quick CodeSandbox example which reproduces the error:

The Dropdown element, as well as the Select since it relies on it, don't pass the event or data back to the parent component in the onChange handler. Looks like it can be fixed by modifying the handleChange method in FormsyDropdown.js like so:

  handleChange = (e, data) => { //retrive whole data argument
    const value = data.value; //set value to make the rest work without changes
    const { multiple, getValue, setValue, onChange } = this.props;
    if (multiple && getValue() && getValue().length > value.length) this.showError();
    setValue(value);
    console.log(e, data);
    if (onChange) onChange(e, data); //pass arguments back to parent
  }

note: This is done in line the with the Semantic UI onChange syntax, and not the name/value syntax used on for formsy's onChange functions.

We should only import the components we need, or use a babel plugin to transform the code: https://www.npmjs.com/package/babel-plugin-transform-semantic-ui-react-imports

What's the easiest way to compare 2 <Input type="password"> so that they are valid if they match?

Hi. I am sorry if this is an inconvenient question, but I was wondering if there will be support for React 16 in the nearby future.
Thanks for creating this library.

I'm trying to get my label in front of the textarea element but setting the inline parameter doesn't work.

<TextArea
    inline
    name="description"
    placeholder="Description"
    label="Description"
    required />

Am I missing something?

Hi,

I am using semantic ui react Popup inside formsy-semantic-ui-react Form, which is not working.

Kindly let me know how to use Popup inside formsy-semantic-ui-react Form.

Thanks,
Mallikarjuna.

Please delete, posted this in the wrong repo.

Would it be possible to get label support? I attempted to use inline={false} but it apparently doesn't allow label usage.

Thanks for the library though, it makes my life a lot easier.

Hi,
First of all, thank you for this great lib!

I'm looking for a way to render labeled-input with the form field label,
The final result should look like that

I know that I can re-implement your input functionality, but I don't think that this is a good practice.

I've tried to use inputAs with custom component, but looks like there are 2 issue:

1. prop-types are strict to SUIR Input
2. There is no form field label because of this check

working example

How do u suggest to fix this?

I've 2 suggested solution:

• change inputAs prop type validation
• remove the check for shortHandMode (why it is there anyway?)
• add support for inputAs to accept react element (optional but will improve alot the usage of the component)

This will allow me to pass custom input to the inputAs prop like here

• change inputAs prop type validation
• be a ware of the implementation details and add label element to the custom input

const LabeledInput = props => (
  <>
    <label>{props.label}</label>
    <Input
      {...props}
      label={{ basic: true, content: 'kg' }}
      labelPosition="right"
      placeholder="Enter weight..."
    />
  </>
);

Personally I don't like option # 2.

WDYT?

I was surprised when I was reviewing the npmjs page for this project and found it had a @types package dependency required, thinking this to be rather peculiar.

I cannot use Form from formsy-semantic-ui-react. And they show this error to me.

This is my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import {BrowserRouter as Router , Route} from 'react-router-dom'
import PlaceForm from './containers/AddPlace';
import Home from './containers/Home'
import 'semantic-ui-css/semantic.min.css';

ReactDOM.render(
<Router>
<div>
<Route path="/" exact component={Home} />
<Route path="/addplace" component={PlaceForm} />
</div>
</Router>
, ``document.getElementById('root'));`

Thanks for maintaining this library! It has been a huge help!

I think this one should be fairly straight-forward to fix. I have an uncontrolled form component with a checkbox.

Expected behavior: The initial value of the checkbox is not defined, and therefore the value should be false if the form is submitted.

I think the initial value should just default to false if it's not explicitly set to true.

Also, even if I set checked={false} on the component, it will still return undefined on submit if you have't checked/unchecked it.

import React, { Component } from "react";
import { Form } from "formsy-semantic-ui-react";

class MyExampleForm extends Component {
  render() {
    return (
      <Form onSubmit={data => console.log(data)}>
        <Form.Checkbox label="my checkbox" name="testing" />
        <Form.Button type="submit">Submit</Form.Button>
      </Form>
    );
  }
}

// [hit submit] => undefined
// [hit the checkbox then hit submit] => true
// [hit the checkbox again then hit submit] => false

Must implement DefaultValue support for the following components:

• FormsyCheckbox
• FormsyDropdown
• FormsyRadioGroup

I want to have a form as part of a wizard that has a number of steps. The next button should submit the form but the next button is outside the form.

I have read about calling this. firm.submit() but it doesn't work for me (christianalfoni/formsy-react#45)

<Form
  onValidSubmit={this.handleSubmit}
  innerRef={element => (this.form = element)}
>
  <Form.Input
    label="Username"
    name="appUsername"
    value={appUsername || ""}
    onChange={this.handleChange}
    validations="maxLength:128"
    validationErrors={{
      isDefaultRequiredValue: "Required",
      maxLength: "Must be less than 128 characters.",
    }}
    error={!!appUsernameError}
    errorLabel={errorLabel}
    required
  />
</Form>

Checking this.form in ComponentDidMount (or from other methods) returns undefined and I see the error Warning: React does not recognize the `innerRef` prop on a DOM element.

Warning: Invalid value for prop 'control' on <div> tag. Either remove it from the element, or pass a string or number value to keep it in the DOM.

Formsy uses the required prop to signal that a field shouldn't be empty. When specified, this library also passes it through to Semantic's component, causing it to display some extra styling when there is a label (a red asterisk in the default theme). However in certain cases it is desirable to keep the validation, but avoid the styling, such as with a login form. I couldn't find any workaround to achieve this other than overriding the CSS.

Hi,

first of all, thank you for your work. :-)
It's not a bug, but could you please update the peer dependency "semantic-ui-react"? I get allways the error
UNMET PEER DEPENDENCY [email protected], when I install a new package.

Thank you

<Form.Select label='Sender Type' required name='sourceType' placeholder='Sender Type'
options={sourceTypes} search onChange={props.sourceTypeChanged} />
The onChange function gets called; but the value is not reflecting in the Select field.

One solution that I figured out is to use the semantic-ui-react form only for select field.
But the formsyForm won't validate these fields

When setting a string value on a Checkbox, this value never gets used (i.e. sent to the server). Instead true/false will be used.

Expected Behavior

Use the value set on the checkbox if it is checked, as with HTML checkboxes.

Current Behavior

The checked state gets provided as the value.

This definitely seems by design, am I missing something? The CheckboxRadioValueType indicates that this can be a string but I don't see the point if it never gets used?

https://github.com/zabute/formsy-semantic-ui-react/blob/master/src/FormsyCheckbox.tsx#L82

I think I've found a bug when using this package rather than semantic-ui-react directly.

Updating a form input in local state when the input changes, works as expected using semantic-ui-react but with formsy-semantic-ui-react when updating an input value when the cursor is not at the end it enters the first character and then causes a rerender, jumping the cursor to the end of the input.

eg.

1. Input value is 'abc'
2. Attempting to insert '123' between the characters 'ab' results in 'a1bc23'

See below example source code:

import React, { Component } from 'react';
import { Form } from 'semantic-ui-react';
// import { Form } from 'formsy-semantic-ui-react';

class TestForm extends Component {
  state = {
    name: '',
  };

  handleChange = (e, { name, value }) => this.setState({ [name]: value });

  render() {
    return (
      <Form>
        <Form.Input name="name" label="Name" onChange={this.handleChange} />
      </Form>
    );
  }
}

export default TestForm;

Am I doing something wrong or is this a valid bug?

Many thanks in advance for any help.
Jamie

Form fields in From.Groups should be able to specify their width

https://react.semantic-ui.com/collections/form#form-example-width-field

<Form>
    <Form.Group>
      <Form.Input label='First name' placeholder='First Name' width={6} />
      <Form.Input label='Middle Name' placeholder='Middle Name' width={4} />
      <Form.Input label='Last Name' placeholder='Last Name' width={6} />
    </Form.Group>
    <Form.Group>
      <Form.Input placeholder='2 Wide' width={2} />
      <Form.Input placeholder='12 Wide' width={12} />
      <Form.Input placeholder='2 Wide' width={2} />
    </Form.Group>
    <Form.Group>
      <Form.Input placeholder='8 Wide' width={8} />
      <Form.Input placeholder='6 Wide' width={6} />
      <Form.Input placeholder='2 Wide' width={2} />
    </Form.Group>
  </Form>

Just tried this, but I get:

Error Screenshot

I import:

import { Form, Input, TextArea, Checkbox, Radio, RadioGroup, Dropdown, Select } from 'formsy-semantic-ui-react';

And this is my form:

Form Screenshot

Am I doing anything wrong?

I would love to have an input that accepts a user value, and/or shows a dropdwon (such as Search does in semantic-ui, or Autocomplete does in material-ui.) It looks like Search has an input property which accepts a Component, so it may be wrappable with formsy?

Is it possible to have a sort of tag dropdown where users can add their own tags?