vitaliymatveev / reagent-js Goto Github PK

Problem saving empty HtmlField throws this error

Expect Fix

How reproduce the bug

1. Choose some field into an oneOf-field. You can see our substituted data.
2. Choose another field into the oneOf-field. You can see our another substituted data.
3. Return on the first field. Our substituted data disappeared.

Video_with_the_error.zip

Problem this error falls to console after submit

Expect Fix.

DateField on every keyDown event throws error Uncaught TypeError: Cannot read property 'selectionStart' of null

check is boolean field used correctly

All necessary fields are discribed in Redmine page, blocks Идентификаторы ФЛ, ИП, ЮЛ and Банковские реквизиты http://redmine.it.vm/projects/project_directory/wiki/%D0%A1%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA_%D0%BF%D0%BE%D0%BB%D0%B5%D0%B9#%D0%98%D0%B4%D0%B5%D0%BD%D1%82%D0%B8%D1%84%D0%B8%D0%BA%D0%B0%D1%82%D0%BE%D1%80%D1%8B

• ОКАТО 10 symbols

Error message: Uncaught TypeError: a is not a function

Problem: validation activates in masked input fields while being filled by the user
Task: The "Неверный формат" validation message should be displayed only if the user fills the masked input field incorrectly and switches to another field

This error falls in console

Expect Fix(styles must be avaliable to user)

Now we have many special fields such as inn, okato, snils etc.

But there isn't a special field for email which is often used.

Problem component renders a list of items and Form provided by reagent-js. Depending on selected item different schemas will be provided to Form component. All values will remain in the FinalForm state if the user occasionally fills the wrong form and then switches to another one.

Expect all saved values from the previous schema must be flushed.

Try this component

const radioButtons = [
  {
    value: 'aaa',
  },
  {
    value: 'bbb',
  },
];

class App extends Component {
  state = {
    selectedValue: radioButtons[0].value,
  };

  handleChange = e => {
    const selectedValue = e.target.value;
    this.setState(() => ({ selectedValue }));
  };

  render() {
    const { selectedValue } = this.state;

    return (
      <div>
        {radioButtons.map(({ value }) => (
          <div style={{ display: 'block' }}>
            <label htmlFor={value}>click for {value} prefix</label>
            <input
              name={value}
              type='radio'
              value={value}
              onChange={this.handleChange}
              checked={selectedValue === value}
            />
          </div>
        ))}
        <Form
          schema={{
            type: 'object',
            properties: {
              [selectedValue]: {
                type: 'object',
                properties: {
                  firstKey: {
                    type: 'string',
                    title: 'First',
                  },
                  secondKey: {
                    type: 'string',
                    title: 'Second',
                  },
                },
              },
            },
          }}
          onSubmit={data => console.log('res:', data)}
        />
      </div>
    );
  }
}

Problem Form ignores all changes if key is a number(letters and digits is fine tho). Error below falls to console.

Expect Fix(numeric key must be a valid one).
This schema might help:

{
  type: 'object',
  properties: {
    123: {
      type: 'string',
      title: 'some title',
    },
  },
}

For example field should return '111-111-111 11' instead of '11111111111'.

Problem after Dialog is opened first symbol becomes last and cursor shifts to the input start
Expect cursor should follow first typed char

Problem passing random value equals null to value property of a Form component causes errors while submiting. (value may not be related to provided schema, but persists in react-final-form state and can not be changed manually)

Expect Fix. (Do not pass null values to react-final-form state)

This component may help:

<Form
  schema={{
    type: 'object',
    properties: {
      key: {
        type: 'string',
        title: 'First',
      },
    },
  }}
  value={{
    randomKey: null,
  }}
  onSubmit={data => console.log('res:', data)}
/>

Got this component as an example:

class App extends React.Component {
  state = {}

  render() {
    return (
      <Form
        schema={{
          type: 'object',
          title: 'some title',
          oneOfFieldName: 'type',
          oneOfFieldTitle: 'some field title',
          oneOf: [
            {
              type: 'object',
              title: 'via email',
              id: 'email',
              properties: {
                email: {
                  type: 'string',
                  title: 'email',
                },
              },
              required: ['email'],
            },
            {
              type: 'object',
              title: 'via phone',
              id: 'phone',
              properties: {
                phone: {
                  title: 'phone',
                  type: 'string',
                },
              },
              required: ['phone'],
            },
          ],
        }}
        value={reduxStore}
        onSubmit={data => presistDataInReduxStore(data)}
      />
    )
  }
}

Problem After submitting this form with phone selected user prompted to next step. Data was persisted in redux.

