ckshekhar / react-semantic-redux-form Goto Github PK

and if it allows new additions?

I may just be doing this wrong, but I am unable to capture a value through onChange inside of either a select or dropdown. Here is an example implementation:

<Field
      component={SelectField}
      name='choose'
      label="Choose One"
      options={options}
      onChange={() => (e, { name, value }) => console.log(value);}
      placeholder="Story"
/>

I am always getting undefined on the change. Do you have a better example of how onChange should be implemented, or is this a bug?

Thanks!

the validation errors don't show up, if I remove touched from the code it does work.

I try to get a SelectField with a certain item preselected. Both options and the selected value are fetched with asnyc redux actions.

I can choose the different options to change the value or just submit the form without changes, eatherway I get the expected value from the form(initialValue or new value). So the value is there.

Only thing that is not working, on initialization no text is shown in the field. No Placeholder is shown and neither is the text of the preselected item. The field stays empty until you choose an option.

This is my SelectField. Value prop is set by Redux and ReduxForm.

<Field fluid name='providerId' 
          component={SelectField}
          options={provider}
          placeholder='Choose a Provider' />

Is there a way to get it working like in normal react semantic ui, where you just have to set the value prop to preselect an item? I tried fiddling around with the SelectField in your Demo, but I couldn't get it working there either.

import React from 'react'
import { Select } from 'semantic-ui-react'

let options = [{value:"1", text:"One"}, {value:"2", text:"Two"}];

const SelectExample = () => (
  <Select value='2' options={options} />
)

export default SelectExample

If adding react-semantic-redux-form to existing node_modules,
it is working well,
but if you remove the node_modules folder and re-install it,
the following error occurs

this is my package.json
and I'm using create-react-app CLI

{
"name": "redux_form_practice",
"version": "0.1.0",
"private": true,
"dependencies": {
"axios": "^0.16.2",
"lodash": "^4.17.4",
"react": "^16.0.0",
"react-dom": "^16.0.0",
"react-redux": "^5.0.6",
"react-router-dom": "4.2.2",
"react-scripts": "1.0.14",
"react-semantic-redux-form": "^1.1.6",
"redux": "^3.7.2",
"redux-form": "^7.0.4",
"redux-promise": "^0.5.3",
"redux-thunk": "^2.2.0",
"semantic-ui-react": "^0.74.2"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
},
"devDependencies": {
"@types/react": "^16.0.7",
"babel-preset-react": "^6.24.1",
"redux-devtools-extension": "^2.13.2"
}
}

Can you put react in peerDependency in the package.json file?

I would like a value to be preselected when the form is loaded. react-semenatic-ui docs mentions defaultValue to set an initial value. This isn't working though.

I am experiencing a strange issue where the width prop of a Field inside a FormGroup is ignored. This only happens when I import the InputField component from node_modules. If I clone the repo, build it, and import from dist/index.js, it works fine.

Strange...

Here's some code you can use to demonstrate: https://gist.github.com/mtg5014/3ffe321e24b60cba8e055c91d5dc13f6

Note the difference between the two imports of InputField.

Am I the only one experiencing this?

There are several PRs (#22 and #24) needing approval. @ckshekhar would you mind including those into a new version and upload it to npm?

Would love to see a Search implementation.

I've got one but it's complicated.

// Search.js

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  Search
} from 'semantic-ui-react';
import _ from 'lodash';

const propTypes = {
  list: PropTypes.array.isRequired,
  onChangeValue: PropTypes.func
}

const defaultProps = {
  onChangeValue(result) {
    console.log(result);
  }
}

class SearchComponent extends Component {
  state = {
    isLoading: false,
    value: '',
    results: []
  }

  componentDidMount() {
    this.resetComponent();
  }

  resetComponent = () => this.setState({ isLoading: false, results: [], value: '' })

  handleResultSelect = (e, { result }) => {
    this.setState({ value: result.description });
    this.props.onChangeValue(result);
  }

  handleSearchChange = (e, { value }) => {
    this.setState({ isLoading: true, value })

    setTimeout(() => {
      if (this.state.value.length < 1) return this.resetComponent()

      const re = new RegExp(_.escapeRegExp(this.state.value), 'i')
      const isMatch = result => re.test(`${result.title} ${result.description}`);

      this.setState({
        isLoading: false,
        results: _.filter(this.props.list, isMatch),
      })
    }, 500)
  }

