Semantic-Ui-React Input with dropdown using Redux-Form

This might be a bit crazy and edge case, but it would be great if I could get this to work. I am using semantic-ui-react as a component library, but using a redux form to submit and validate the form. As long as working together, albeit a bit confusing, is okay.

I am currently trying to use the semantic-ui-react <Input />

component located next to the component <Dropdown />

linked here . It's where the dropdown file is bound to the input for similar corresponding input parameters. Crazy stuff happens when trying to mix in redux form.

For reuse purposes, I've moved the rendering of the inputs into separate methods, so here's my method for rendering the dropdown:

  renderDropdownField( field ) {
    const {meta: {touched, error}} = field;
    const className                = `form-group ${touched && error ? 'error' : ''}`;
    return (
        <div className={className}>
          <Form.Dropdown
              {...field.input}
              className='field'
              label={field.label}
              basic={field.basic}
              button={field.button}
              options={field.options}
              placeholder={field.label}
              onChange={( e, {value} ) => field.input.onChange(value)} />
        </div>
    )
  }

      

        
        
        
      

    

This is all right for the semantic ui react code for <Dropdown />

and its props.

I am calling this method from a component of a reductive form <Field />

like this:

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Field name='filter.operator'
                      basic='true'
                      button='true'
                      component={this.renderDropdownField}
                      options={operatorOptions} />}
       actionPosition='left' />

      

        
        
        
      

    

Thus, the semantic-ui-reaction <Dropdown />

is represented as for the components of the reduction forms action

a component <Input />

- a mouthful, yes, and a bit confusing, but it sort of works. The above code works as I expected, I can get the field values ​​in the reducer form reducer (for this form) BUT the css got it all picked up. It looks like this:

and in the redux store:

This way everything works as we would like, except that the css of the input fields is not aligned. The annoying part is that I can pass the normal regular component <Dropdown />

from react-ui-semantics to the action={ }

first input option , and it looks better, although I lose access to the select from the dropdown. The code looks like this:

<Field name='filter.threshold'
       label='Threshold'
       searchable='true'
       component={this.renderInputField}
       action={<Dropdown name='filter.operator'
                      basic='true'
                      button='true'
                      options={operatorOptions} />}
       actionPosition='left' />

      

        
        
        
      

    

and it displays like this:

So the bottom line is that I would like it to look like this (above) but work like the original piece of code. If I do the latter way, I lose access to the form-shortening capabilities for storing the value of the statement (dropdown), but it looks like I want the end result.