1. Doing step back to correct filled data email fields are being shown.
2. ReactFinalForm saves data passed as value in its own state. So if user re-submits with email data passed to onSubmit might look like this { type: 'email', phone: '#usersPhone', email: '#usersEmail' }

Expect

1. Phone fields to be shown on the screen after initial submit
2. Submit only data that user can see on his screen

Problem after filling the form and submitting it this error fall in console.

Expect explain what caused this or fix.

When the value for the field is passed, then the field is displayed in this way:

Problem Cyrillic symbols are not supported by react-maskedinput.
Expect Add support for cyrillic and other locales.

Expect Fix (this works well on previous versions)

Schema

{
  type: 'object',
  title: 'some title',
  properties: {
    sample_file: {
      type: 'file',
      name: 'sample_file',
      title: 'Sample file',
    },
  },
  required: ['sample_file']
}

The type error occurs into removeFieldsFromState function when oneOf-field is into some objects (more than one) and we switch values.
The constant updatedState is undefined in this case.

Problem previously this field had 1st element from items selected by default. Now it is empty by default so user can skip it. Making this field required makes no sense cause no error will be shown to user if it's empty.
Expect Fix (1st element from items must be selected by default)

Emerge exception, when set value to selection field by edit mode.

Probled Material-ui TextField API supports disabled property which makes field disabled for editing. reagent-js tho not passing this prop down to TextField.

Expect to have an option to make field disabled

Schema to test

{
  type: 'object',
  properties: {
    someProperty: {
      title: 'some title',
      type: 'string',
      disabled: true,
    },
  }
}

For example submitted data for a field of type 'string' looks like an object.
schema like one below

{
  type: 'object',
  properties: {
    phone: {
      title: 'Номер контактного телефона',
      type: 'string'
    },
  },
}

returns this output

{
  phone: {
    0: "8",
    1: "-",
    2: "8",
    3: "0",
    4: "0",
    5: "-",
    6: "2",
    7: "0",
    8: "0",
    9: "-",
    10: "8",
    11: "2",
    12: "1",
    13: "2",
    phone: "123123"
}

where "8-800-200-8212" is an old value not captured by input field

This issue may affect fields not capturing default value and throwing errors like cannot convert null or undefined to object, invalid prop of type 'object' supplied, expected 'string' when passing empty field for submission

Fields needs general validation, for example:

1. series: {
      type: 'string',
      title: 'Серия',
      pattern: '[XIV]{1,}-[А-Я]{2}',
    },
   

2. email-validation

Error message below

changing text style throws this

Problem oneOf field has first child's title selected by default, but not showing nested child's fields.
Expect show nested fields for initially selected value.

test schema:

{
  type: 'object',
  properties: {
    number: {
      type: 'string',
      title: 'Номер заявления',
    },
    issue_location: {
      type: 'object',
      title: 'Место выдачи результата',
      oneOfFieldName: 'type',
      oneOfFieldTitle: 'Место выдачи результата',
      oneOf: [
        {
          type: 'object',
          title: 'МФЦ',
          id: 'mfc',
          properties: {
            id: {
              type: 'radio',
              title: 'Офис',
              items: [{ id: 'dddd', title: 'ddd' }],
            },
          },
          required: ['id'],
        },
        {
          type: 'object',
          title: 'Ведомство',
          id: 'institution',
          properties: {
            id: {
              type: 'radio',
              title: 'Офис',
              items: [{ id: 'asda', title: 'asda' }],
            },
          },
          required: ['id'],
        },
      ],
    },
  },
  required: ['number'],
}

When the field with prop oneOf updated then happen an error happen in ComponentWillReceiveProps because properties prop is missing.

Yeh, that's the problem

The result object doesn't have any key-value couples with an empty string value.
So we can't change old values for empty values simply if we use a general component with the Form-component.

Problem highlighted fields are empty. Can not submit form because of this issue. This problem may occur due to mask specified for a field.
Expect Fix.

This schema may help

{
  type: 'object',
  title: 'asdasdasdas',
  properties: {
    something1: {
      type: 'string',
      title: 'some title 1',
      mask: '111111111111',
      pattern: '\\d{12,12}',
    },
    something2: {
      type: 'string',
      title: 'some title 2',
      mask: '111-111-111 11',
    },
  },
}

Titles of required fields are not signed with * and can be submitted with no value.

this schema might help

{
  type: 'object',
  title,
  properties: {
    work_interval: {
      type: 'time_ranges',
      title: 'Рабочее время',
    },
    rest_intervals: {
      type: 'array',
      title: 'Перерывы',
      items: {
        type: 'time_ranges',
        title: 'Время',
      },
    },
  },
}

Requirement of the address-field is displayed on a form (with *), but doesn't work when we submit this form.