  onFocus = () => {
    this.setState({ value: '' });
    this.props.onChangeValue('');
  }

  render() {
    const { isLoading, value, results } = this.state;

    return (
      <div style={{ marginBottom: 10 }}>
        <label style={{ fontSize: '.92857143em', fontWeight: 700, display: 'block', margin: '0 0 .28571429rem 0' }}>{this.props.label}</label>
        <Search
          {...this.props}
          fluid
          input={{ fluid: true }}
          loading={isLoading}
          onResultSelect={this.handleResultSelect}
          onSearchChange={this.handleSearchChange}
          results={results}
          value={value}
          minCharacters={3}
          onFocus={this.onFocus}
        />
      </div>
    );
  }
}

SearchComponent.propTypes = propTypes;
SearchComponent.defaultProps = defaultProps;

export default SearchComponent;

// common.js

export const searchField = ({ list, input, label }) => {
  return (
    <Search
      {...input}
      label={label}
      list={list}
      onChangeValue={(result) => {
        console.log(result);
        if (result !== '') return input.onChange(`${result.title} ${result.description}`);
        return input.onChange('');
      }}
    />
  );
}

Any component has a way to show warning messages from warning functions

Currently is not possible to have a inline form field.

I'm using the following code to render a SelectField with allowAdditions.
When I add items I see them being added in the state, but the element itself doesn't show a new tag.

<Field
            name='tags'
            component={SelectField}
            multiple
            allowAdditions
            label='Tags'
            options={[
                {key: 'test', value: 'test', text: 'Test'},
                {key: 'two', value: 'two', text: 'Test 2'},
            ]}/>

Is there something I'm forgetting?
Thank you!

I am not able to set the default value of a form. I tested the same code, using a placeholder instead, and that works. Am I missing something here? This is my Field component, rendered inside my redux-form.

<Field name={${testId}_${category.name}_attributeId} options={Object.keys(category.attributes).map(attribute => ({ text: category.attributes[attribute], value: category.attributes[attribute], }))} defaultValue={category.attributes[Object.keys(category.attributes)[0]]} component={Select} />

I am trying to make any of these work with using the wrapper structure given in this repo. Redux-form change action is firing but the value is not changing and the state is always equal to the prior ones.

Can I ask for a simple example how you managed to make these work? Tried to debug the issue but checked value seems a problematic.

Have found an issue where a checkbox isn't updating the store (or on the UI).

I used the previous sandbox example you gave for checkbox referenced on this page Toggle, Checkbox, Radio elements not changing checked status. #4 which works fine with semantic-ui-react version 0.71.5.
If you increase the semantic-ui-react version from 0.71.5 to 0.72.0 it still works, however if you increase to 0.73.0 it no longer works!

Issue appears to have been caused by a change in semantic-ui-react v0.73.0, refer to semantic-ui-react issue breaking(Checkbox): callback with new checked value in onClick (#2014) and breaking(Checkbox): callback with new checked value in onClick by areinmeyer - Pull Request #2014 - Semantic-Org/Semantic-UI-React.
This change to redux-form also appears related: Checkbox value breaking pristine state - Issue#2857 - erikras/redux-form.

I think the fix might be in the CheckboxField (and Checkbox) functions, where instead of:
return input.onChange(!data.checked)

it possibly should be:
return input.onChange(!!data.checked)

I tried to build(yarn build) by create-reate-app cli

Failed to compile.
Failed to minify the code from this file:
./node_modules/react-semantic-redux-form/dist/index.js:8

and failed upper reason what's problem?

Have the following:

                            <Field
                                name="group"
                                component={Select}
                                label="Group"
                                placeholder="Select Group"
                                required
                                options={groupList}
                                selection
                                selectOnBlur={false}
                                selectOnNavigation={false}
                            />

However am receiving this error:

React does not recognize the 'selectOnNavigation' prop on a DOM element.

react-semantic-redux-form is currently using semantic-ui-react 0.71.5 and this issue about selectOnNavigation was resolved in a later version... not sure which one but semantic-ui-react is currently at 0.75.1.

Would it be possible to update the version please?

Thanks!

For instance, I would prefer to use the ToggleField component, so that I get true or false (as opposed to undefined) for the value in my form state. However, I need to conditionally set that field to readonly, and can't because the props don't get passed down.

I also think this would fix the inline issue: #12